/* dropdowns have to deal with "opened" on top of focus */

.dropdown {
  &.show {
    > .dropdown-toggle {
      &[aria-haspopup="true"] {
        &.btn-primary {
          background-color: $blue-500;
        }
        &.btn-secondary {
          background-color: $blue-400;
        }
      }
    }
  }
}

.dropdown-toggle {

  &.btn-icon-only,
  &.is-caretless {
    &::after {
      display: none;
    }
  }

  &::after {
    background-repeat: no-repeat;
    background-size: 26px;
    background-position: center;
    border-top: none;
    border-right: none;
    display: inline-block;
    width: $luci-icon-size-md;
    height: $luci-icon-size-md;
    margin-left: $luci-space-xxs;
    content: "";
  }

  &:active,
  &.active {
    &::after {
      background-image: $custom-select-indicator-secondary !important;
    }
  }

  *.btn-sm {
    &::after {
      background-size: $luci-icon-size-sm;
      width: $luci-icon-size-xs;
      height: $luci-icon-size-xs;
    }
  }

  &.btn-primary {
    &::after {
      background-image: $custom-select-indicator-secondary;
    }
    /* If we hover, or are opened, reverse the background to white */
    &:hover,
    &[aria-expanded="true"] {
      &::after {
        background-image: $custom-select-indicator-secondary;
      }
    }
    &:disabled {
      &::after {
        background-image: $custom-select-indicator-disabled;
      }
    }
  }
  &.btn-link {
    &::after {
      background-image: $custom-select-indicator-primary;
    }
    /* If we are opened, reverse the background to white */
    &[aria-expanded="true"] {
      &::after {
        background-image: $custom-select-indicator-primary;
      }
    }
    &:disabled {
      &::after {
        background-image: $custom-select-indicator-disabled;
      }
    }
  }
  &.btn-secondary,
  &.btn-flat {
    &::after {
      background-image: $custom-select-indicator-primary;
    }
    /* If we hover, or are opened, reverse the background to white */
    &:hover,
    &[aria-expanded="true"] {
      &::after {
        background-image: $custom-select-indicator-secondary;
      }
    }
    &:disabled {
      &::after {
        background-image: $custom-select-indicator-disabled;
      }
    }
  }
}

.dropdown-header {
  font-size: $luci-font-size-md;
  font-weight: $luci-font-weight-semi-bold;
  padding: $luci-space-inset-stretch-sm;
}

/*ngb declares each item as a button, but luci wants them to hover as links */

.dropdown-item {
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }

  &:active:hover,
  &.active:hover {
    text-decoration: none;
  }

  &.dropdown-item-metadata {
    line-height: 1;

    &:hover {
      text-decoration: none;

      > span {
        text-decoration: underline; 
      }

      &:active,
      &.active {

      > span {
          text-decoration: none;
        }
      }
    }

    &:active,
    &.active {
      color: $luci-text-color-primary-on-dark !important;

      .text-muted {
        color: $luci-text-color-primary-on-dark !important;
      }

      .nwf-icon {

        svg {

          #base-layer {
            fill: $luci-icon-color-on-interactive !important;
          }

          #glyph {
            fill: $luci-interactive-color-active !important;
          }
        }
      }
    }
  }
}

.close {
  &:hover {
    color: $luci-link-color-hover-on-light;
  }
}

.dropdown-menu {
  box-shadow: $dropdown-box-shadow;
}

.dropdown-menu-sm {
  font-size: $luci-font-size-sm;
}