@use 'sass:map';

@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'mixins/_button';
@use 'mixins/utils' as *;

$checkbox-height: () !default;
$checkbox-height: map.merge($common-component-size, $checkbox-height);

$checkbox-bordered-input-height: () !default;
$checkbox-bordered-input-height: map.merge(
  (
    'large': 14px,
    'default': 12px,
    'small': 12px,
  ),
  $checkbox-bordered-input-height
);

$checkbox-font-size: () !default;
$checkbox-font-size: map.merge(
  (
    'large': 14px,
    'small': 12px,
  ),
  $checkbox-font-size
);

$checkbox-bordered-input-width: () !default;
$checkbox-bordered-input-width: map.merge(
  $checkbox-bordered-input-height,
  $checkbox-bordered-input-width
);

@include b(checkbox) {
  @include set-component-css-var('checkbox', $checkbox);
}

@include b(checkbox) {
  color: var(--sg-checkbox-text-color);
  font-weight: var(--sg-checkbox-font-weight);
  font-size: var(--sg-font-size-base);
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  user-select: none;
  margin-right: var(--sg-checkbox-margin-right);
  height: map.get($checkbox-height, 'default');

  @include when(bordered) {
    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width-base
      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width-base;
    border-radius: var(--sg-border-radius-base);
    border: var(--sg-border-base);
    box-sizing: border-box;

    &.is-checked {
      border-color: var(--sg-color-primary);
    }

    &.is-disabled {
      border-color: var(--sg-border-color-lighter);
      cursor: not-allowed;
    }

    @each $size in (large, small) {
      &.#{$namespace}-checkbox--#{$size} {
        padding: 0
          map.get($checkbox-bordered-padding-right, $size)-$border-width-base
          0
          map.get($checkbox-bordered-padding-left, $size)-$border-width-base;

        border-radius: map.get($button-border-radius, $size);

        .#{$namespace}-checkbox__label {
          font-size: map.get($button-font-size, $size);
        }
      }
    }
  }

  @include e(input) {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-flex;
    position: relative;

    @include when(disabled) {


      & + span.#{$namespace}-checkbox__label {
        color: var(--sg-disabled-text-color);
        cursor: not-allowed;
      }
    }
  }
  .sg-checkbox__original[type=checkbox] {
    appearance: none;
    width: 14px;
    height: 14px;
    background-color: var(--sg-color-white);
    border: 14px;
    border: var(--sg-checkbox-input-border);
    border-radius: var(--sg-checkbox-border-radius);
  }
  .sg-checkbox__original[type=checkbox]:checked {
    background-color: var(--sg-checkbox-checked-bg-color);
    border-color: var(--sg-color-primary);
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjg5NTc1NTMzNjcwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQyNjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgyNS43NjggMzc2LjAxNiA4MjUuNzY4IDM3Ni4wMTYgNDc1Ljg4OSA3MzEuNjU4bDAgMGMtOC4yNjUgOC4zOTUtMTkuNjggMTMuNTk1LTMyLjI4NyAxMy41OTUtMTIuNjA3IDAtMjQuMDIyLTUuMi0zMi4yOS0xMy41OTVsMCAwTDIxMy41ODQgNTMwLjYyOWwwIDBjLTguMjYtOC4zNTUtMTMuMzcyLTE5Ljk2LTEzLjM3Mi0zMi43NzUgMC0yNS42MyAyMC40NDItNDYuMzcyIDQ1LjYxNy00Ni4zNzIgMTIuNjA3IDAgMjQuMDI3IDUuMTk1IDMyLjI5MiAxMy41OTJsMCAwIDE2NS40OCAxNjguMTcgMzE3LjYzNy0zMjIuODY0IDAgMGM4LjI2NS04LjM1NSAxOS42OC0xMy41NTIgMzIuMjg1LTEzLjU1MiAyNS4xNyAwIDQ1LjYyNSAyMC43OCA0NS42MjUgNDYuMzY3QzgzOS4xNDggMzU2LjAxMiA4MzQuMDMzIDM2Ny42MTkgODI1Ljc2OCAzNzYuMDE2TDgyNS43NjggMzc2LjAxNiA4MjUuNzY4IDM3Ni4wMTZ6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI0MjY4Ij48L3BhdGg+PC9zdmc+');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px auto;
  }
  .sg-checkbox__original[type=checkbox]:disabled {
    border-color: var(--sg-checkbox-disabled-border-color);
    background-color: var(--sg-bg-color);
  }
  .is-disabled.is-checked {
    [type=checkbox] {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjg5NTc1NTMzNjcwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQyNjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgyNS43NjggMzc2LjAxNiA4MjUuNzY4IDM3Ni4wMTYgNDc1Ljg4OSA3MzEuNjU4bDAgMGMtOC4yNjUgOC4zOTUtMTkuNjggMTMuNTk1LTMyLjI4NyAxMy41OTUtMTIuNjA3IDAtMjQuMDIyLTUuMi0zMi4yOS0xMy41OTVsMCAwTDIxMy41ODQgNTMwLjYyOWwwIDBjLTguMjYtOC4zNTUtMTMuMzcyLTE5Ljk2LTEzLjM3Mi0zMi43NzUgMC0yNS42MyAyMC40NDItNDYuMzcyIDQ1LjYxNy00Ni4zNzIgMTIuNjA3IDAgMjQuMDI3IDUuMTk1IDMyLjI5MiAxMy41OTJsMCAwIDE2NS40OCAxNjguMTcgMzE3LjYzNy0zMjIuODY0IDAgMGM4LjI2NS04LjM1NSAxOS42OC0xMy41NTIgMzIuMjg1LTEzLjU1MiAyNS4xNyAwIDQ1LjYyNSAyMC43OCA0NS42MjUgNDYuMzY3QzgzOS4xNDggMzU2LjAxMiA4MzQuMDMzIDM2Ny42MTkgODI1Ljc2OCAzNzYuMDE2TDgyNS43NjggMzc2LjAxNiA4MjUuNzY4IDM3Ni4wMTZ6IiBmaWxsPSIjYmZiZmJmIiBwLWlkPSI0MjY4Ij48L3BhdGg+PC9zdmc+');
    }
  }
  .is-indeterminate {
    [type=checkbox] {
      appearance: none;
      width: 14px;
      height: 14px;
      background-color: #fff;
      border: var(--sg-checkbox-input-border);
      border-radius: var(--sg-checkbox-border-radius);
      display: flex;
      align-items: center;
      justify-content: center;
      &::after{
        content: "";
        width: 8px;
        height: 8px;
        border: 0;
        border-radius: 2px;
        background-color: var(--sg-color-primary);
        display: inline-block;
      }
    }
  }
  @include e(label) {
    display: inline-block;
    padding-left: 8px;
    line-height: 1;
    font-size: var(--sg-checkbox-font-size);
  }

  @each $size in (large, small) {
    &.#{$namespace}-checkbox--#{$size} {
      height: map.get($checkbox-height, $size);
      @include e(label) {
        font-size: map.get($checkbox-font-size, $size);
      }
      & [type=checkbox] {
        background-size: map.get($checkbox-font-size, $size) auto;
        width: map.get($checkbox-font-size, $size);
        height: map.get($checkbox-font-size, $size);

      }
      .is-indeterminate {
        [type=checkbox] {
          appearance: none;
          width: map.get($checkbox-font-size, $size);
          height: map.get($checkbox-font-size, $size);
          display: flex;
          align-items: center;
          justify-content: center;
          &::after{
            content: "";
            width: map.get($checkbox-font-size, $size) - 6px;
            height: map.get($checkbox-font-size, $size) - 6px;
          }
        }
      }
      &.is-disabled.is-checked {
        [type=checkbox] {
          background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjg5NTc1NTMzNjcwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQyNjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgyNS43NjggMzc2LjAxNiA4MjUuNzY4IDM3Ni4wMTYgNDc1Ljg4OSA3MzEuNjU4bDAgMGMtOC4yNjUgOC4zOTUtMTkuNjggMTMuNTk1LTMyLjI4NyAxMy41OTUtMTIuNjA3IDAtMjQuMDIyLTUuMi0zMi4yOS0xMy41OTVsMCAwTDIxMy41ODQgNTMwLjYyOWwwIDBjLTguMjYtOC4zNTUtMTMuMzcyLTE5Ljk2LTEzLjM3Mi0zMi43NzUgMC0yNS42MyAyMC40NDItNDYuMzcyIDQ1LjYxNy00Ni4zNzIgMTIuNjA3IDAgMjQuMDI3IDUuMTk1IDMyLjI5MiAxMy41OTJsMCAwIDE2NS40OCAxNjguMTcgMzE3LjYzNy0zMjIuODY0IDAgMGM4LjI2NS04LjM1NSAxOS42OC0xMy41NTIgMzIuMjg1LTEzLjU1MiAyNS4xNyAwIDQ1LjYyNSAyMC43OCA0NS42MjUgNDYuMzY3QzgzOS4xNDggMzU2LjAxMiA4MzQuMDMzIDM2Ny42MTkgODI1Ljc2OCAzNzYuMDE2TDgyNS43NjggMzc2LjAxNiA4MjUuNzY4IDM3Ni4wMTZ6IiBmaWxsPSIjYmZiZmJmIiBwLWlkPSI0MjY4Ij48L3BhdGg+PC9zdmc+');
        }
      }
    }
  }

  &:last-of-type {
    margin-right: 0;
  }
}