:host,
.ld-radio {
  /* layout */
  --ld-radio-size: 1.25rem;
  --ld-radio-dot-size: 0.625rem;

  /* colors */
  --ld-radio-bg-col: var(--ld-col-wht);
  --ld-radio-bg-col-hover: var(--ld-col-neutral-010);
  --ld-radio-bg-col-active: var(--ld-col-neutral-050);
  --ld-radio-disabled-col: var(--ld-col-neutral-300);
  --ld-radio-disabled-bg-col: var(--ld-col-neutral-100);
  --ld-radio-dark-bg-col: var(--ld-col-neutral-050);
  --ld-radio-dark-bg-col-hover: var(--ld-col-neutral-100);
  --ld-radio-dark-bg-col-active: var(--ld-col-neutral-300);
  --ld-radio-checked-col: var(--ld-col-wht);
  --ld-radio-checked-col-active: var(--ld-col-wht);
  --ld-radio-invalid-checked-col: var(--ld-col-wht);
  --ld-radio-invalid-checked-col-active: var(--ld-col-wht);

  /* themable colors */
  --ld-radio-col: var(--ld-thm-primary);
  --ld-radio-col-hover: var(--ld-thm-primary-hover);
  --ld-radio-col-active: var(--ld-thm-primary-active);
  --ld-radio-col-focus: var(--ld-thm-primary-focus);
  --ld-radio-invalid-col: var(--ld-thm-error);
  --ld-radio-invalid-col-hover: var(--ld-thm-error-hover);
  --ld-radio-invalid-col-focus: var(--ld-thm-error-focus);
  --ld-radio-invalid-col-active: var(--ld-thm-error-active);
  --ld-radio-warn-col: var(--ld-thm-warning);
  --ld-radio-warn-col-hover: var(--ld-thm-warning-hover);
  --ld-radio-warn-col-focus: var(--ld-thm-warning-focus);
  --ld-radio-warn-col-active: var(--ld-thm-warning-active);
  --ld-radio-warn-checked-col: var(--ld-thm-warning-active);
  --ld-radio-warn-checked-col-active: var(--ld-thm-warning-hover);

  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: var(--ld-radio-size);
  height: var(--ld-radio-size);
  min-width: auto !important;
  box-sizing: border-box;

  input {
    appearance: none;
    background-color: transparent; /* Required for Mobile Sarari */
    height: 100%;
    inset: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    z-index: 1;

    &:checked {
      ~ .ld-radio__dot {
        visibility: inherit;
      }
    }

    &:where(:disabled),
    &:where(
        [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
      ) {
      ~ .ld-radio__dot {
        background-color: var(--ld-radio-disabled-col);
      }
      ~ .ld-radio__box {
        background-color: transparent;
        box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-disabled-bg-col);
      }

      &:checked {
        ~ .ld-radio__box {
          background-color: var(--ld-radio-disabled-bg-col);
        }
      }
    }

    &:where(
        :not(
            :disabled,
            [aria-disabled]:where(
                :not([aria-disabled=''], [aria-disabled='false'])
              )
          )
      ) {
      cursor: pointer;

      ~ .ld-radio__dot {
        background-color: var(--ld-radio-col-active);
      }
      ~ .ld-radio__box {
        box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col);
      }

      &:focus:focus-visible {
        ~ .ld-radio__box {
          background-color: transparent;
          box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col-focus);
        }
      }
      &:active,
      &:active:focus-visible {
        ~ .ld-radio__box {
          background-color: var(--ld-radio-bg-col-active);
          box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col-active);
        }
      }

      &:checked {
        ~ .ld-radio__dot {
          background-color: var(--ld-radio-checked-col);
        }
        ~ .ld-radio__box {
          background-color: var(--ld-radio-col);
          box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col);
        }

        &:focus:focus-visible {
          ~ .ld-radio__dot {
            background-color: var(--ld-radio-col-active);
          }
          ~ .ld-radio__box {
            background-color: var(--ld-radio-col-focus);
            box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col-focus);
          }
        }
        &:active,
        &:active:focus-visible {
          ~ .ld-radio__dot {
            background-color: var(--ld-radio-checked-col-active);
          }
          ~ .ld-radio__box {
            background-color: var(--ld-radio-col-active);
            box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col-active);
          }
        }
      }
    }
  }

  :where(
      input:not(
          :disabled,
          input[aria-disabled]:where(
              :not([aria-disabled=''], [aria-disabled='false'])
            )
        )
    ) {
    ~ .ld-radio__box {
      background-color: var(--ld-radio-bg-col);
    }

    @media (hover: hover) {
      &:hover {
        ~ .ld-radio__box {
          background-color: var(--ld-radio-bg-col-hover);
          box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col-hover);
        }

        &:checked {
          ~ .ld-radio__dot {
            color: var(--ld-radio-checked-col);
          }
          ~ .ld-radio__box {
            background-color: var(--ld-radio-col-hover);
            box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col-hover);
          }
        }
      }
    }
  }
}

.ld-radio.ld-radio--dark,
:host(.ld-radio.ld-radio--dark) {
  :where(input) {
    &:not(
        :disabled,
        input[aria-disabled]:where(
            :not([aria-disabled=''], [aria-disabled='false'])
          ),
        :checked
      ) {
      ~ .ld-radio__box {
        background-color: var(--ld-radio-dark-bg-col);
      }

      @media (hover: hover) {
        &:hover {
          ~ .ld-radio__box {
            background-color: var(--ld-radio-dark-bg-col-hover);
          }
        }
      }

      &:active,
      &:active:focus-visible {
        ~ .ld-radio__box {
          background-color: var(--ld-radio-dark-bg-col-active);
        }
      }
    }
  }
}

.ld-radio__dot {
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  width: var(--ld-radio-dot-size);
  height: var(--ld-radio-dot-size);
}

.ld-radio__box {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-col-rblck4);
}

:host,
.ld-radio,
.ld-radio__dot,
.ld-radio__box {
  border-radius: var(--ld-br-full);
}

:host(.ld-radio--highlight),
.ld-radio--highlight {
  --ld-radio-col: var(--ld-radio-warn-col);
  --ld-radio-col-hover: var(--ld-radio-warn-col-hover);
  --ld-radio-col-active: var(--ld-radio-warn-col-focus);
  --ld-radio-col-focus: var(--ld-radio-warn-col-active);
  --ld-radio-checked-col: var(--ld-radio-warn-checked-col);
  --ld-radio-checked-col-active: var(--ld-radio-warn-checked-col-active);
}

:host(.ld-radio--invalid),
:host(.ld-radio--danger),
.ld-radio--invalid,
.ld-radio--danger {
  --ld-radio-col: var(--ld-radio-invalid-col);
  --ld-radio-col-hover: var(--ld-radio-invalid-col-hover);
  --ld-radio-col-active: var(--ld-radio-invalid-col-focus);
  --ld-radio-col-focus: var(--ld-radio-invalid-col-active);
  --ld-radio-checked-col: var(--ld-radio-invalid-checked-col);
  --ld-radio-checked-col-active: var(--ld-radio-invalid-checked-col-active);
}
