/*
* Radio component
*
*/

@use '../../../style/core/utilities.scss' as utilities;

:root {
  --radio-width--medium: 1.5rem;
  --radio-height--medium: 1.5rem;
}

.dnb-radio {
  --radio-dot--medium: 0.75rem;
  --radio-dot--large: 1.125rem;
  --radio-width--large: 2rem;
  --radio-height--large: 2rem;

  // Normal state
  --radio-border-width: 0.09375rem;
  --radio-color-dot-on: var(--token-color-background-selected);
  --radio-color-background-on: var(
    --token-color-background-selected-subtle
  );
  --radio-color-background-off: var(--token-color-background-neutral);
  --radio-color-border-on: var(--token-color-stroke-selected);
  --radio-color-border-off: var(--token-color-stroke-action-alternative);

  // Disabled state
  --radio-border-width--disabled: 0.125rem;
  --radio-color-dot-on--disabled: var(
    --token-color-background-action-disabled
  );
  --radio-color-background--disabled: var(
    --token-color-background-neutral
  );
  --radio-color-border--disabled: var(--token-color-icon-action-disabled);

  // Active state
  --radio-color-dot-on--active: var(
    --token-color-background-action-pressed
  );
  --radio-color-background--active: var(
    --token-color-background-action-pressed-subtle
  );
  --radio-color-border--active: var(--token-color-stroke-action-pressed);

  // Hover state
  --radio-border-width--hover: 0.125rem;
  --radio-border-width-on--hover: 0.125rem;
  --radio-color-dot-on--hover: var(--token-color-background-action-hover);
  --radio-color-background--hover: var(
    --token-color-background-action-hover-subtle
  );
  --radio-color-border--hover: var(--token-color-stroke-action-hover);

  // Focus state
  --radio-border-width--focus: 0.125rem;
  --radio-color-dot-on--focus: var(--token-color-background-action-focus);
  --radio-color-background--focus: var(
    --token-color-background-action-focus-subtle
  );
  --radio-color-border--focus: var(--token-color-stroke-action-focus);

  // Error state
  --radio-color-dot-on--error: var(--token-color-background-error);
  --radio-color-background--error: var(
    --token-color-background-error-subtle
  );
  --radio-color-border--error: var(--token-color-stroke-error);
  --radio-focus-ring-width--error: var(--focus-ring-width);

  // Bounding box
  --radio-bounding--medium: 1.75, 1.5;
  --radio-bounding--large: 1.25, 1.12;

  display: inline-flex;
  flex-direction: column;

  font-size: var(--font-size-small);
  line-height: var(--line-height-basis);

  &__inner {
    display: inline-flex;
    flex-direction: column;
    align-self: center;
  }

  &__shell {
    position: relative;
    user-select: none; // Safari / Touch fix

    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;

    width: var(--radio-width--medium);
    height: var(--radio-height--medium);
  }

  &__focus,
  &__button,
  &__dot {
    position: absolute;
    z-index: 4;
  }

  &__button {
    border: var(--radio-border-width) solid transparent;
  }

  &__focus {
    display: none;

    @include utilities.focusRing(
      'keyboard',
      var(--radio-color-border--focus)
    );
  }

  &__focus,
  &__button {
    width: calc(var(--radio-width--medium) - 0.25rem);
    height: calc(var(--radio-height--medium) - 0.25rem);
    border-radius: 50%;

    .dnb-radio--large & {
      width: var(--radio-width--large);
      height: var(--radio-height--large);
    }
  }

  &__dot {
    width: var(--radio-dot--medium);
    height: var(--radio-dot--medium);
    border-radius: 50%;
    background-color: var(--radio-color-dot-on);
    transition:
      opacity 200ms ease-out,
      transform 200ms ease-out;

    .dnb-radio--large & {
      width: var(--radio-dot--large);
      height: var(--radio-dot--large);
    }
  }

  &__input {
    opacity: 0;

    position: absolute;
    top: auto;
    left: auto;
    z-index: 5;

    width: var(--radio-width--medium);
    height: var(--radio-height--medium);

    margin: 0;
    padding: 0;

    border: 0;

    // Larger bounding box
    transform: scale(var(--radio-bounding--medium));
  }

  &--large &__input {
    width: var(--radio-width--large);
    height: var(--radio-height--large);

    // Larger bounding box
    transform: scale(var(--radio-bounding--large));
  }

  &__input:not([disabled]) {
    cursor: pointer;
  }

  &__order {
    display: inline-flex;
    align-items: baseline;

    .dnb-radio-group--column & {
      display: flex;
    }
  }

  &__row {
    display: inline-flex;
  }

  &__suffix {
    order: 3;

    // to be aligned to the label on the left side
    .dnb-modal__trigger {
      margin-top: -0.25rem;
      margin-bottom: -0.25rem;
    }
  }

  &-group__suffix {
    font-size: var(--font-size-basis);
  }

  &--large {
    line-height: var(--radio-height--large);
  }

  &--large &__suffix {
    line-height: var(--radio-height--large);
  }

  &--large &__shell {
    width: var(--radio-width--large);
    height: var(--radio-height--large);
  }

  .dnb-form-label {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
  }

  &--label-position-left &__order {
    .dnb-radio__inner {
      order: 2;
    }

    .dnb-form-label {
      order: 1;
      padding-right: 0.5rem;
    }
  }

  &--label-position-right &__order {
    .dnb-radio__inner {
      order: 1;
    }

    .dnb-form-label {
      order: 2;
      padding-left: 0.5rem;
    }
  }

  // in case we don't define a wrapping group
  // and have a custom label component before the radio (and not inside)
  :not(#{&}-group) > .dnb-form-label + & {
    vertical-align: top;
  }

  // status
  .dnb-form-status {
    order: 4;
    margin-top: 0.375rem; /* 6/16 */
    margin-bottom: 0;
  }

  & + .dnb-form-status {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }

  // adjust the form-status to the inner border for 3px
  > .dnb-form-status {
    transform: translateY(0.25rem); /* 4/16 */
  }

  &-group {
    --radio-group-row-gap: 0.5rem;
    --radio-group-column-gap: 1rem;

    display: inline-flex;

    &,
    &__fieldset,
    &__shell {
      flex-grow: 1;
    }

    fieldset {
      @include utilities.fieldsetReset();
    }

    &--column .dnb-radio {
      display: flex;
      margin-right: 0;
    }

    .dnb-radio:last-of-type {
      margin-right: 0;
    }

    &__shell {
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--radio-group-column-gap);
      row-gap: var(--radio-group-row-gap);

      & > .dnb-form-status {
        margin-top: 0;
        margin-bottom: 0;
      }
    }

    &--column &__shell {
      flex-direction: column;
    }
  }

  /*
   * Color scheme
   */

  // stylelint-disable no-descending-specificity
  // We prioritize categorization and readability over specificity here */

  /** Normal state **/

  // On
  &__input:checked ~ &__button,
  &__input[data-checked='true'] ~ &__button {
    background-color: var(--radio-color-background-on);
    border-color: var(--radio-color-border-on);
  }
  &__input:checked ~ &__dot,
  &__input[data-checked='true'] ~ &__dot {
    opacity: 1;
    transform: scale(1);
  }

  // Off
  &__input:not(:checked):not([data-checked='true']) ~ &__dot {
    opacity: 0;
    transform: scale(0.8);
  }
  &__input:not(:checked):not([data-checked='true']) ~ &__button {
    background-color: var(--radio-color-background-off);
    border-color: var(--radio-color-border-off);
  }

  /** Disabled state **/

  // General
  &__input[disabled] ~ &__button {
    border-width: var(--radio-border-width--disabled);
  }
  &__input[disabled] ~ &__button:not(.dnb-skeleton) {
    border-color: var(--radio-color-border--disabled);
    background-color: var(--radio-color-background--disabled);
  }

  // On
  &__input[disabled]:checked ~ &__dot,
  &__input[disabled][data-checked='true'] ~ &__dot {
    background-color: var(--radio-color-dot-on--disabled);
  }

  // Skeleton
  &__input[disabled] ~ &__button.dnb-skeleton {
    &::before {
      border-radius: 0;
    }
    border-color: var(--skeleton-color);
  }

  /** Active state **/

  // General
  &__input:not([disabled]):active ~ &__button {
    background-color: var(--radio-color-background--active);
    border-color: var(--radio-color-border--active);
  }

  // On
  &__input:not([disabled]):checked:active ~ &__dot,
  &__input:not([disabled])[data-checked='true']:active ~ &__dot {
    background-color: var(--radio-color-dot-on--active);
  }

  /** Hover state **/

  // General
  &__input:not([disabled]):not(:focus):hover ~ &__button {
    background-color: var(--radio-color-background--hover);
    border-color: var(--radio-color-border--hover);
  }

  // On
  &__input:not([disabled]):not(:focus):checked:hover ~ &__dot,
  &__input:not([disabled]):not(:focus)[data-checked='true']:hover
    ~ &__dot {
    background-color: var(--radio-color-dot-on--hover);
  }
  &__input:not([disabled]):not(:focus):checked:hover ~ &__button,
  &__input:not([disabled]):not(:focus)[data-checked='true']:hover
    ~ &__button {
    border-width: var(--radio-border-width-on--hover);
  }

  // Off
  &__input:not([disabled]):not(:focus):not(:checked):not(
      [data-checked='true']
    ):hover
    ~ &__button {
    border-width: var(--radio-border-width--hover);
  }

  /** Focus state **/

  // General
  &__input:not([disabled]):focus ~ &__button {
    html[data-whatinput='keyboard'] & {
      border-width: var(--radio-border-width--focus);
      border: none;
    }
  }
  &__input:not([disabled]):focus ~ &__focus,
  &__input:not([disabled]):active ~ &__focus {
    display: block;
  }

  &__input:not([disabled]):not(:active):not(:hover):focus ~ &__button {
    html[data-whatinput='keyboard'] & {
      background-color: var(--radio-color-background--focus);
    }
  }

  // On
  &__input:not([disabled]):not(:active):not(:hover):checked:focus ~ &__dot,
  &__input:not([disabled]):not(:active):not(
      :hover
    )[data-checked='true']:focus
    ~ &__dot {
    html[data-whatinput='keyboard'] & {
      background-color: var(--radio-color-dot-on--focus);
    }
  }

  /** Error state **/

  // General
  &__status--error
    &__input:not([disabled]):not(:focus):not(:active)
    ~ &__button {
    border: none;
  }
  &__status--error
    &__input:not([disabled]):not(:focus):not(:active)
    ~ &__focus {
    display: block;
    @include utilities.fakeBorder(
      var(--radio-color-border--error),
      var(--radio-focus-ring-width--error)
    );
  }
  &__status--error
    &__input:not([disabled]):not(:focus):not(:active):hover
    ~ &__focus {
    @include utilities.fakeBorder(
      var(--radio-color-border--hover),
      var(--radio-focus-ring-width--error)
    );
  }

  &__status--error
    &__input:not([disabled]):not(:focus):not(:active):not(:hover)
    ~ &__button {
    background-color: var(--radio-color-background--error);
  }

  // On
  &__status--error
    &__input:not([disabled]):not(:focus):not(:active):not(:hover):checked
    ~ &__dot,
  &__status--error
    &__input:not([disabled]):not(:focus):not(:active):not(
      :hover
    )[data-checked='true']
    ~ &__dot {
    background-color: var(--radio-color-dot-on--error);
  }

  // stylelint-enable no-descending-specificity
}