@use '../../internals/Box/styles/index' as box;
@use '../../styles/colors/colors-base' as colors;
@use '../../styles/mixins/utilities' as utils;
@use '../../styles/mixins/color-modes' as color-modes;
@use '../../styles/mixins/input' as input;
@use './variables';
@use './mixin';

.rs-radio {
  display: var(--rs-radio-display);

  @include input.check-radio-base;

  [type='radio']:focus ~ .rs-radio-inner::before {
    @include utils.focus-ring;
  }

  &[data-disabled='true'] {
    cursor: var(--rs-cursor-disabled);
  }
}

.rs-radio-checker {
  position: relative;
  display: inline-flex;

  > label {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--rs-spacing) * 2);
  }
}

.rs-radio-control {
  position: relative;
  display: inline-flex;

  [type='radio'] {
    opacity: 0;
    width: var(--rs-radio-size);
    height: var(--rs-radio-size);
  }

  &::before,
  .rs-radio-inner::before,
  .rs-radio-inner::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    display: block;
  }

  &::before,
  .rs-radio-inner::before {
    width: var(--rs-radio-size);
    height: var(--rs-radio-size);
  }

  // Ripple effect area.
  &::before {
    @include mixin.radio-inner-wrapper(var(--rs-radio-checked-bg));

    transform: scale(1);
    opacity: 0.7;
    visibility: hidden;
    transition:
      transform 0.2s linear,
      opacity 0.2s linear;

    @include color-modes.high-contrast-mode {
      transition: none;
    }

    .rs-radio[data-checked='true'] & {
      transform: scale(1.5);
      opacity: 0;
      visibility: visible;
    }
  }
}

// Out border.
.rs-radio-inner {
  &::before {
    @include mixin.radio-inner-wrapper(var(--rs-radio-border));

    transition:
      background 0.2s linear,
      border 0.2s linear,
      box-shadow 0.2s linear;

    @include color-modes.high-contrast-mode {
      transition: none;
    }

    .rs-radio:hover & {
      border-color: var(--rs-radio-checked-bg);
    }

    .rs-radio[data-disabled='true'] & {
      border-color: var(--rs-radio-disabled-bg);
      background-color: var(--rs-radio-disabled-bg);
    }

    .rs-radio[data-checked='true'] & {
      border-color: var(--rs-radio-checked-bg);
      background-color: var(--rs-radio-checked-bg);
    }

    .rs-radio[data-disabled='true'][data-checked='true'] & {
      opacity: 0.5;
    }
  }

  // Solid circle.
  &::after {
    width: var(--rs-radio-inner-size);
    height: var(--rs-radio-inner-size);
    background-color: var(--rs-radio-marker);
    margin-top: calc((var(--rs-radio-size) - var(--rs-radio-inner-size)) / 2);
    margin-inline-start: calc((var(--rs-radio-size) - var(--rs-radio-inner-size)) / 2);
    border-radius: var(--rs-radius-full);
    opacity: 0;
    transform: scale(0);
    transition:
      opacity 0.2s ease-in,
      transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);

    @include color-modes.high-contrast-mode {
      transition: none;
    }

    .rs-radio[data-checked='true'] & {
      transform: scale(1);
      opacity: 1;
    }
  }
}

// Colorful radios
@each $color in colors.$spectrum {
  .rs-radio[data-color='#{$color}'] {
    --rs-radio-checked-bg: var(--rs-#{'' + $color}-500);
    --rs-radio-border: var(--rs-#{'' + $color}-500);
  }
}