// Hide during loading.
dropdown,
[is="dropdown"] { visibility: hidden; }

.dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}

.dropdown-button {
  @extend %btn-common;
  display: inline-flex;
  align-items: center;

  > .appended-icon {
    margin-right: -.25em;
    margin-left: .25em;
    font-size: $font-size-sm;
  }
}

.dropdown-content {
  @extend %popper-arrow;
  z-index: $z-index-dropdown-content;
  display: none;
  flex-flow: column;
  min-width: $dropdown-min-width;
  background-color: $dropdown-bg-color;
  border-color: $dropdown-bg-color;
  @include box-shadow($dropdown-shadow);

  &.show { display: flex; }
}

.dropdown-item {
  @include no-decoration;
  @include reset-btn;
  @include set-link-state-color($dropdown-item-color);
  display: block;
  padding: $dropdown-padding-y $dropdown-padding-x;
  font-family: inherit;
  font-size: inherit;
  line-height: $dropdown-line-height;
  @include transition(
    color $transition-duration $transition-timing-function,
    background-color $transition-duration $transition-timing-function
  );

  &.active:not([disabled]) {
    color: $dropdown-active-color;
    background-color: $dropdown-active-bg-color;
  }

  &:hover:not([disabled]),
  &:focus:not([disabled]) {
    color: $dropdown-item-hover-color;
    background-color: $dropdown-bg-hover-color;
  }

  &[disabled] {
    cursor: default;
    opacity: .7;
  }
}

.dropdown-header {
  display: block;
  padding: $dropdown-padding-y $dropdown-padding-x;
  margin: 0;
  font-size: $dropdown-header-font-size;
  color: $dropdown-header-color;
}

.dropdown-divider {
  height: 0;
  margin: $dropdown-divider-margin-y 0;
  overflow: hidden;
  border-top: 1px solid $dropdown-divider-color;
}