// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@import 'deprecate';
@import '../mixins/index';

/**
 *
 * @summary Initializes a trigger element around the dropdown
 * @name dropdown
 * @selector .slds-dropdown-trigger
 * @restrict div, span, li
 * @support dev-ready
 * @variant
 * @lwc
 */
.slds-dropdown-trigger {
  position: relative;
  display: inline-block;

  .slds-dropdown {
    top: 100%;
  }

  .slds-dropdown_bottom,
  .slds-dropdown--bottom {
    top: auto;
  }

  // Deal with positioning when target is just an icon
  > [class*="slds-button_icon"],
  > [class*="slds-button--icon"] {

    ~ .slds-dropdown_left[class*="slds-nubbin"],
    ~ .slds-dropdown--left[class*="slds-nubbin"] {
      left: ($spacing-x-small * -1);
    }

    ~ .slds-dropdown_right[class*="slds-nubbin"],
    ~ .slds-dropdown--right[class*="slds-nubbin"] {
      right: ($spacing-x-small * -1);
    }
  }
}

/**
  * @summary If someone is using javascript for click to toggle - this modifier will help
  * @selector .slds-dropdown-trigger_hover
  * @restrict .slds-dropdown-trigger
  */
.slds-dropdown-trigger_hover,
.slds-dropdown-trigger--hover {

  .slds-dropdown {
    visibility: hidden;
    opacity: 0;
    transition: opacity $duration-quickly linear, visibility $duration-quickly linear;
  }

  &:hover,
  &:focus {
    outline: 0;

    .slds-dropdown {
      visibility: visible;
      opacity: 1;
      transition: opacity $duration-quickly linear, visibility $duration-quickly linear;
    }
  }
}

/**
* @summary If someone is using javascript for click to toggle - this modifier will help
* @selector .slds-dropdown-trigger_click
* @restrict .slds-dropdown-trigger
*/
.slds-dropdown-trigger_click,
.slds-dropdown-trigger--click {

  .slds-dropdown,
  &:hover .slds-dropdown {
    display: none;
  }

  /**
  * @summary Opens dropdown menu when invoked on click
  * @selector .slds-is-open
  * @restrict .slds-dropdown-trigger_click
  * @modifier
  * @group visibility
  */
  &.slds-is-open .slds-dropdown {
    display: block;
    visibility: visible;
    opacity: 1;
  }
}

/**
 * @summary Initializes dropdown
 * @selector .slds-dropdown
 * @restrict .slds-dropdown-trigger div, .slds-dropdown-trigger ul, .slds-docked-composer_overflow div
 * @notes Applies positioning and container styles, by default, dropdown appears below and center of target
 */
.slds-dropdown {
  position: absolute;
  z-index: $z-index-dropdown;
  left: 50%;
  float: left;
  min-width: $size-xx-small;
  max-width: $size-medium;
  width: max-content; /* This is needed as replacement for legacy `white-space: nowrap;` from the inner menu-item */
  margin-top: $spacing-xxx-small;
  margin-bottom: $spacing-xxx-small;
  border: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border});
  border-radius: $border-radius-medium;
  padding: $spacing-xx-small 0;
  font-family: var(--slds-c-dropdown-font-family);
  font-size: var(--slds-c-dropdown-font-size, $font-size-2);
  font-weight: var(--slds-c-dropdown-font-weight);
  font-style: var(--slds-c-dropdown-font-style);
  text-decoration: var(--slds-c-dropdown-font-decoration);
  line-height: var(--slds-c-dropdown-font-lineheight);
  letter-spacing: var(--slds-c-dropdown-letter-spacing);
  background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  box-shadow: $shadow-drop-down;
  transform: translateX(-50%);
  color: var(--slds-c-dropdown-color, var(--slds-g-color-neutral-base-10, #{$color-text-default}));

  // Typeahead stuff
  mark {
    font-weight: $font-weight-bold;
    background-color: transparent;
    color: inherit;
  }

  // Adjust position of dropdown with top nubbin
  &[class*="slds-nubbin_top"],
  &[class*="slds-nubbin--top"] {
    margin-top: ($nubbin-size-default * 0.5);
  }

  // Adjust position of dropdown with bottom nubbin
  &[class*="slds-nubbin_bottom"],
  &[class*="slds-nubbin--bottom"] {
    margin-bottom: ($nubbin-size-default * 0.5);
  }
}

/**
  * @summary Theme
  * @selector .slds-dropdown_inverse
  * @restrict .slds-dropdown
  * @modifier
  * @group theme
  */
.slds-dropdown_inverse,
.slds-dropdown--inverse {
  background: var(--slds-g-color-brand-base-10, #{$color-background-inverse});
  border-color: var(--slds-g-color-brand-base-10, #{$color-border-inverse});
  color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});

  .slds-dropdown__item > a {
    color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});

    &:hover,
    &:focus {
      color: var(--slds-g-color-neutral-100-opacity-75, #{$color-text-link-inverse-hover});
      background-color: transparent;
    }

    &:focus {
      box-shadow: var(--slds-g-shadow-inset-focus-1, #{$shadow-button-focus});
      outline: 0;
    }

    &:active {
      color: var(--slds-g-color-neutral-100-opacity-50, #{$color-text-link-inverse-active});
      background-color: transparent;
    }

    &[aria-disabled="true"] {
      color: var(--slds-g-color-neutral-100-opacity-25, #{$color-text-link-inverse-disabled});
      cursor: default;

      &:hover {
        background-color: transparent;
      }
    }
  }
}

/**
  * @summary Adds padding to area above dropdown menu list
  * @selector .slds-dropdown__header
  * @restrict .slds-dropdown li
  */
.slds-dropdown__header {
  @include text-title;
  padding: $spacing-x-small $spacing-small;

  &:focus {
    box-shadow: var(--slds-g-shadow-inset-focus-1);
    outline: 0;
  }
}

/**
  * @summary Initializes dropdown item
  * @selector .slds-dropdown__item
  * @restrict .slds-dropdown li
  * @required
  */
.slds-dropdown__item {
  line-height: $line-height-text;
  font-weight: $font-weight-regular;

  > a {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $spacing-x-small $spacing-small;
    background-color: var(--slds-c-dropdown-item-color-background);
    color: var(--slds-c-dropdown-item-color, var(--slds-g-color-neutral-base-10, #{$color-text-default}));
    text-decoration: none;
    cursor: pointer;

    &:hover,
    &:focus {
      outline: 0;
      text-decoration: none;
    }

    &:hover {
      background-color: var(--slds-c-dropdown-item-color-background-hover, var(--slds-g-color-neutral-base-95, #{$color-background-row-hover}));
      color: var(--slds-c-dropdown-item-color-hover);
    }

    &:focus {
      background-color: var(--slds-c-dropdown-item-color-background-focus, var(--slds-g-color-neutral-base-95, #{$color-background-row-hover}));
      box-shadow: var(--slds-g-shadow-inset-focus-1, #{$shadow-button-focus});
      color: var(--slds-c-dropdown-item-color-focus);
    }

    &.slds-has-success,
    &.slds-has-warning,
    &.slds-has-error {

      &:focus {
        box-shadow: var(--slds-g-shadow-inset-inverse-focus-1);
      }
    }

    &:active {
      text-decoration: none;
      background-color: var(--slds-c-dropdown-item-color-background-active, var(--slds-g-color-neutral-base-95, #{$color-background-row-active}));
      color: var(--slds-c-dropdown-item-color-active);
    }

    &[aria-disabled="true"] {
      cursor: default;

      &,
      &:hover,
      &:active,
      &:focus {
        background-color: var(--slds-c-dropdown-item-color-background-disabled, transparent);
        color: var(--slds-c-dropdown-item-color-disabled, var(--slds-g-color-neutral-base-80, #{$color-text-button-default-disabled}));
      }

      &:focus {
        box-shadow: none;
      }

      .slds-icon {
        fill: var(--slds-g-color-neutral-base-80, #{$color-text-button-default-disabled});
      }
    }

    /**
      * @summary Places a menu item into an errored state
      *
      * @selector .slds-has-error
      * @restrict .slds-dropdown__item > a
      * @modifier
      * @group notification
      */
    &.slds-has-error {
      background: var(--slds-g-color-error-base-40, #{$color-background-destructive});
    }

    /**
      * @summary Places a menu item into a success state
      *
      * @selector .slds-has-success
      * @restrict .slds-dropdown__item > a
      * @modifier
      * @group notification
      */
    &.slds-has-success {
      background: var(--slds-g-color-success-base-50, #{$color-background-success-dark});
    }

    &.slds-has-error,
    &.slds-has-success {
      color: var(--slds-g-color-neutral-base-100, #{$color-gray-1});
    }

    /**
      * @summary Places a menu item into a warning state
      *
      * @selector .slds-has-warning
      * @restrict .slds-dropdown__item > a
      * @modifier
      * @group notification
      */
    &.slds-has-warning {
      background: var(--slds-g-color-warning-base-60, #{$color-background-warning});

      .slds-indicator_unread {
        background-color: currentColor;
      }

      .slds-indicator_unsaved {
        color: currentColor;
      }
    }

    &.slds-has-error,
    &.slds-has-success,
    &.slds-has-warning {

      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }
  }

  /**
    * @summary If menu contains menuitemcheckbox then this toggles the selected icon when it is selected
    * @selector .slds-icon_selected
    * @restrict .slds-dropdown__item svg
    */
  .slds-icon_selected,
  .slds-icon--selected {
    opacity: 0;
    transition: opacity $duration-immediately ease;
  }

  /**
    * @summary If menu contains menuitemcheckbox then this handles the selected states
    * @selector .slds-is-selected
    * @restrict .slds-dropdown__item
    * @modifier
    */
  &.slds-is-selected .slds-icon_selected,
  &.slds-is-selected .slds-icon--selected {
    opacity: 1;
  }

  &.slds-has-notification .slds-indicator_unsaved {
    top: rem(-6px);
  }
}

/**
  * @summary Positions dropdown to left side of target
  * @selector .slds-dropdown_left
  * @restrict .slds-dropdown
  * @modifier
  * @group menu position
  */
.slds-dropdown_left,
.slds-dropdown--left {
  left: 0;
  right: auto;
  transform: translateX(0);

  &.slds-nubbin_top-left:before,
  &.slds-nubbin_top-left:after,
  &.slds-nubbin--top-left:before,
  &.slds-nubbin--top-left:after,
  &.slds-nubbin_bottom-left:before,
  &.slds-nubbin_bottom-left:after,
  &.slds-nubbin--bottom-left:before,
  &.slds-nubbin--bottom-left:after {
    @include rtl() {
      /*! @noflip */
      right: $spacing-large;
    }
  }
}

/**
  * @summary Positions dropdown to right side of target
  * @selector .slds-dropdown_right
  * @restrict .slds-dropdown
  * @modifier
  * @group menu position
  */
.slds-dropdown_right,
.slds-dropdown--right {
  left: auto;
  right: 0;
  transform: translateX(0);

  &.slds-nubbin_top-right:before,
  &.slds-nubbin_top-right:after,
  &.slds-nubbin--top-right:before,
  &.slds-nubbin--top-right:after,
  &.slds-nubbin_bottom-right:before,
  &.slds-nubbin_bottom-right:after,
  &.slds-nubbin--bottom-right:before,
  &.slds-nubbin--bottom-right:after {
    @include rtl() {
      /*! @noflip */
      right: auto;

      /*! @noflip */
      left: $spacing-large;

      /*! @noflip */
      margin-left: (($nubbin-size-default * 0.5) * -1);
    }
  }
}

/**
  * @summary Positions dropdown to above target
  * @selector .slds-dropdown_bottom
  * @restrict .slds-dropdown
  * @modifier
  * @group menu position
  */
.slds-dropdown_bottom,
.slds-dropdown--bottom {
  bottom: 100%;
}

/**
  * @summary Sets min-width of 6rem/96px
  * @selector .slds-dropdown_xx-small
  * @restrict .slds-dropdown
  * @modifier
  * @group width
  */
.slds-dropdown_xx-small,
.slds-dropdown--xx-small {
  min-width: $size-xx-small;
}

/**
  * @summary Sets min-width of 12rem/192px
  * @selector .slds-dropdown_x-small
  * @restrict .slds-dropdown
  * @modifier
  * @group width
  */
.slds-dropdown_x-small,
.slds-dropdown--x-small {
  min-width: $size-x-small;
}

/**
  * @summary Sets min-width of 15rem/240px
  * @selector .slds-dropdown_small
  * @restrict .slds-dropdown
  * @modifier
  * @group width
  */
.slds-dropdown_small,
.slds-dropdown--small {
  min-width: $size-small;
}

/**
  * @summary Sets min-width of 20rem/320px
  * @selector .slds-dropdown_medium
  * @restrict .slds-dropdown
  * @modifier
  * @group width
  */
.slds-dropdown_medium,
.slds-dropdown--medium {
  min-width: $size-medium;
}

/**
  * @summary Sets min-width of 25rem/400px
  * @selector .slds-dropdown_large
  * @restrict .slds-dropdown
  * @modifier
  * @group width
  */
.slds-dropdown_large,
.slds-dropdown--large {
  min-width: $size-large;
  max-width: $max-width-action-overflow-menu;
}

/**
  * @summary Sets width equal to input
  * @selector .slds-dropdown_fluid
  * @restrict .slds-dropdown
  * @modifier
  * @group width
  */
.slds-dropdown_fluid,
.slds-dropdown--fluid {
  min-width: $size-x-small; // Prevents menu from being illegible when input's width is small
  max-width: 100%;
  width: 100%;
}

/**
  * @summary Forces overflow scrolling after 5 list items
  * @selector .slds-dropdown_length-5
  * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox
  * @modifier
  * @group height
  */
.slds-dropdown_length-5,
.slds-dropdown--length-5 {
  @include dropdown-overflow-length(5);
}

/**
  * @summary Forces overflow scrolling after 7 list items
  * @selector .slds-dropdown_length-7
  * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox
  * @modifier
  * @group height
  */
.slds-dropdown_length-7,
.slds-dropdown--length-7 {
  @include dropdown-overflow-length(7);
}

/**
  * @summary Forces overflow scrolling after 10 list items
  * @selector .slds-dropdown_length-10
  * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox
  * @modifier
  * @group height
  */
.slds-dropdown_length-10,
.slds-dropdown--length-10 {
  @include dropdown-overflow-length(10);
}

/**
  * @summary Forces overflow scrolling after 5 list items with an icon
  * @selector .slds-dropdown_length-with-icon-5
  * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox
  * @modifier
  * @group height
  */
.slds-dropdown_length-with-icon-5,
.slds-dropdown--length-with-icon-5 {
  @include dropdown-overflow-length(5, $icon-size: $square-icon-small-boundary);
}

/**
  * @summary Forces overflow scrolling after 7 list items with an icon
  * @selector .slds-dropdown_length-with-icon-7
  * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox
  * @modifier
  * @group height
  */
.slds-dropdown_length-with-icon-7,
.slds-dropdown--length-with-icon-7 {
  @include dropdown-overflow-length(7, $icon-size: $square-icon-small-boundary);
}

/**
  * @summary Forces overflow scrolling after 10 list items with an icon
  * @selector .slds-dropdown_length-with-icon-10
  * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox
  * @modifier
  * @group height
  */
.slds-dropdown_length-with-icon-10,
.slds-dropdown--length-with-icon-10 {
  @include dropdown-overflow-length(10, $icon-size: $square-icon-small-boundary);
}

.slds-dropdown_center,
.slds-dropdown--center {
  @include rtl() {
    left: auto;
    right: auto;
    transform: translateX(calc(50% - (0.875rem / 2)));
  }
}