.dropdown {
  position: relative;
  @include column;

  &:after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    right: 10px;
    top: 43%;
    border-bottom: 1.5px solid;
    border-left: 1.5px solid;
    border-color: var(--tide-booking-dropdown-arrow-color);
    transform: rotate(-45deg) translateY(-50%);
    @include transitionEasing($duration: 0.2s);
  }

  &:hover {
    &:after {
      border-color: var(--tide-booking-dropdown-arrow-color-hover);
    }
  }

  select {
    @extend %reset;
    width: 100%;
    height: var(--tide-booking-dropdown-height);
    border: var(--tide-booking-dropdown-border);
    border-radius: var(--tide-booking-dropdown-border-radius);
    font-family: var(--tide-booking-dropdown-font-family);
    font-size: 16px;
    background: var(--tide-booking-dropdown-background);
    outline: none;
    box-shadow: none;
    cursor: pointer;
    @extend %transition-easing;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding-left: 15px;

    @include media-lg {
      font-size: 18px;
    }

    &:focus,
    &:active {
      border: var(--tide-booking-dropdown-border-focus);
      outline: none;
      box-shadow: none;
    }

    &:disabled {
      cursor: not-allowed;

      .dropdown::after {
        border-color: var(--tide-booking-dropdown-arrow-color-disabled);

        &hover {
          border-color: var(--tide-booking-dropdown-arrow-color-disabled);
        }
      }
    }
  }

  &--small {
    select {
      padding-right: 30px;
      padding-left: 10px;
    }
  }
}