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

/**
 * @name base
 * @selector .slds-combobox-picklist
 * @restrict div
 * @variant
 * @s1 false
 */

@include deprecate('4.0.0', 'A picklist should use the readonly version of a combobox') {

  .slds-picklist {
    position: relative;

    /**
     * Actionable element inside of a picklist item
     *
     * @selector .slds-lookup__item-action
     * @restrict .slds-picklist a, .slds-picklist button, .slds-picklist span
     */

    // Force width on picklist
    .slds-dropdown {
      width: $size-small;
    }

    li {
      /**
       * Set default state of icon for when a listbox option is selected
       *
       * @selector .slds-icon_selected
       * @restrict .slds-picklist li svg
       * @required
       */
      .slds-icon_selected,
      .slds-icon--selected {
        opacity: 0;
        transition: opacity $duration-immediately ease;
      }

      /**
       * Toggles state of icon for when a listbox option is selected
       *
       * @selector .slds-is-selected
       * @restrict .slds-picklist li
       * @modifier
       * @required
       */
      &.slds-is-selected .slds-icon_selected,
      &.slds-is-selected .slds-icon--selected {
        fill: var(--slds-g-color-brand-base-50, #{$color-text-icon-default-hover});
        opacity: 1;
      }
    }

    input[readonly] {
      padding-left: $spacing-small;
      border-color: var(--slds-g-color-border-base-4, #{$color-border-input});
      background-color: var(--slds-g-color-neutral-base-100, #{$color-background-input});
      font-size: inherit;
      font-weight: $font-weight-regular;

      &:focus,
      &.slds-has-focus {
        box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
      }

      &[disabled] {
        background-color: var(--slds-g-color-neutral-base-80, #{$color-background-input-disabled});
        border-color: var(--slds-g-color-border-base-1, #{$color-border-input-disabled});
      }
    }
  }

  /**
    * Resets explicit width on picklist to be fluid to its parent element
    *
    * @selector .slds-picklist_fluid
    * @restrict .slds-picklist
    * @modifier
    */
  .slds-picklist_fluid,
  .slds-picklist--fluid {

    .slds-picklist__input,
    .slds-picklist__label,
    .slds-dropdown,
    .slds-lookup {
      width: auto;
      min-width: 0;
      max-width: $size-small;
    }
  }

  /**
   * Read-only input element for picklist
   *
   * @selector .slds-picklist__input
   * @restrict .slds-picklist .slds-form-element__control
   * @required
   */
  .slds-picklist__input {
    width: $size-small;

    .slds-button {
      line-height: 0;
    }
  }
}

@include deprecate('4.0.0', 'Use lookup classes instead') {

  .slds-picklist__label {
    padding-right: $spacing-x-large;
    width: $size-small;
    color: var(--slds-g-color-neutral-base-10, #{$color-text-default});
    text-align: left;

    .slds-icon {
      @include square($square-icon-small-content);
      position: absolute;
      right: $spacing-medium;
      top: 50%;
      margin-top: (($square-icon-small-content * 0.5) * -1);
      fill: var(--slds-g-color-neutral-base-50, #{$color-text-icon-default});
    }

    .slds-truncate {
      display: block;
    }
  }
}