@use 'typography';
@use 'mixins';

mat-form-field {
  --mat-form-field-container-text-size: #{map-get(typography.$font-sizes, 'sm', 'size')};
  --mat-form-field-container-text-line-height: #{map-get(
      typography.$font-sizes,
      'sm',
      'line-height'
    )};
  --mat-form-field-subscript-text-size: #{map-get(typography.$font-sizes, 'xs', 'size')};

  .mdc-text-field--filled {
    --mdc-filled-text-field-container-color: transparent;
  }

  .mdc-text-field--outlined {
    --mdc-outlined-text-field-container-shape: 10px;

    .mat-mdc-form-field-infix {
      display: flex;
      align-items: center;
    }
  }

  .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined, .mdc-text-field--no-label) {
    .mat-mdc-floating-label {
      display: block !important;
    }

    .mat-mdc-form-field-infix {
      padding-top: 18px !important;
      padding-bottom: 0 !important;
    }
  }

  .mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 36px !important;
    --mdc-icon-button-icon-size: 20px;
    padding: 8px !important;
    margin-right: 2px;
  }

  .mat-mdc-select-arrow-wrapper {
    height: 20px;
  }
}

.mat-mdc-select-panel {
  --mat-option-label-text-size: #{map-get(typography.$font-sizes, 'sm', 'size')};

  &.rounded {
    margin-top: 2px;
    border-radius: 4px !important;
  }

  .mat-select-search-clear {
    --mdc-icon-button-state-layer-size: 36px !important;

    @include mixins.flexCentering;

    margin-top: 2px;

    .mat-icon {
      @include mixins.square(18px);
      font-size: 18px;
    }
  }

  .mat-select-search-no-entries-found {
    text-align: center;
    color: #5c5c5c;
  }

  .mat-mdc-option {
    min-height: 46px;
  }
}