.dropdown {
  &__btn {
    position: relative;
    padding: @item-padding (@icon-size + (@item-padding * 2)) @item-padding @item-padding;
    border: 1px solid @item-color-inverted;
    line-height: @body-line-height;
    text-align: left;
    background-color: @item-color;
    color: @item-color-inverted;

    .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover,
    html:not(.a11y-disable-focusoutline) &:focus {
      background-color: @item-color-hover;
      color: @item-color-inverted-hover;
      .transition(background-color @duration ease-in, color @duration ease-in;);
    }

    .dir-rtl & {
      padding-right: @item-padding;
      padding-left: @icon-size + (@item-padding * 2);
      text-align: right;
    }
  }

  &__btn.is-disabled {
    background-color: @disabled;
    color: @disabled-inverted;
  }

  &__btn[aria-expanded="true"] {
    background-color: @item-color-selected;
    color: @item-color-inverted-selected;
  }

  &__icon {
    position: absolute;
    top: 50%;
    right: @item-padding;
    .transform(translateY(-50%));

    .dir-rtl & {
      right: inherit;
      left: @item-padding;
    }
  }

  &__item {
    padding: @item-padding;
    background-color: @item-color;
    border: 1px solid @item-color-hover;
    color: @item-color-inverted;

    .no-touch &:not(:focus):not([aria-selected="true"]):hover {
      background-color: @item-color-hover;
      color: @item-color-inverted-hover;
      .transition(background-color @duration ease-in, color @duration ease-in;);
    }
  }

  &__item {
    &:focus,
    &[aria-selected="true"] {
      // This code can be used to style a non-native dropdown as closely
      // as possible to the default browser settings
      // background-color: Highlight;
      // background-color: -webkit-focus-ring-color;
      // color: white;

      background-color: @item-color-selected;
      color: @item-color-inverted-selected;
    }
  }
}
