@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/initial-variables" as iv;
@use "bulma/sass/utilities/derived-variables" as dv;
@use "bulma/sass/utilities/mixins" as mixins;
@use "bulma/sass/utilities/controls" as controls;
@use "bulma/sass/form/shared";
@use "../utils/functions" as fn;
@use "sass:list";

$checkbox-active-background-color: cv.getVar('primary') !default;
$checkbox-border-color: cv.getVar('primary') !default;
$checkbox-background: cv.getVar("scheme-main") !default;
$checkbox-border-radius: cv.getVar('radius') !default;
$checkbox-border-width: 2px !default;
$checkbox-checkmark-color: cv.getVar('primary-invert') !default;
$checkbox-size: 1.25em !default;
$checkbox-colors: shared.$form-colors !default;



.#{iv.$class-prefix}b-checkbox {
  @include cv.register-vars(
    (
    "checkbox-active-background-color": #{$checkbox-active-background-color},
    
    "checkbox-shadow": #{shared.$input-shadow},

    "checkbox-background-color": #{$checkbox-background},
    "checkbox-border-color": #{$checkbox-border-color},
    "checkbox-border-radius": #{$checkbox-border-radius},
    "checkbox-border-width": #{$checkbox-border-width},
    "checkbox-checkmark-color": #{$checkbox-checkmark-color},
    "checkbox-size": #{$checkbox-size},
    "checkbox-checkmark-image": #{url(fn.checkmark(cv.getVar("checkbox-checkmark-color")))},
    "checkbox-indeterminate-image":  #{url(fn.indeterminate(cv.getVar("checkbox-checkmark-color")))} 

    )
  );

  &.checkbox input[type=checkbox] + .check {

    @each $name, $pair in $checkbox-colors {
      $color: list.nth($pair, 1);

      &.#{iv.$class-prefix}is-#{$name} {
        @include cv.register-vars(
          (
            "checkbox-active-background-color": #{cv.getVar($name)},
            "checkbox-border-color": #{cv.getVar($name)},
            "checkbox-checkmark-color": #{cv.getVar($name, "", "-invert")},
            "checkbox-checkmark-image": #{url(fn.checkmark(cv.getVar($name, "", "-invert")))},
            "checkbox-indeterminate-image":  #{url(fn.indeterminate(cv.getVar($name, "", "-invert")))} 
          )
        );
      }
    };
  }

};

.#{iv.$class-prefix}b-checkbox {

  line-height: cv.getVar('control-line-height');

  &.checkbox {
    @extend %unselectable;
    outline: none;
    display: inline-flex;
    align-items: center;
    
    &:not(.button) {
      margin-inline-end: 0.5em;
      & + .checkbox:last-child {
        margin-inline-end: 0;
      }
    }

    input[type=checkbox] {
      position: absolute;
      inset-inline-start: 0;
      opacity: 0;
      outline: none;
      z-index: -1;

      + .check {
        // @extend %input;

        padding: 0;
        background: cv.getVar("checkbox-background-color");
        border-style: solid;
        border-width: cv.getVar('checkbox-border-width');
        // border-color: cv.getVar("checkbox-border-color");
        box-shadow: cv.getVar('checkbox-shadow');

        width: cv.getVar('checkbox-size');
        height: cv.getVar('checkbox-size');
        flex-shrink: 0;
        border-radius: cv.getVar('checkbox-border-radius');
        transition: background cv.getVar('speed-slow') cv.getVar('easing');
      }
      &:checked + .check {
        background: cv.getVar('checkbox-active-background-color') cv.getVar('checkbox-checkmark-image') no-repeat center center;
        border-color: cv.getVar("checkbox-border-color");
      }
      &:indeterminate + .check {
        background: cv.getVar('checkbox-active-background-color') cv.getVar('checkbox-indeterminate-image') no-repeat center center;
        border-color: cv.getVar('checkbox-border-color');
      }
      &:focus {
        + .check {
          box-shadow: cv.getVar('checkbox-shadow');
        }
        &:checked + .check {
          box-shadow: cv.getVar('checkbox-shadow');
        }
      }
    }
    .control-label {
      padding-inline-start: cv.getVar('control-padding-horizontal');
    }
    &.button {
      display: flex;
    }
    &[disabled] {
      opacity: 0.5;
    }
    &:hover {
      input[type=checkbox]:not(:disabled) + .check {
        border-color: cv.getVar('checkbox-border-color');
      }
    }
    // Sizes
    &.is-small {
      @include controls.control-small;
    }
    &.is-medium{
      @include controls.control-medium;
    }
    &.is-large {
      @include controls.control-large;
    }
  }
}