$animDuration: 300ms;

.ui-search-select {
  transition: width $animDuration;
  width: 24px;
  overflow: hidden;

  .q-field__marginal {
    color: $blue-grey;
  }

  .q-field__input::placeholder {
    color: $blue-grey;
    opacity: 0;
    transition: opacity $animDuration;
  }

  .q-field__control::before {
    border-color: rgba($blue-grey, 0);
  }

  &:hover,
  &.q-field--focused,
  &.ui-search-select--edited {
    width: var(--ui-search-select--expanded-width, 200px);

    .q-field__input::placeholder {
      opacity: 1;
    }

    .q-field__control::before {
      border-color: $blue-grey;
    }
  }
}
