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

:host {
  display: block;

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

  .clear-btn {
    @include mixins.flexCentering;

    position: absolute;
    top: -6px;
    right: 18px;
    border: 0;
    padding: 0;
    background: transparent;
    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);
      }
    }
  }
}