@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/opacities';
@import '@vtmn/css-design-tokens/src/shadows';
@import '@vtmn/css-design-tokens/src/transitions';

.vtmn-checkbox[type='checkbox'] {
  position: absolute;
  opacity: 0;
}

.vtmn-checkbox[type='checkbox'] + label {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--vtmn-typo_font-family);
  font-size: var(--vtmn-typo_text-2-font-size);
  line-height: var(--vtmn-typo_text-2-line-height);
  cursor: pointer;
  user-select: none;
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-checkbox[type='checkbox'] + label::before {
  content: '';
  border-width: rem(2px);
  border-style: solid;
  border-radius: rem(1px);
  transition: var(--vtmn-transition_focus-visible);
  margin-block-start: rem(3px);
  margin-inline-end: rem(11px);
  padding: rem(7px);
  border-color: var(--vtmn-semantic-color_content-inactive);
}

.vtmn-checkbox[type='checkbox']:not(:focus-visible, :checked, :disabled):hover
  + label::before {
  box-shadow: 0 0 0 rem(7px)
    var(--vtmn-semantic-color_hover-secondary-transparent);
}

.vtmn-checkbox[type='checkbox']:not(:focus-visible, :checked, :disabled):active
  + label::before {
  box-shadow: 0 0 0 rem(7px)
    var(--vtmn-semantic-color_active-secondary-transparent);
}

.vtmn-checkbox[type='checkbox']:not(:focus-visible):checked:not(:disabled):hover
  + label::before {
  box-shadow: 0 0 0 rem(7px)
    var(--vtmn-semantic-color_hover-primary-transparent);
}

.vtmn-checkbox[type='checkbox']:not(:focus-visible):checked:not(
    :disabled
  ):active
  + label::before {
  box-shadow: 0 0 0 rem(7px)
    var(--vtmn-semantic-color_active-primary-transparent);
}

.vtmn-checkbox[type='checkbox']:not(:disabled):focus-visible + label::before {
  box-shadow: var(--vtmn-shadow_focus-visible);
}

.vtmn-checkbox[type='checkbox']:checked + label::before,
.vtmn-checkbox[type='checkbox']:indeterminate + label::before {
  background-color: var(--vtmn-semantic-color_content-active);
  border-color: var(--vtmn-semantic-color_content-active);
}

.vtmn-checkbox[type='checkbox'] + label::after {
  content: '';
  mask: url("data:image/svg+xml;charset=utf-8, <svg width='18' height='18' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path d='M5.80351 10.8L14.2875 2.31484L12.5907 0.618038L5.80351 7.40644L2.40871 4.01164L0.711914 5.70844L5.80351 10.8Z'/></svg>");
  mask-size: cover;
  position: absolute;
  block-size: rem(18px);
  inline-size: rem(18px);
  inset-block-start: rem(7px);
  inset-inline-start: rem(2px);
  background-color: var(--vtmn-semantic-color_content-primary-reversed);
  transition: all 0.2s;
}

.vtmn-checkbox[type='checkbox']:indeterminate + label::after {
  content: '';
  mask: url("data:image/svg+xml;charset=utf-8, <svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M3.333 7.333h9.334v1.334H3.333V7.333z' stroke-width='10'/></svg>");
  mask-size: cover;
  position: absolute;
  block-size: rem(20px);
  inline-size: rem(20px);
  inset-block-start: rem(2px);
  inset-inline-start: rem(-1px);
  background-color: var(--vtmn-semantic-color_content-primary-reversed);
}

.vtmn-checkbox[type='checkbox']:not(:checked) + label::after,
.vtmn-checkbox[type='checkbox']:not(:indeterminate) + label::after {
  opacity: 0;
  transform: scale(0) rotate(45deg);
}

.vtmn-checkbox[type='checkbox']:checked + label::after,
.vtmn-checkbox[type='checkbox']:indeterminate + label::after {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.vtmn-checkbox[type='checkbox']:disabled + label {
  opacity: var(--vtmn-opacity_disabled-state);
  cursor: not-allowed;
}