@use '@digdir/ds-tokens/build/tokens.scss' as tokens;
@use './typography.scss' as typography;
@use './baseline/utils.scss' as utils;
@use './baseline/baseline.scss' as baseline;

$classname: '#{utils.$prefix}-radio';
// Color variables
$color-unchecked: tokens.$color-neutral-grey-600;
$color-checked: tokens.$color-interface-interaction;
$color-disabled: tokens.$color-neutral-grey-500;
// Size variables
$size-medium: utils.pxToRem(24px);
$size-large: utils.pxToRem(32px);
$size-checkmark-medium: utils.pxToRem(12px);
$size-checkmark-large: utils.pxToRem(18px);
$padding-label-medium: tokens.$spacing-base-2;
$padding-label-large: tokens.$spacing-base-3;

.#{$classname} {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;

  & input.#{$classname}__input {
    cursor: pointer;
    // Hide browser-default radio appearance
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;

    // Focus outline
    &:focus {
      outline: none;
    }
    &:focus-visible ~ .#{$classname}__label {
      @include baseline.focus-outline();
    }
    // Compatibility for browsers not supporting :focus-visible (Safari, IE)
    &:focus ~ .#{$classname}__label {
      @include baseline.focus-outline();
    }
    &:focus:not(:focus-visible) ~ .#{$classname}__label {
      outline: none;
    }
  }

  &__label {
    display: flex;
    align-items: center;
    position: relative;

    padding-left: $size-medium;
    min-height: $size-medium;

    cursor: pointer;
    @include typography.text-body-300();
    color: tokens.$color-text-background-light;

    &--right {
      padding-left: calc($size-medium + $padding-label-medium);
    }

    // Radio button container
    &::before {
      content: '';
      display: inline-block;
      box-sizing: border-box;
      position: absolute;
      left: 0;

      // Medium size
      width: $size-medium;
      height: $size-medium;

      // Custom radio appearance
      border-radius: 50%;
      background-color: tokens.$color-neutral-white;

      border: tokens.$border-width-default solid $color-unchecked;

      transition: border-color tokens.$duration-fast;
    }

    // Radio button checkmark
    &::after {
      content: '';
      display: inline-block;
      box-sizing: border-box;
      position: absolute;
      left: calc(($size-medium - $size-checkmark-medium) / 2);

      // Medium size
      width: $size-checkmark-medium;
      height: $size-checkmark-medium;

      border-radius: 50%;
      background-color: tokens.$color-neutral-white;

      transition: background-color tokens.$duration-fast;
    }
  }

  // Hover and checked states
  &:not([class*='#{$classname}--disabled']) > input.#{$classname}__input {
    &:hover:not(:checked) ~ .#{$classname}__label {
      &::before {
        border-color: $color-checked;
      }
      &::after {
        background-color: tokens.$color-interface-interaction-light;
      }
    }
    &:checked ~ .#{$classname}__label {
      &::before {
        border-color: $color-checked;
      }
      &::after {
        background-color: $color-checked;
      }
    }
  }

  &--disabled {
    &:active {
      pointer-events: none;
    }

    & > .#{$classname}__label {
      cursor: not-allowed;
      color: $color-disabled;
      &::before {
        border-color: $color-disabled;
      }
    }
    & > input.#{$classname}__input:checked ~ .#{$classname}__label::after {
      background-color: $color-disabled;
    }
  }

  // Size modifiers
  &--large {
    & > .#{$classname}__label {
      min-height: $size-large;
      padding-left: calc($size-large + $padding-label-large);
      @include typography.text-body-400();

      &::before {
        width: $size-large;
        height: $size-large;
      }

      &::after {
        left: calc(($size-large - $size-checkmark-large) / 2);
        width: $size-checkmark-large;
        height: $size-checkmark-large;
      }
    }
  }
}