@import '../settings/variables';

.c-dropdown-button {
  &__input {
    padding: 0;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
  }

  &__icon {
    color: $color-secondary-dark;
    padding-right: 0.75rem;
  }
  &__text {
    color: $color-white;
  }

  &__container {
    transform: translateY(1px);
    background-color: $color-background-alternative;
    border: 2px solid $color-background-alternative;
    cursor: pointer;
    display: flex;
    padding: 0 1rem;
    align-items: center;
    border-radius: 4px;
    width: 100%;
    height: 2.4rem;
    &:hover {
      background-color: $color-button-hover;
      border: 2px solid $color-button-hover;
    }

    &--active {
      background-color: $color-background;
      border: $hairline solid $color-primary;
    }
    &--isHighlighted {
      border: 2px solid $color-primary;
      background-color: $color-primary;
      color: $color-white;
      &:hover {
        background-color: $color-button-active-hover;
      }
    }
  }

  &__arrow-icon {
    color: $color-secondary-dark;
    font-size: 0.7em;
    padding-left: 0.5rem;
  }
}