@use "../../settings";

/*
Inline

The inline module.

Weight: -98

Style guide: #{settings.$prefix}-select.inline
*/

/*
Modifiers

The inline modifiers.

Weight: -100

Markup: <span class="#{settings.$prefix}-select  #{settings.$prefix}-select--theme-normal  {{modifier_class}}">
  <select class="#{settings.$prefix}-select__field" name="{{modifier_class}}">
    <option value="">select...</option>
    <option value="option-1">Lorem ipsum dolor sit amet</option>
    <option value="option-2">あのイーハトーヴォのすきとおった風</option>
  </select>
</span>
<!-- disabled -->
<span class="#{settings.$prefix}-select  #{settings.$prefix}-select--theme-normal  {{modifier_class}}">
  <select class="#{settings.$prefix}-select__field" name="{{modifier_class}}" disabled="disabled">
    <option value="">select...</option>
    <option value="option-1">Lorem ipsum dolor sit amet</option>
    <option value="option-2">あのイーハトーヴォのすきとおった風</option>
  </select>
</span>

#{settings.$prefix}-select--inline-true - Enable inline

Style guide: #{settings.$prefix}-select.inline.builtin
*/
.#{settings.$prefix}-select--inline {
  &-true {
    --display: inline-block;
    --width: auto;
    --vertical-align: middle;
  }
}