_dropdown.scss

@import "carbon-components/scss/globals/scss/vars";
@import "carbon-components/scss/globals/scss/helper-mixins";
@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";

/// `.bx--list-box__field`'s base end padding reserves room for one
/// absolutely-positioned icon (the menu chevron). `Dropdown`'s clearable
/// selection button is a second icon of the same size, 45px in, to the
/// chevron's left. The field stops the label short of it, as v11 stops a
/// ComboBox's text. Without this, a long selected label's ellipsis cutoff
/// sits under the clear button instead of stopping short of it.
/// @access private
/// @group components
@mixin dropdown-clearable {
  .#{$prefix}--list-box__field--clearable {
    padding-inline-end: to-rem(70px);
  }

  // The invalid and warn icons render before the field, so the list box
  // carries the marker. Like ComboBox, the icon moves left of the clear
  // button and the field reserves room for both.
  .#{$prefix}--dropdown--clearable .#{$prefix}--list-box__invalid-icon {
    @include ccs-inset-inline($end: to-rem(82px));
  }

  .#{$prefix}--dropdown--clearable[data-invalid]
    .#{$prefix}--list-box__field--clearable,
  .#{$prefix}--dropdown--clearable.#{$prefix}--list-box--warning
    .#{$prefix}--list-box__field--clearable {
    padding-inline-end: to-rem(105px);
  }

  // An inline field sets its padding and icon offset at higher specificity,
  // so restate the clearable room for it; otherwise the value and the
  // status icon run under the clear button. Its clear button sits 4px
  // closer to the edge, with the chevron, so everything shifts 4px.
  .#{$prefix}--list-box.#{$prefix}--list-box--inline
    .#{$prefix}--list-box__field.#{$prefix}--list-box__field--clearable {
    padding-inline-end: to-rem(66px);
  }

  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--dropdown--clearable
    .#{$prefix}--list-box__invalid-icon {
    @include ccs-inset-inline($end: to-rem(78px));
  }

  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--dropdown--clearable[data-invalid]
    .#{$prefix}--list-box__field--clearable,
  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--dropdown--clearable.#{$prefix}--list-box--warning
    .#{$prefix}--list-box__field--clearable {
    padding-inline-end: to-rem(101px);
  }
}

@include exports("dropdown-clearable") {
  @include dropdown-clearable;
}

/// Carbon sizes the inline dropdown's menu through
/// `.bx--dropdown--inline .bx--list-box__menu`, a descendant selector a
/// portaled menu can no longer match. Left to the base rule, a portaled
/// inline menu shrinks to the width of its trigger, which for a short
/// selected label is too narrow to read the options. `Dropdown` puts this
/// class on the portal host so the menu keeps Carbon's inline width bounds.
///
/// `bx--dropdown--inline` itself can't be reused on the host: it also sets
/// `display`, `width`, and a hover background meant for the field.
/// @access private
/// @group components
@mixin dropdown-inline-portal {
  .#{$prefix}--dropdown__menu-host--inline .#{$prefix}--list-box__menu {
    min-width: to-rem(288px);
    max-width: to-rem(480px);
  }
}

@include exports("dropdown-inline-portal") {
  @include dropdown-inline-portal;
}