.checkboxRow {
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  cursor: pointer;
}

.textLabel {
  color: var(--color-content-default);
  transition: var(--transition-fast);
  transition-property: color;
  @include typography(text, 300, regular);

  .checkboxRow:hover & {
    color: var(--color-content-strong);
  }

  .checkboxRow:active & {
    color: var(--color-content-default);
  }
}

.checkboxInput {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.checkboxButton {
  background: var(--color-background-interactive-neutral-rest);
  @extend .pos-1dp;
  border-radius: var(--radii-xsmall);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-content-on-accent);

  &.isActive {
    background: var(--color-background-interactive-accent-rest);
  }

  .checkboxRow:hover & {
    background: var(--color-background-interactive-neutral-hover);
    @extend .pos-2dp;

    &.isActive {
      background: var(--color-background-interactive-accent-hover);
      @extend .pos-2dp;
    }
  }

  .checkboxRow:active,
  .checkboxRow:active:hover & {
    background: var(--color-background-interactive-neutral-press);
    @extend .neg-1dp;

    &.isActive {
      background: var(--color-background-interactive-accent-press);
      @extend .neg-1dp;
    }
  }

  :global([data-whatinput="keyboard"]) .checkboxInput:focus + & {
    outline: 2px solid var(--color-border-accent);
    outline-offset: 2px;
  }
}
