@use "../../lib/mixin";
@use "../../settings";

/*
#{settings.$prefix}-select

The select unit.

Weight: -1010

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

/*
Core

The core module.

Weight: -100

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

/*
Default style

The default style.

Weight: -100

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

Style guide: #{settings.$prefix}-select.core.default
*/
.#{settings.$prefix}-select {
  $pkg: settings.$pkg;

  --overflow: hidden;
  --box-sizing: border-box;

  // For field
  --field-cursor: pointer;
  --field-position: relative;
  --field-z-index: 1;
  --field-display: block;
  --field-overflow: visible;
  --field-box-sizing: border-box;
  --field-width: 100%;
  --field-height: 100%;
  --field-margin: 0;
  --field-padding: 0;
  --field-border: 0;
  --field-border-radius: 0;
  --field-font-size: var(--#{$pkg}-font-size);
  --field-font-weight: var(--#{$pkg}-font-weight);
  --field-font-style: normal;
  --field-line-height: normal;
  --field-color: inherit;
  --field-text-align: left;
  --field-text-decoration: none;
  --field-text-indent: 0;
  --field-text-overflow: ellipsis;
  --field-letter-spacing: var(--#{$pkg}-letter-spacing);
  --field-white-space: normal;
  --field-vertical-align: baseline;
  --field-list-style: none;
  --field-appearance: none;
  --field-background-color: transparent;
  --field-outline: 0;
  --field-transition: none;
  --field-options-padding: 0;

  &__field {
    cursor: var(--field-cursor);

    position: var(--field-position);
    z-index: var(--field-z-index);

    overflow: var(--field-overflow);
    display: var(--field-display);

    box-sizing: var(--field-box-sizing);
    width: var(--field-width);
    height: var(--field-height);
    margin: var(--field-margin);
    padding: var(--field-padding);
    border: var(--field-border);
    border-radius: var(--field-border-radius);

    font-size: var(--field-font-size);
    font-weight: var(--field-font-weight);
    font-style: var(--field-font-style);
    line-height: var(--field-line-height);
    color: var(--field-color);
    text-align: var(--field-text-align);
    text-decoration: var(--field-text-decoration);
    text-indent: var(--field-text-indent);
    text-overflow: var(--field-text-overflow);
    letter-spacing: var(--field-letter-spacing);
    white-space: var(--field-white-space);
    vertical-align: var(--field-vertical-align);
    list-style: var(--field-list-style);

    appearance: var(--field-appearance);
    background-color: var(--field-background-color);
    outline: var(--field-outline);

    transition: var(--field-transition);

    // For ie10+
    &::-ms-expand {
      visibility: hidden;
    }

    > option {
      padding: var(--field-options-padding);
    }
  }

  @include mixin.has-disabled() {
    --opacity: 0.5;
    --field-cursor: default;
  }
}