// Fluid MultiSelect (v11 port). v10 has no fluid variant.
// https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss

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

/// Fluid multi-select (Carbon React FluidMultiSelect)
/// @access private
/// @group components
@mixin fluid-multiselect {
  // Filterable only — non-filterable fields already position content via
  // fluid-list-box field padding; an extra block-start margin misaligns the tag.
  .#{$prefix}--list-box__wrapper--fluid
    .#{$prefix}--multi-select--filterable
    .#{$prefix}--tag.#{$prefix}--tag--filter {
    margin-block-start: 1.25rem;
  }

  // Filterable + selected: reset padding-inline-start so text follows the tag.
  .#{$prefix}--list-box__wrapper--fluid
    .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
    .#{$prefix}--text-input {
    padding-inline-start: 0;
  }

  .#{$prefix}--list-box__wrapper--fluid
    .#{$prefix}--multi-select--filterable
    .#{$prefix}--list-box__field
    .#{$prefix}--text-input {
    border-block-end: 1px solid transparent;
  }

  .#{$prefix}--list-box__wrapper--fluid
    .#{$prefix}--multi-select--filterable.#{$prefix}--combo-box
    .#{$prefix}--list-box__field {
    align-items: baseline;
  }

  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--multi-select--filterable__wrapper:not(
      .#{$prefix}--list-box--up
    )
    .#{$prefix}--list-box__menu {
    inset-block-start: calc(100% + to-rem(1px));
  }
}

@include exports("fluid-multiselect") {
  @include fluid-multiselect;
}