// variables
$checkbox-bg: $col-prm !default;
$checkbox-size: 20px !default; // vyska a sirka checkboxu
$checkbox-selected-bg: $col-prm !default; // farba pozadia zakliknuteho checkboxu
$checkbox-border-color: $gray200 !default; // farba borderu checkboxu
$checbox-border-radius: 0.4rem !default; // zaoblenie rohov checkboxu
$checkbox-border-width: 1px !default; // sirka borderu checkboxu

$checkbox-disabled-bg: $gray200 !default; // farba pozadia vypnuteho checkboxu
$tick-disabled-color: $gray300 !default; // farba fajky vypnuteho checkboxu

$tick: polygon(
  38% 67%,
  20% 50%,
  14% 56%,
  38% 79%,
  88% 29%,
  82% 23%
) !default; // tvar fajky v checkboxe
$tick-color: $white !default; // farba fajky v checkboxe
$checkbox-cross: polygon(
  15% 45%,
  45% 45%,
  45% 15%,
  55% 15%,
  55% 45%,
  85% 45%,
  85% 55%,
  55% 55%,
  55% 85%,
  45% 85%,
  45% 55%,
  15% 55%
) !default; // tvar kriza v checkboxe, stylizovany podobne ako fajka

@mixin checkbox {
  appearance: none;
  border: $checkbox-border-width solid $checkbox-border-color;
  border-radius: $checbox-border-radius;
  width: $checkbox-size;
  height: $checkbox-size;
  position: relative;
  color: $white;
  background-color: transparent;
  overflow: hidden;
  transition: 200ms ease-in-out all;
  &:checked {
    background: $checkbox-selected-bg;
    border-color: $checkbox-selected-bg;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: $tick-color;
      clip-path: polygon(38% 67%, 20% 50%, 14% 56%, 38% 79%, 88% 29%, 82% 23%);
      box-sizing: border-box;
    }
  }
  &.cross:checked::after {
    clip-path: $checkbox-cross;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &:disabled {
    background: $checkbox-disabled-bg;
    border-color: $checkbox-disabled-bg;
    &::after {
      background: $tick-disabled-color;
    }
  }
}
