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

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

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

  .a-checkbox__marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition-timing-function: var(--transition-timing-function-cubic-bezier);
    transition-duration: var(--transition-duration-0-25);
    transition-property: border-color, background-color, color;
    color: var(--color-main-3);
    border: 0.0625rem solid var(--color-greyscale-5);
    border-radius: 0.625rem;
  }

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

  .a-checkbox__element:hover ~ .a-checkbox__marker {
      color: var(--color-greyscale-2);
      border-color: var(--color-main-1);
    }

  .a-checkbox__element[disabled] ~ .a-checkbox__marker,
    .a-checkbox__element.is-disabled ~ .a-checkbox__marker {
      color: var(--color-greyscale-5);
      border-color: var(--color-greyscale-5);
      background-color: var(--color-greyscale-6);
    }

  .a-checkbox__element:checked ~ .a-checkbox__marker {
      color: var(--color-greyscale-7);
      border-color: var(--color-main-1);
      background-color: var(--color-main-1);
    }

  .a-checkbox__element:checked:hover ~ .a-checkbox__marker {
      color: var(--color-greyscale-7);
      border-color: var(--color-greyscale-2);
      background-color: var(--color-greyscale-2);
    }

  .a-checkbox__element:checked[disabled] ~ .a-checkbox__marker,
    .a-checkbox__element.is-disabled:checked ~ .a-checkbox__marker {
      color: var(--color-greyscale-7);
      border-color: var(--color-main-4);
      background-color: var(--color-main-4);
    }

  .a-checkbox__element.error ~ .a-checkbox__marker {
      color: var(--color-feedback-5);
      border-color: var(--color-feedback-5);
    }

  .a-checkbox__element.error:checked ~ .a-checkbox__marker {
      color: var(--color-feedback-5);
      border-color: var(--color-feedback-5);
      background-color: var(--color-feedback-8);
    }

  .a-checkbox__icon {
    width: 0.75rem;
    height: 0.75rem;
    fill: currentColor;
  }