/*
  sizes: .a-checkbox--sm (large default)
  states: .a-checkbox--checked (when checkbox is decorative, :checked is used for inputs, unchecked default)
*/

.a-checkbox {
  --bg: transparent;
  --color: var(--lens-semantic-color-action-form-indicator);
  --border-color: var(--lens-semantic-color-action-form-outline);
  --border-radius: var(--lens-semantic-radius-sm);
  --width: var(--lens-core-spacing-3);
  --height: var(--lens-core-spacing-3);
  appearance: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--a-checkbox-width, var(--width));
  height: var(--a-checkbox-height, var(--height));
  border: 1.4px solid var(--a-checkbox-border-color, var(--border-color));
  background: var(--a-checkbox-bg, var(--bg));
  transition-property: background, border-color;
  transition-duration: var(--a-transition-duration);
  transition-timing-function: var(--a-transition-easing);
  border-radius: var(--a-checkbox-border-radius, var(--border-radius));
  &::after {
    visibility: hidden;
    display: block;
    background: var(--a-checkbox-color, var(--color));
    content: "";
    width: 12.97px;
    height: 9.42px;
    clip-path: polygon(
      34.264% 100%,
      0% 52.807%,
      6.868% 43.348%,
      34.264% 81.082%,
      93.133% 0%,
      100% 9.459%,
      34.264% 100%
    );
    pointer-events: none;
  }
  &:not([disabled]) {
    cursor: pointer;
    &:hover {
      --bg: var(--lens-semantic-color-action-form-hover);
      --border-color: var(--lens-semantic-color-action-form-outline);
    }
    &:active {
      --bg: var(--lens-semantic-color-action-form-active);
      --border-color: var(--lens-semantic-color-outline-active);
    }
    &:focus-visible {
      outline: var(--lens-semantic-border-width-focus-width) solid
        var(--lens-semantic-color-ui-focus-ring);
      outline-offset: var(--lens-semantic-border-width-focus-offset);
    }
  }
  &[disabled] {
    --border-color: var(--lens-semantic-color-action-form-outline-disabled);
    --color: var(--lens-semantic-color-action-form-indicator-disabled);
    cursor: not-allowed;
    &:checked {
      --bg: var(--lens-semantic-color-action-form-disabled-selected);
    }
  }
  &.a-checkbox--checked,
  &:not([disabled]):checked {
    --bg: var(--lens-semantic-color-action-form-default-selected);
    --border-color: var(--lens-semantic-color-action-form-outline-selected);
    &:hover {
      --bg: var(--lens-semantic-color-action-form-hover-selected);
      --border-color: var(--lens-semantic-color-action-form-outline-hover-selected);
    }
    &:active {
      --bg: var(--lens-semantic-color-action-form-active-selected);
      --border-color: var(--lens-semantic-color-action-form-outline-press-selected);
    }
  }
  &:checked,
  &.a-checkbox--checked {
    &::after {
      visibility: visible;
    }
  }
  &.a-checkbox--sm {
    --width: var(--lens-core-spacing-2);
    --height: var(--lens-core-spacing-2);
    &::after {
      width: 9.31px;
      height: 6.76px;
    }
  }
}

.a-checkbox-label {
  font-size: var(--a-checkbox-label-font-size, var(--lens-semantic-font-text-md-font-size));
  font-weight: var(--a-checkbox-label-font-weight, var(--lens-semantic-font-text-md-font-weight));
  line-height: var(--a-checkbox-label-line-height, var(--lens-semantic-font-text-md-line-height));
  letter-spacing: var(
    --a-checkbox-label-letter-spacing,
    var(--lens-semantic-font-text-md-letter-spacing)
  );
  color: var(--a-checkbox-label-color, var(--lens-semantic-color-type-default));
  cursor: pointer;
  transition: color var(--a-transition-duration) var(--a-transition-easing);
  &:has(> .a-checkbox) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lens-core-spacing-1-5);
  }
  &:has(> .a-checkbox[disabled]) {
    cursor: not-allowed;
    color: var(--lens-semantic-color-type-disabled);
  }
  &:has(> .a-checkbox--sm) {
    font-size: var(--lens-semantic-font-text-sm-font-size);
    font-weight: var(--lens-semantic-font-text-sm-font-weight);
    line-height: var(--lens-semantic-font-text-sm-line-height);
    letter-spacing: var(--lens-semantic-font-text-sm-letter-spacing);
    gap: var(--lens-semantic-spacing-desktop-gap-0-5);
  }
}