.dropdown
{
  width: auto;
  max-width: 100%;
}

.dropdown-toggle
{
  display: flex;
  justify-content: space-between;
  align-items: center;

  &::before
  {
    margin-right: 5px;
    font-size: $font-size-lg;
  }

  &::after
  {
    margin-left: 5px;
    font-size: $font-size-lg;
  }

  &.no-caret::after
  {
    display: none;
  }
}

.show
{
  & > .btn-primary,
  & > .btn-outline-primary
  {
    &.dropdown-toggle
    {
      border-color: transparent;
      background-color: $accent-color-primary-hover;
    }
  }
}

.dropdown-menu
{
  width: 100%;
  margin: 1px 0 0;
  border-radius: 0;
  border: 1px solid $border-color-primary;
  padding: 4px 0 2px;
  background: $coconut;
  font-size: $font-size-md;
}

.dropdown-item,
.dropdown-header,
.dropdown-text
{
  margin-bottom: 2px;
  padding: 5px 10px;
  white-space: initial;
}

.dropdown-item
{
  &:first-child,
  &:last-child
  {
    border-radius: 0;
  }

  &:hover,
  &:focus,
  &.is-active
  {
    background: $accent-color-primary;
    color: $coconut;
  }

  &:disabled
  {
    border: 0;
    background: transparent;
    color: $font-color-secondary;
    pointer-events: initial;
    cursor: not-allowed;
  }

  &.is-destructive:not(:disabled):not(.disabled)
  {
    color: $feedback-color-warning;

    &:hover,
    &:focus
    {
      border-color: transparent;
      background: $feedback-color-warning;
      color: $coconut;
    }

    &:focus
    {
      box-shadow: $box-shadow-focus-warning;
    }
  }
}

.dropdown-header
{
  color: $font-color-primary;
  font-weight: $font-weight-semi-bold;
  font-size: $font-size-md;
}

.dropdown-text
{
  color: $font-color-secondary;
}

.dropdown-divider
{
  border-color: $border-color-secondary;
}