@import 'config';
@import '../variables';
@import '../utilities/mixins';

.#{$framework-prefix}checkbox {
  $this: &;
  &-container {
    --checkbox-container-height: #{$checkbox-container-height};
    --checkbox-border-h-color: #{$checkbox-border-h-color};
    --checkbox-border-width: #{$checkbox-border-width};
    --checkbox-border-color: #{$checkbox-border-color};
    --checkbox-margin-bottom: #{$chebox-margin-bottom};
    --checkbox-size: #{$checkbox-size};
    max-height: var(--checkbox-container-height);
    transition: var(--transition-time);
    position: relative;
    &:not(:last-of-type) {
      margin-bottom: var(--checkbox-margin-bottom);
    }
    &:hover > #{$this}-label:before {
      border-color: var(--checkbox-border-h-color);
    }
    input[type="checkbox"] {
      position: absolute;
      left: -200vw;
      z-index: -1;
      &:focus:not(:checked) ~ label:before {
        border-color: var(--checkbox-border-h-color);
      }
    }
  }
  &-error {
    --checkbox-border-color: var(--red);
  }
  &-label {
    align-items: center;
    position: relative;
    user-select: none;
    cursor: pointer;
    display: flex;
    &:before {
      border: var(--checkbox-border-width) solid var(--checkbox-border-color);
      transition: border-color var(--transition-time, .3s);
      transform: scale(var(--scale-koef, 1));
      min-width: var(--checkbox-size);
      height: var(--checkbox-size);
      width: var(--checkbox-size);
      box-sizing: content-box;
      align-self: flex-start;
      margin-right: 22px;
      display: block;
      content: '';
    }
    &:after {
      left: calc( calc(var(--checkbox-size) / 2) - var(--checkbox-border-width));
      transform: scale(var(--scale-koef, 1)) rotate(45deg) ;
      transition: var(--transition-time, .3s) ease-in;
      height: calc(var(--checkbox-size) / 2);
      border-bottom: 1px solid var(--green);
      width: calc(var(--checkbox-size) / 4);
      border-right: 1px solid var(--green);
      top: calc(var(--checkbox-size) / 5);
      position: absolute;
      display: block;
      content: '';
      opacity: 0;
    }
    input[id]:checked ~ & {
      &:before {
        border-color: var(--green);
      }
      &:after {
        opacity: 1;
      }
    }
  }
}