.Wrapper {
  display: grid;
  justify-content: start;

  /*
    We’d naturally use `gap: var(--x-pp-spacing-tight1x)`, but Autoprefixer
    has an issue where it won’t transform both the grid and custom property
    syntax. This leaves custom properties in the fallback grid declaration,
    which causes it to be ignored. Once this issue is fixed:
    https://github.com/csstools/postcss-preset-env/issues/180
    we will be able to use the gap property as expected.
  */
  grid-template: 'radio gap label' auto / auto var(--x-pp-spacing-tight1x) auto;
}

.Radio {
  grid-area: radio;
  position: relative;
}

.Input {
  --input-border-color: var(--x-pp-default-color-border);
  background-clip: padding-box;
  border: 1px var(--input-border-color) solid;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  outline: none;
  transition: all var(--x-pp-duration-fast) var(--x-pp-timing-ease-out);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    display: block;
    pointer-events: none;
    box-shadow: 0 0 0 0 var(--input-checked-color);
    opacity: 0.3;
    transition: box-shadow var(--x-pp-duration-fast) var(--x-pp-timing-ease-out);
  }

  &:focus,
  &:active {
    border-color: var(--input-checked-color);

    &::before {
      box-shadow: 0 0 0 em(3px) var(--input-checked-color);
    }
  }
}

.Input-sizeBase {
  &,
  &::before,
  &::after {
    width: var(--x-pp-radio-size-base);
    height: var(--x-pp-radio-size-base);
  }
}

.Input-sizeLarge {
  &,
  &::before,
  &::after {
    margin-block: -2px;
    width: var(--x-pp-radio-size-large);
    height: var(--x-pp-radio-size-large);
  }
}

.Input-checkedStyleRing {
  &:checked {
    border: em(6px) var(--input-checked-color) solid;
  }
}

.Input-checkedStyleDisc {
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    display: block;
    pointer-events: none;
    background-clip: padding-box;
    border: em(4px) transparent solid;
    background-color: var(--input-checked-color);
    transform: scale(0);
    transition: transform var(--x-pp-duration-fast) var(--x-pp-timing-ease-out);
  }

  &:checked::after {
    transform: scale(1);
  }
}

.Input-checkedColorInteractive {
  --input-checked-color: var(--x-pp-color-interactive-text);
}

.Input-checkedColorPrimary {
  --input-checked-color: var(--x-pp-color-primary-action);
}

.Input-isDisabled {
  opacity: 0.7;
  cursor: default;

  &::before {
    display: none;
  }

  &.Input-backgroundSurfacePrimary {
    background-color: var(--x-pp-color-surface-primary-disabled);
  }

  &.Input-backgroundSurfaceSecondary {
    background-color: var(--x-pp-color-surface-secondary-disabled);
  }

  &.Input-backgroundSurfaceTertiary {
    background-color: var(--x-pp-color-surface-tertiary-disabled);
  }
}

.Input-backgroundTransparent {
  background-color: transparent;
}

.Input-backgroundSurfacePrimary {
  --x-pp-default-color-accent: var(--x-pp-color-surface-primary-accent);
  background-color: var(--x-pp-color-surface-primary);
}

.Input-backgroundSurfaceSecondary {
  --x-pp-default-color-accent: var(--x-pp-color-surface-secondary-accent);
  background-color: var(--x-pp-color-surface-secondary);
}

.Input-backgroundSurfaceTertiary {
  --x-pp-default-color-accent: var(--x-pp-color-surface-tertiary-accent);
  background-color: var(--x-pp-color-surface-tertiary);
}

.Input-borderColorEmphasized {
  --input-border-color: var(--x-pp-default-color-border-emphasized);
}

.Label {
  display: block;
  grid-area: label;
  cursor: pointer;
}

.Label-isDisabled {
  cursor: default;
}