// 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

// Anything [class*='slds-picklist'] is deprecated and should not be used
@import 'deprecate';

/**
 * A dueling picklist inherits styles from the listbox component
 * @summary Initializes a dual listbox
 *
 * @name base
 * @selector .slds-dueling-list
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-dueling-list {
  display: flex;
  clear: left;
}

/**
 * @summary Handles the layout of the dual listbox
 *
 * @selector .slds-dueling-list__column
 * @restrict .slds-dueling-list div
 */
.slds-dueling-list__column {
  display: inline-flex;
  flex-direction: column;

  .slds-button {
    margin: $spacing-xx-small;

    &:first-of-type {
      margin-top: $spacing-large;
    }
  }
}

/**
 * @summary Changes the layout of the dueling picklist to be responsive
 *
 * @selector .slds-dueling-list__column_responsive
 * @restrict .slds-dueling-list__column
 */
.slds-dueling-list__column_responsive {
  flex: 1 1 $size-small;
  flex-wrap: wrap;
  overflow: hidden;
  min-width: $size-xx-small;

  .slds-dueling-list__options {
    width: auto;
    max-width: 100%;
  }
}

/**
 * @summary Bounding visual container for listbox of options
 *
 * @selector .slds-dueling-list__options
 * @restrict .slds-dueling-list div
 */
.slds-dueling-list__options,
.slds-picklist__options {
  border: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border-input});
  border-radius: $border-radius-medium;
  padding: $spacing-xx-small 0;
  width: $size-small;
  height: $size-small;
  background-color: var(--slds-g-color-neutral-base-100, #{$color-background-input-active});
  overflow: auto;

  /**
   * @summary Selected/dragging state of a listbox option
   * @selector .slds-is-selected
   * @restrict .slds-dueling-list__options div
   */
  [aria-selected="true"] {
    background-color: $brand-accessible;
    color: var(--slds-g-color-neutral-base-100, #{$color-text-button-brand});

    &:hover,
    &:focus {
      background: $brand-accessible-active;
      color: var(--slds-g-color-neutral-base-100, #{$color-text-button-brand-hover});
    }
  }

  /**
   * @summary grabbed state of a listbox option
   * @selector .slds-is-grabbed
   * @restrict .slds-dueling-list__options div
   */
  .slds-is-grabbed {
    transform: rotate(3deg);
  }

  /**
   * @summary Disabled state of a picklist option
   * @selector .slds-is-disabled
   * @restrict .slds-dueling-list__options
   */
  &.slds-is-disabled {
    background-color: var(--slds-g-color-neutral-base-95, #{$color-background-input-disabled});
    border-color: var(--slds-g-color-border-base-1, #{$color-border-input-disabled});
    color: var(--slds-g-color-neutral-base-50, #{$color-text-input-disabled});

    &:hover {
      cursor: not-allowed;
    }

    .slds-listbox__option {

      &:hover {
        cursor: not-allowed;
        background-color: transparent;
      }

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