@import "../../settings/settings.colors";
@import "../../settings/settings.formFields";
@import "../../tools/tools.all";

.select {
  $select-height: $form-field-height;
  $select-margin-button: $form-field-margin-button;

  overflow: hidden;
  height: $select-height;
  margin-bottom: $select-margin-button;

  .mat-form-field-wrapper {
    padding: 0;
    border: 0.0625rem solid transparent;
    background: transparent;
    transform: translateY(1.0625rem);

    .mat-form-field-flex {
      padding: 0 !important;
      background: white !important;
    }

    .mat-form-field-infix {
      padding: 0;
      border: none;
    }

    .mat-select {
      height: 2.25rem;
      padding: 0 0.5rem;
      border: 0.0625rem solid $ash;
    }

    .mat-select-value-text,
    .mat-form-field-label {
      color: $licorice !important;
      font-size: 0.938rem !important;
      font-weight: 400 !important;
    }

    &:active,
    &:focus,
    &:hover {
      .mat-select-value-text,
      .mat-form-field-label {
        color: $licorice !important;
      }

      border-color: $licorice;
      background: $licorice;

      .mat-select {
        border-color: $licorice;
      }

      .mat-hint::before,
      .mat-error::before {
        background-color: $transparent !important;
      }
    }

    .mat-form-field-underline {
      display: none;
    }

    .mat-form-field-label-wrapper {
      position: static;
      padding: 0;

      .mat-form-field-label {
        width: 100%;
        height: 1rem;
        padding-left: 0;
        line-height: 0.8125rem;
        transform: translateY(-1.125rem) !important;

        mat-label {
          color: $licorice;
          font-size: 0.75rem;
          font-weight: 500;
        }
      }
    }

    /* stylelint-disable-next-line no-duplicate-selectors */
    .mat-select-value-text,
    .mat-form-field-label {
      line-height: 2.25rem;
    }

    .mat-form-field-label {
      top: 0;
      padding: 0 0.5rem;
      margin-top: 0;
      transform: unset;
    }

    .mat-select-arrow {
      color: $ash;
    }

    .mat-select-empty {
      .mat-select-value {
        height: 2.125rem;
      }

      + .mat-form-field-label-wrapper {
        display: block;

        .mat-form-field-label {
          transform: unset;
        }
      }

      .mat-select-value-text {
        span {
          color: $ash;
          font-size: 0.813rem;
          font-weight: 400;
          line-height: 2.25rem;
        }
      }
    }
  }

  &.mat-form-field-disabled .mat-form-field-wrapper {
    border: none;

    .mat-form-field-infix {
      background-color: whitesmoke;
    }

    &:active,
    &:focus,
    &:hover {
      border: none;
    }

    .mat-form-field-label mat-label {
      color: $ash !important;
    }
  }

  .mat-select-disabled {
    border-width: 0.0625rem !important;
    border-color: $ash !important;
  }

  span.mat-option-text {
    color: $licorice;
    font-size: 0.813rem !important;
    font-weight: 400 !important;
  }

  &.mat-focused {
    border-color: $cerulean;

    .mat-select {
      border-color: $cerulean;
    }
  }

  &.mat-form-field.mat-focused.mat-primary .mat-select-arrow {
    color: $licorice;
  }

  .mat-form-field-subscript-wrapper {
    padding: 0 !important;
    margin-top: 0.375rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 300;
    transform: translateY(1.3125rem);
  }

  .mat-hint::before,
  .mat-error::before {
    background-color: $transparent !important;
  }

  &.mat-form-field-invalid {
    .mat-select,
    .mat-form-field-wrapper:hover {
      border-color: $error-default !important;
    }

    .mat-form-field-label mat-label,
    .mat-select-value-text span,
    .mat-error {
      color: $error-default !important;
    }

    .mat-form-field-infix {
      border-color: $error-default;
    }

    .mat-select-arrow {
      border-top-color: $error-default;
      color: $error-default;
    }

    .mat-form-field-flex {
      &::after {
        display: none;
      }
    }
  }

  .mat-form-field-hint-wrapper {
    transform: translateY(-0.03125rem) !important;
  }
}

.mat-select-panel-wrap > div {
  border-radius: 0;

  .mat-option {
    height: 2.25rem;
    font-size: 0.8125rem;

    &.mat-selected:not(.mat-option-multiple),
    &.mat-active:not(.mat-option-multiple) {
      color: $cerulean;
    }

    /* stylelint-disable-next-line no-duplicate-selectors */
    &.mat-selected:not(.mat-option-multiple),
    &.mat-active:not(.mat-option-multiple) {
      background: $distance;
    }

    &:hover {
      background: $silver-gray;
    }
  }
}

.mat-form-field-appearance-fill .mat-form-field-wrapper .mat-select-arrow-wrapper {
  transform: translateY(0);
}

.mat-select-trigger {
  height: auto;
}
