@use "sass:map";
@use "sass:meta";
@use "../../lib/mixin";
@use "../../settings";

/*
Radio

The radio module.

Weight: -99

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

@if meta.type-of(settings.$builtin-themes) == "map" {
  /*
Modifiers

The radio modifiers.

Weight: -100

Markup: <!-- single -->
<span class="#{settings.$prefix}-toggle  {{modifier_class}}">
  <input class="#{settings.$prefix}-toggle__field" type="radio" name="{{or modifier_class 'toggle'}}" value="1" />
</span>
<!-- single (legacy) -->
<span class="#{settings.$prefix}-toggle  {{modifier_class}}">
  <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  {{modifier_class}}">
  <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  {{modifier_class}}">
    <input class="#{settings.$prefix}-toggle__field" type="radio" name="{{or modifier_class 'toggle'}}" value="4" />
  </span>
  Lorem ipsum dolor sit amet.
</label>

#{settings.$prefix}-toggle--radio-normal - Normal radio

Style guide: #{settings.$prefix}-toggle.radio.builtin
*/
  .#{settings.$prefix}-toggle--radio {
    $pkg: settings.$pkg;

    &-normal {
      $default-theme: map.get(settings.$builtin-themes, "light");

      // Load colors
      --color-up: rgb(var(--#{$pkg}-color-#{map.get($default-theme, "color")}));
      --color-focus: rgb(
        var(--#{$pkg}-color-#{map.get($default-theme, "color-focus")})
      );

      // Default settings
      --width: 20px;
      --height: 20px;
      --border-color: var(--color-up);
      --border: 1px solid var(--border-color);
      --border-radius: 20px;
      --vertical-align: middle;
      --transition: border-color 0.2s ease-out;

      // For field
      --field-position: absolute;
      --field-z-index: 1;
      --field-inset: 0;
      --field-width: 100%;
      --field-height: 100%;
      --field-opacity: 0;

      // For pseudo
      --pseudo-transform: scale(0);
      --pseudo-background-color: var(--color-up);
      --pseudo-transition:
        transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        background-color 0.2s ease-out;

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

      &::before {
        content: "";

        position: absolute;
        inset: 0;
        transform-origin: 50% 50%;
        transform: var(--pseudo-transform);

        width: 12px;
        height: 12px;
        margin: auto;
        border-radius: 12px;

        background-color: var(--pseudo-background-color);

        transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
        transition-duration: 0.2s;
        transition-property: transform, background-color;
      }

      @include mixin.has-selected() {
        --pseudo-transform: scale(1);
      }

      @include mixin.has-focus() {
        --border-color: var(--color-focus);
        --pseudo-background-color: var(--color-focus);
      }

      @include mixin.has-disabled() {
        --opacity: 0.5;
        --border-color: var(--color-up);
        --pseudo-background-color: var(--color-up);
        --field-opacity: 0;
      }

      // Settings by color schemes
      @each $name, $theme in settings.$builtin-themes {
        @media (prefers-color-scheme: #{$name}) {
          $color-up: map.get($theme, "color");
          $color-focus: map.get($theme, "color-focus");

          // Apply colors to settings
          --color-up: rgb(var(--#{$pkg}-color-#{$color-up}));
          --color-focus: rgb(var(--#{$pkg}-color-#{$color-focus}));
        }
      }
    }
  }
}