@use 'sass:math';
@use '../settings/variables' as v;
@use '../settings/mixins' as m;

/* stylelint-disable selector-max-specificity, max-nesting-depth, selector-max-compound-selectors, value-list-comma-newline-after */
.qpp-c-radio,
.qppds .qpp-c-radio,
.qpp-prose .qpp-c-radio {
  background: v.$white;

  &__label {
    font-size: v.$font-size-16;
    line-height: v.$line-height-lg;
    &::before,
    &::after {
      width: v.$spacing-20;
      height: v.$spacing-20;
    }
  }

  &--small {
    .qpp-c-radio__label {
      font-size: v.$font-size-14;
      line-height: v.$line-height-md;
      &::before,
      &::after {
        width: v.$spacing-16;
        height: v.$spacing-16;
      }
    }
  }

  &__input {
    // The actual input element is only visible to screen readers, because
    // all visual styling is done via the label.
    @include m.visually-hidden;
    background-color: v.$white;

    &:focus {
      outline: none;

      + [class*='__label']::before {
        @include m.focus-ring;
        border: 0;
        border-radius: 99rem;
        box-shadow: 0 0 0 2px v.$blue-70, 0 0 0 4px v.$blue-10;
        background-color: v.$white;
      }

      &:checked {
        + [class*='__label']::before {
          box-shadow: 0 0 0 2px v.$blue-70, inset 0 0 0 3px v.$white,
            0 0 0 5px v.$blue-10;
        }
      }
    }

    &:disabled,
    &[aria-disabled='true'] {
      + [class*='__label'] {
        cursor: not-allowed;
        color: rgba(27, 27, 27, 0.3);
        &::before {
          box-shadow: 0 0 0 2px v.$gray-20, inset 0 0 0 3px v.$white;
        }
      }
    }

    &:hover:not(:disabled) {
      + [class*='__label']::before {
        box-shadow: 0 0 0 2px v.$blue-80, inset 0 0 0 3px v.$white;
      }

      &:checked {
        + [class*='__label']::before {
          box-shadow: 0 0 0 2px v.$blue-80, inset 0 0 0 3px v.$white;
          background-color: v.$blue-80;
        }

        &:focus {
          + [class*='__label']::before {
            box-shadow: 0 0 0 2px v.$blue-80, inset 0 0 0 3px v.$white,
              0 0 0 5px v.$blue-10;
          }
        }
      }

      &:not(:checked) {
        + [class*='__label']::before {
          box-shadow: 0 0 0 2px v.$gray-80;
          background-color: v.$gray-04;
        }
      }
    }

    &:active:not(:disabled, :checked) {
      + [class*='__label'] {
        &::after {
          box-shadow: 0 0 0 0.5rem v.$blue-10;
          transition: box-shadow 0.08s ease;
        }
      }
    }

    // Radios with tap-friendly targets
    &--tile {
      // TODO: designs and styles for "tile" mode to support friendler
      // mobile tap targets for checkboxes and radios (USWDS feature).
      + [class*='__label'] {
        background-color: v.$white;
        border: 2px solid rgba(27, 27, 27, 0.3);
        color: #1b1b1b;
        border-radius: 0.25rem;
        margin-top: v.$spacing-8;
        padding: v.$spacing-12 v.$spacing-16 v.$spacing-12 v.$spacing-40;

        &::before {
          left: v.$spacing-8;
        }
      }
    }

    &:checked + [class*='__label']::before {
      background-color: v.$blue-60;
      box-shadow: 0 0 0 2px v.$blue-60, inset 0 0 0 3px v.$white;
      @media print {
        box-shadow: 0 0 0 2px v.$blue-60, inset 0 0 0 3px v.$white;
      }
    }

    &:checked:disabled + [class*='__label']::before,
    &:checked[aria-disabled='true'] + [class*='__label']::before {
      background-color: v.$gray-20;
      box-shadow: 0 0 0 2px v.$gray-20, inset 0 0 0 3px v.$white;
    }
  }

  &__label,
  .qppds .qpp-c-radio__label,
  .qpp-prose .qpp-c-radio_label {
    cursor: pointer;
    display: inherit;
    font-weight: v.$font-regular;
    margin-top: v.$spacing-12;
    padding-left: v.$spacing-32;
    position: relative;

    &::before {
      content: ' ';
      background: v.$white;
      display: block;
      // top: 0;
      left: 0;
      margin-left: 0;
      margin-top: 0;
      position: absolute;
      z-index: 1;
      border-radius: 99rem;
      box-shadow: 0 0 0 2px v.$gray-80;
    }

    &::after {
      content: ' ';
      background: none;
      border-radius: 1rem;
      box-sizing: border-box;
      display: block;
      top: 0;
      left: 0;
      margin-left: 0;
      margin-top: 0;
      position: absolute;
      z-index: 0;
      box-shadow: 0 0 0 0 transparent;
      transition: box-shadow 0.5s ease 0.04s;
    }
  }

  &__label-description {
    display: block;
    //font-size: v.$font-size-base;
    margin-top: v.$spacing-16;
  }
}
/* stylelint-enable selector-max-specificity, max-nesting-depth, selector-max-compound-selectors, value-list-comma-newline-after */