@use '../../variables' as *;
body {
  --checkbox-size: #{$size-xs};
}
.container {
  position: relative;
  cursor: pointer;
  user-select: none;

  &.small {
    --checkbox-size: 16px;
    font-size: $font-small;
  }

  &.disabled {
    color: var(--color-neutral-100);
    cursor: default;

    input,
    .label {
      cursor: default;
    }

    .label {
      color: var(--color-neutral-60);
    }

    .check {
      border: 1px solid var(--color-neutral-40);

      & > * {
        color: var(--color-neutral-0);
      }
    }

    &:hover .check {
      background-color: var(--color-brand-secondary-bright);
    }
  }

  input {
    position: absolute;
    height: var(--checkbox-size);
    width: var(--checkbox-size);
    cursor: pointer;
    margin: 0;
    opacity: 0;
  }

  .checkmark {
    display: none;
  }

  &:hover .check {
    background-color: var(--color-neutral-5)-hover;
  }

  input:checked ~ .check {
    background-color: var(--color-accent-30);
    border-color: var(--color-accent-30);

    .checkmark {
      display: block;
      color: var(--color-neutral-100);
    }
  }

  // Focus

  input:focus-visible ~ .check {
    box-shadow: 0 0 0 2px var(--color-neutral-100);
    border-color: transparent;
  }

  input:checked:focus-visible ~ .check {
    background-color: transparent;
  }

  input:checked:focus-visible ~ .check .checkmark {
    display: block;
    color: var(--color-neutral-100);
  }

  // Disabled state

  input:disabled ~ .check {
    background-color: var(--color-neutral-30);
    border-color: var(--color-neutral-30);
    .checkmark {
      color: var(--color-neutral-50);
    }
  }

  &:hover input:disabled ~ .check {
    background-color: var(--color-neutral-30);
  }

  input:checked:disabled ~ .check {
    background-color: var(--color-neutral-30);
  }
}

/* Create a custom checkbox */
.check {
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  margin: 0;
  border-radius: var(--border-radius-tiny);
  border: 1px solid var(--color-neutral-100);
  pointer-events: none;
  cursor: pointer;
}

.label {
  cursor: pointer;
}