@layer components {
  :root {
    --settings-radio__border-color: var(--color-neutral-500);
    --settings-radio__border-color--checked: var(--color-primary-theme-primary);
    --settings-radio__bg-color: var(--color-surface-primary);

    --settings-radio__text-color: var(--color-neutral-700);
    --settings-radio__font-family: var(--typography-label-large__font-family);
    --settings-radio__font-size: var(--typography-label-large__font-size);
    --settings-radio__line-height: var(--typography-label-large__line-height);
    --settings-radio__letter-spacing: var(
      --typography-label-large__letter-spacing
    );
    --settings-radio__font-weight: var(--typography-label-large__font-weight);

    --settings-radio__label-border-color: var(--color-neutral-100);
  }
  :root.dark {
    --settings-radio__text-color: var(--color-neutral-100);
    --settings-radio__label-border-color: var(--color-neutral-400);
  }

  .settings-radio__container {
    @apply grid grid-cols-[auto,1.25rem] gap-y-4;
    @apply px-2 py-4;
    @apply w-full;
    @apply cursor-pointer;

    color: var(--settings-item__text-color);
    background-color: var(--settings-radio__bg-color);

    border-color: var(--settings-radio__label-border-color);
    border-bottom-width: 1px;
    border-style: solid;

    font-family: var(--settings-radio__font-family);
    font-size: var(--settings-radio__font-size);
    line-height: var(--settings-radio__line-height);
    letter-spacing: var(--settings-radio__letter-spacing);
    font-weight: var(--settings-radio__font-weight);
  }

  .settings-radio__label {
    @apply cursor-pointer;
  }

  .settings-radio {
    @apply cursor-pointer;
    @apply w-5 h-5;
    @apply rounded-full;
    @apply border-2 border-solid;
    border-color: var(--settings-radio__border-color);
  }

  .settings-radio:checked {
    border-color: var(--settings-radio__border-color--checked);
    background-color: var(--settings-radio__border-color--checked);
    box-shadow: inset -0.005rem -0.005rem 0 0.15rem
      var(--settings-radio__bg-color);
  }

  .settings-radio:not(:checked):hover {
    border-color: var(--settings-radio__border-color);
    background-color: var(--settings-radio__border-color);
    box-shadow: inset -0.005rem -0.005rem 0 0.15rem
      var(--settings-radio__bg-color);
  }

  .settings-radio__extra-content {
    @apply hidden;
    @apply col-span-2;
  }

  .settings-radio:checked ~ .settings-radio__extra-content {
    @apply block;
  }
}
