$search-font-size: 14px;

@mixin list-search {
  display: flex;
  flex-direction: row;
  position: relative;
  height: $search-frame;
  align-items: center;
  // padding: 0 10px 0 20px;
  font-size: $search-font-size;
  background-color: #f9f9f9;
  border-bottom: 1px solid #dddddd;
}

.list-search-frame {
  @include list-search;
  .searchbox {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    input {
      display: inline-flex;
      width: 100%;
      font-size: 1em;
      padding-left: 0;
    }
    .btn-search {
      color: #777777;
      font-size: 12px;
      display: inline-flex;
      margin-left: auto;
      flex: none;
    }
  }
}

.list-search-frame {
  .searchbox {
    height: 100%;
    .mat-form-field {
      width: 100%;
      height: $search-frame;
      .mat-form-field-wrapper {
        padding: 0;
        padding-bottom: 0 !important;
        height: 100%;
        .mat-form-field-flex {
          height: 100%;
          align-items: center;
          flex: 1 1 auto;
          padding: 0 20px;
          .mat-form-field-infix {
            font-size: 14px;
            border: none;
          }
          .mat-form-field-suffix {
            margin-left: auto;
            .mat-icon {
              line-height: 24px;
            }
          }
        }
      }
    }
    .mat-form-field-appearance-legacy {
      .mat-form-field-wrapper {
        padding: 0;
      }
      .mat-form-field-underline {
        bottom: 0;
        background-color: unset !important;
      }

      /*  &.mat-form-field-can-float {
        &.mat-form-field-should-float .mat-form-field-label,
        .mat-input-server:focus
          + .mat-form-field-label-wrapper
          .mat-form-field-label {
          color: red;
        }
      }*/
    }
  }
}

.selectbox {
  display: inline-flex;
  width: 46%;
  padding-left: 20px;

  & + .searchbox {
    width: 54%;
    display: inline-flex;
    input {
      display: inline-flex;
      width: 100%;
      font-size: 1em;
      padding-left: 0;
    }
    .btn-search {
      color: #777777;
      font-size: 12px;
      display: inline-flex;
      margin-left: auto;
      flex: none;
    }
  }
}