.a-radio {
  position: relative;
  width: 2rem;
  height: 2rem;
}

  .a-radio__element {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    appearance: none;
  }

  .a-radio__element[disabled],
    .a-radio__element.is-disabled {
      cursor: not-allowed;
    }

  .a-radio__marker {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  html:not([data-js-focus-visible]) .a-radio__element:focus ~ .a-radio__marker,
    [data-js-focus-visible] .a-radio__element.focus-visible ~ .a-radio__marker {
      outline: var(--outline-size) solid var(--outline-color);
      outline-offset: var(--outline-offset);
    }

  .a-radio__icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .a-radio__outer-circle {
    fill: var(--color-greyscale-5);
    transition: fill var(--transition-duration-0-25) var(--transition-timing-function-cubic-bezier);
  }

  .a-radio__element:hover ~ .a-radio__marker .a-radio__outer-circle {
      fill: var(--color-main-1);
    }

  .a-radio__element[disabled] ~ .a-radio__marker .a-radio__outer-circle,
    .a-radio__element.is-disabled ~ .a-radio__marker .a-radio__outer-circle {
      fill: var(--color-greyscale-5);
    }

  .a-radio__element:checked ~ .a-radio__marker .a-radio__outer-circle {
      fill: var(--color-main-1);
    }

  .a-radio__element:checked:hover ~ .a-radio__marker .a-radio__outer-circle {
      fill: var(--color-greyscale-2);
    }

  .a-radio__element[disabled]:checked ~ .a-radio__marker .a-radio__outer-circle,
    .a-radio__element.is-disabled:checked ~ .a-radio__marker .a-radio__outer-circle {
      fill: var(--color-main-4);
    }

  .a-radio__element.error ~ .a-radio__marker .a-radio__outer-circle,
    .a-radio__element.error:checked ~ .a-radio__marker .a-radio__outer-circle {
      fill: var(--color-feedback-5);
    }

  .a-radio__inner-circle {
    fill: var(--color-main-4);
    transition: fill var(--transition-duration-0-25) var(--transition-timing-function-cubic-bezier);
  }

  .a-radio__element:hover ~ .a-radio__marker .a-radio__inner-circle {
      fill: var(--color-greyscale-2);
    }

  .a-radio__element[disabled] ~ .a-radio__marker .a-radio__inner-circle,
    .a-radio__element.is-disabled ~ .a-radio__marker .a-radio__inner-circle {
      fill: var(--color-greyscale-5);
    }

  .a-radio__element:checked ~ .a-radio__marker .a-radio__inner-circle,
    .a-radio__element:checked:hover ~ .a-radio__marker .a-radio__inner-circle,
    .a-radio__element[disabled]:checked ~ .a-radio__marker .a-radio__inner-circle,
    .a-radio__element.is-disabled:checked ~ .a-radio__marker .a-radio__inner-circle {
      fill: var(--color-greyscale-7);
    }

  .a-radio__element.error ~ .a-radio__marker .a-radio__inner-circle,
    .a-radio__element.error:checked ~ .a-radio__marker .a-radio__inner-circle {
      fill: var(--color-feedback-5);
    }

  .a-radio__circle-background {
    fill: var(--color-greyscale-7);
    transition: fill var(--transition-duration-0-25) var(--transition-timing-function-cubic-bezier);
  }

  .a-radio__element[disabled] ~ .a-radio__marker .a-radio__circle-background,
    .a-radio__element.is-disabled ~ .a-radio__marker .a-radio__circle-background {
      fill: var(--color-greyscale-6);
    }

  .a-radio__element:checked ~ .a-radio__marker .a-radio__circle-background {
      fill: var(--color-main-1);
    }

  .a-radio__element:checked:hover ~ .a-radio__marker .a-radio__circle-background {
      fill: var(--color-greyscale-2);
    }

  .a-radio__element[disabled]:checked ~ .a-radio__marker .a-radio__circle-background,
    .a-radio__element.is-disabled:checked ~ .a-radio__marker .a-radio__circle-background {
      fill: var(--color-main-4);
    }

  .a-radio__element.error ~ .a-radio__marker .a-radio__circle-background {
      fill: var(--color-greyscale-7);
    }

  .a-radio__element.error:checked ~ .a-radio__marker .a-radio__circle-background {
      fill: var(--color-feedback-8);
    }