@use "sass:map";
@use "sass:color";
@use "./../../variables" as *;
@use "./../../mixins/breakpoints" as *;

.form__control.radio {
  & > * {
    &:not(:last-child) {
      margin-right: var(--spacer);

      @include media-breakpoint-up("desktop") {
        margin-right: calc(var(--spacer) * 0.5);
      }
    }
  }

  & input[type="radio"] {
    --input-width: auto;
    --input-desktop-width: auto;

    border-radius: var(--input-round-border-radius);
    aspect-ratio: 1;
    flex-shrink: 0;
    vertical-align: text-bottom;

    &::before {
      content: "";
      position: absolute;
      margin: auto;
      inset: 0;
      overflow: hidden;
      border-radius: var(--input-round-border-radius);
      background: var(--white);
      width: 50%;
      aspect-ratio: 1;
    }

    &:checked {
      background: var(--input-detail-background);

      &:disabled,
      &.disabled,
      &[aria-disabled="true"] {
        background: var(--input-disabled-detail-background);
      }
    }

    @each $key, $value in $theme-colors {
      &.input--#{$key} {
        &:checked {
          --input-detail-background: var(--#{$key});
          --input-disabled-detail-background: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
        }
      }
    }
  }
}