@use '../../theme/styles' as theme;

.wr-radio {
  --wr-radio-size: 1.125rem; // md (18px)
  --wr-radio-font-size: var(--wr-text-sm);
  --wr-radio-line-height: var(--wr-control-line-height-md);
  --wr-radio-bg: var(--wr-color-white);
  --wr-radio-border: var(--wr-color-light);
  --wr-radio-dot: transparent;
  --wr-radio-color: var(--wr-color-dark);

  display: inline-flex;
  vertical-align: middle;
  color: var(--wr-radio-color);
  font-family: var(--wr-font-family-base);
  font-size: var(--wr-radio-font-size);
  line-height: var(--wr-radio-line-height);

  &__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
  }

  &__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;

    &:focus-visible + .wr-radio__dot {
      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.2);
    }
  }

  &__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--wr-radio-size);
    height: var(--wr-radio-size);
    background: var(--wr-radio-bg);
    border: 1px solid var(--wr-radio-border);
    border-radius: 50%;
    transition: var(--wr-transition-base);

    &::after {
      content: '';
      width: calc(var(--wr-radio-size) - 0.625rem);
      height: calc(var(--wr-radio-size) - 0.625rem);
      border-radius: 50%;
      background: var(--wr-radio-dot);
      transform: scale(0);
      transition: transform var(--wr-transition-base);
    }
  }

  &__label:hover &__dot {
    --wr-radio-border: var(--wr-color-primary);
  }

  &__icon {
    --wr-icon-size: calc(var(--wr-radio-size) - 0.375rem);
    color: var(--wr-color-primary-contrast);
    opacity: 0;
    transform: scale(0.7);
    transition:
      transform var(--wr-transition-base),
      opacity var(--wr-transition-base);
  }

  // Sizes — dot, label font + line-height scale together.
  &--sm {
    --wr-radio-size: 1rem; // 16px
    --wr-radio-font-size: var(--wr-text-xs);
    --wr-radio-line-height: var(--wr-control-line-height-sm);
  }

  &--lg {
    --wr-radio-size: 1.25rem; // 20px
    --wr-radio-font-size: var(--wr-text-base);
    --wr-radio-line-height: var(--wr-control-line-height-lg);
  }

  &--has-icon &__dot::after {
    display: none;
  }

  &--has-icon.wr-radio--checked {
    --wr-radio-bg: var(--wr-color-primary);
  }

  &--checked {
    --wr-radio-border: var(--wr-color-primary);
    --wr-radio-dot: var(--wr-color-primary);

    .wr-radio__dot::after {
      transform: scale(1);
    }

    .wr-radio__icon {
      transform: scale(1);
      opacity: 1;
    }
  }

  &--disabled {
    --wr-radio-color: var(--wr-color-medium);
    pointer-events: none;
    opacity: 0.6;
  }
}

.wr-radio-group {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
}