@use "../../styles/utils";
@use "../FormField/FormFieldLabel/variables" as labelVars;
@use "./variables" as locals;

@mixin outline {
  outline: var(--cmm-outline-width) solid var(--cmm-outline-color-primary);
  outline-offset: 2px;
}

@include utils.layer {
  .Block {
    @extend %sizeDefaults;

    display: flex;
    align-items: center;
    gap: 0.5em;
    position: relative;
    border-radius: var(--cmm-radius-full);
    margin: locals.$margin;

    // :focus-visible but look at the children.
    @supports selector(:has(:focus-visible)) {
      &:has(:focus-visible) {
        @include outline;
      }
    }

    // Fallback to :focus-within until Firefox supports :has().
    @supports not selector(:has(:focus-visible)) {
      &:focus-within {
        @include outline;
      }
    }

    > input[type="radio"] {
      margin: 0;
      opacity: 0;
      position: absolute;
      height: 100%;
      width: 100%;
      cursor: pointer;

      // Be careful, order matters!
      &:checked {
        & + .mark {
          background: var(--cmm-color-primary-soft-bg);

          &::before {
            scale: 1;
            background: var(--cmm-color-primary-soft-font);
          }
        }
      }

      &:hover:not(:disabled) {
        & + .mark {
          background: var(--cmm-color-primary-soft-bg-hover);
        }
      }

      &:disabled {
        cursor: not-allowed;

        ~ .mark {
          cursor: not-allowed;
          opacity: 0.6;
        }

        ~ label {
          cursor: not-allowed;
          opacity: 0.6;
        }
      }
    }
  }

  .mark {
    @include utils.size(locals.$size);

    appearance: none;
    border-radius: var(--cmm-radius-full);
    background: var(--cmm-color-primary-soft-bg);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: var(--cmm-transition-bg);

    &::before {
      content: "";
      @include utils.size(
        calc(locals.$size * (calc(1 - locals.$ringWidthRatio)))
      );
      border-radius: var(--cmm-radius-full);
      background: var(--cmm-color-primary-1);
      scale: 0;
    }
  }

  %sizeDefaults {
    #{locals.$size_name}: 1.25rem;

    > label {
      #{labelVars.$fontSize_name}: var(--cmm-font-size-sm);
    }
  }

  .--sm {
    #{locals.$size_name}: 1rem;

    > label {
      #{labelVars.$fontSize_name}: var(--cmm-font-size-sm);
    }
  }

  .--md {
    @extend %sizeDefaults;
  }

  .--lg {
    #{locals.$size_name}: 1.5rem;

    > label {
      #{labelVars.$fontSize_name}: var(--cmm-font-size-md);
    }
  }
}
