@use '../../styles/mixins';

:host {
  display: block;

  mat-form-field {
    position: relative;
  }

  .select-trigger-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .loading-trigger {
    color: var(--mdc-filled-text-field-disabled-label-text-color);
    font-size: var(--mdc-filled-text-field-label-text-size);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    pointer-events: none;
  }

  .clear-btn {
    @include mixins.reset-button;
    @include mixins.flexCentering;

    position: absolute;
    top: -6px;
    right: 18px;
    color: currentColor;
    opacity: 0;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    &,
    mat-icon {
      @include mixins.circle(22px);
      font-size: 22px;
    }
  }

  mat-form-field:hover,
  mat-form-field.mat-focused {
    .select-trigger-label {
      width: calc(100% - 24px);
    }

    .clear-btn {
      opacity: 1;
    }
  }

  mat-form-field.mat-form-field-appearance-outline {
    .clear-btn {
      top: 0;
      color: var(--mat-select-enabled-arrow-color);
    }

    &.mat-focused {
      .clear-btn {
        color: var(--mat-select-focused-arrow-color);
      }
    }
  }

  mat-form-field.loading-state {
    ::ng-deep .mat-mdc-select-value {
      visibility: hidden;
    }
  }
}