@use "src/styles/framework" as *;

.city-autocomplete {
  display: flex;
  flex-direction: column;

  &__labels-container {
    justify-content: space-between;
    margin-bottom: $space-m;
    width: 100%;

    display: flex;
    align-items: center;
  }

  &__label {
    @include font-overflow();
    @include font-small($gray);
  }

  &__input {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    width: 100%;

    @include control-border-shadow();
  }

  &__search-button {
    width: $buttons-width !important;
    min-width: $buttons-width;
    border-radius: 0 $border-radius $border-radius 0 !important;
    border: none !important;
    border-left: 1px solid white !important;
    background-color: transparent !important;
    height: $standard-button-height - 2px;

    &:hover {
      background-color: $white !important;
      border-left-color: $border-input !important;
    }
  }

  &__input--has-value {
    .button-clear {
      display: block !important;
    }

    .city-autocomplete__search-button {
      border-left: 1px solid $border-input !important;
    }
  }

  &__input--has-error {
    border-color: $red;
  }
}

