@layer components {
  .checkbox__input {
    @apply absolute -z-10 opacity-0;
  }

  .checkbox__input + label {
    @apply inline-flex select-none items-center;
  }
  .checkbox__input + label::before {
    @apply mr-2.5 inline-block h-6 w-6 shrink-0 grow-0 rounded border border-gray-2 bg-gray-4 bg-center bg-no-repeat content-[''];
  }

  .checkbox__label > span {
    @apply text-sm leading-tight xl:leading-none;
  }

  .checkbox__input:focus + label::before {
    @apply border-0;
    box-shadow: 0 0 0 1px #00877c;
  }

  .checkbox__input:checked + label::before {
    @apply border-additional-3 bg-additional-3;
    background-image: url('icons/check.inline.svg');
  }

  .checkbox__input_event {
    @apply absolute -z-10 opacity-0;
  }

  .checkbox__input_event + label {
    @apply inline-flex select-none items-center;
  }
  .checkbox__input_event + label::before {
    @apply mr-2.5 inline-block h-6 w-6 shrink-0 grow-0 rounded border border-gray-2 bg-white bg-center bg-no-repeat content-[''];
  }

  .checkbox__label_event > span {
    @apply text-base leading-none;
  }

  .checkbox__input_event:focus + label::before {
    @apply border-0;
    box-shadow: 0 0 0 1px #0073e6;
  }

  .checkbox__input_event:checked + label::before {
    @apply border-primary-1 bg-primary-1;
    background-image: url('icons/check.inline.svg');
  }
}
