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

/*
#{settings.$prefix}-toggle

The toggle unit.

Weight: -1020

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

/*
Core

The core module.

Weight: -100

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

/*
Default style

The default style.

Weight: -100

Markup: <!-- single -->
<span class="#{settings.$prefix}-toggle">
  <input class="#{settings.$prefix}-toggle__field" type="radio" name="{{or modifier_class 'toggle'}}" value="1" />
</span>
<!-- single (legacy) -->
<span class="#{settings.$prefix}-toggle">
  <input class="#{settings.$prefix}-toggle__field" type="radio" name="{{or modifier_class 'toggle'}}" value="2" />
  <span class="#{settings.$prefix}-toggle__alt"><!-- Alt element is not use. --></span>
</span>
<!-- single:disabled -->
<span class="#{settings.$prefix}-toggle">
  <input class="#{settings.$prefix}-toggle__field" type="radio" name="{{or modifier_class 'toggle'}}" value="3" checked="checked" disabled="disabled" />
</span>
<!-- with label -->
<label class="#{settings.$prefix}-text  #{settings.$prefix}-text--inline-block">
  <span class="#{settings.$prefix}-toggle">
    <input class="#{settings.$prefix}-toggle__field" type="radio" name="{{or modifier_class 'toggle'}}" value="4" />
  </span>
  Lorem ipsum dolor sit amet.
</label>

Style guide: #{settings.$prefix}-toggle.core.default
*/
.#{settings.$prefix}-toggle {
  --display: inline-block;
  --vertical-align: baseline;

  // For field
  --field-cursor: pointer;
  --field-position: relative;
  --field-z-index: 1;
  --field-inset: auto;
  --field-display: block;
  --field-overflow: visible;
  --field-box-sizing: content-box;
  --field-width: auto;
  --field-height: auto;
  --field-margin: 0;
  --field-padding: 0;
  --field-border: 0;
  --field-color: inherit;
  --field-list-style: none;
  --field-opacity: 1;
  --field-background-color: transparent;
  --field-outline: none;

  vertical-align: var(--vertical-align);

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

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

    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);

    color: var(--field-color);
    list-style: var(--field-list-style);

    opacity: var(--field-opacity);
    background-color: var(--field-background-color);
    outline: var(--field-outline);
  }

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

  &__alt {
    display: none;
  }
}