@import "radiobutton";
// Checkbox
$sb-checkbox-primary-background: $primary-color;
$sb-checkbox-secondary-background: $secondary-100;
$sb-checkbox-warning-background: $tertiary-100;
$sb-checkbox-error-background: $red-100;
$sb-radio-btn-primary-border: $primary-color;
$sb-radio-btn-secondary-border: $secondary-100;
$sb-radio-btn-warning-border: $tertiary-100;
$sb-radio-btn-error-border: $red-100;
$sb-checkbox-border-width: calculateRem(1px);
$sb-checkbox-background-color: $secondary-100;
$sb-checkbox-label-font-size: 0.8571rem;
$sb-checkbox-border-radius: calculateRem(4px);
$sb-checkbox-after-checked-color: $white-color;
$sb-checkbox-before-checked-background-color: $white-color;
$sb-radio-btn-border-color: $primary-300;

.sb-checkbox,
.sb-radio-btn-checkbox {
  position: relative;
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  outline: 0;
  font-style: normal;
  line-height: ($base-block-space * 2);
  min-height: ($base-block-space * 2);
  min-width: ($base-block-space * 2);

  label {
    cursor: pointer;
    position: relative;
    display: block;
    padding-left: ($base-block-space * 3);
    outline: 0;
    font-size: $sb-checkbox-label-font-size;
    font-weight: normal;
    margin-right: $base-block-space;
  }

  label:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: ($base-block-space * 2);
    height: ($base-block-space * 2);
    background: $sb-checkbox-before-checked-background-color;
    transition: border .1s ease, opacity .1s ease, transform .1s ease, box-shadow .1s ease, -webkit-transform .1s cubic-bezier(0.25, 0.1, 0.43, 0.82);
    border: $sb-checkbox-border-width solid $sb-radio-btn-border-color;
  }

  input[type="radio"],
  input[type="checkbox"] {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 3;
    width: $base-block-space * 2;
    height: $base-block-space * 2;
  }

  [disabled="disabled"]+label,
  input[disabled="disabled"] {
    opacity: $sb-radio-btn-disabled-opacity;
    cursor: not-allowed;
  }

  [disabled="disabled"]:checked+label:before,
  &[disabled="disabled"]:not(:checked)+label:before {
    border: $sb-radio-btn-border solid $sb-radio-btn-border-disabled-color;
    opacity: $sb-radio-btn-disabled-opacity;
  }
}

.sb-checkbox {

  &.sb-checkbox-primary {
    input:checked~label:before {
      background-color: $sb-checkbox-primary-background;
      border-color: $sb-radio-btn-primary-border;
    }
  }

  &.sb-checkbox-secondary {
    input:checked~label:before {
      background-color: $sb-checkbox-secondary-background;
      border-color: $sb-radio-btn-secondary-border;
    }
  }

  &.sb-checkbox-warning {
    input:checked~label:before {
      background-color: $sb-checkbox-warning-background;
      border-color: $sb-radio-btn-warning-border;
    }
  }

  &.sb-checkbox-error {
    input:checked~label:before {
      background-color: $sb-checkbox-error-background;
      border-color: $sb-radio-btn-error-border;
    }
  }

  input:checked~label:before {
    background-color: $sb-checkbox-primary-background;
    border-color: $sb-radio-btn-primary-border;
  }

  label:before {
    border-radius: $sb-checkbox-border-radius;
  }

  label:after {
    position: absolute;
    font-size: $sb-checkbox-label-font-size;
    top: 0;
    left: 0;
    width: ($base-block-space * 2);
    height: ($base-block-space * 2);
    text-align: center;
    opacity: 0;
    // background-color: $sb-checkbox-background-color;
    color: $sb-checkbox-after-checked-color;
    transition: border .1s ease, opacity .1s ease, transform .1s ease, box-shadow .1s ease, -webkit-transform .1s ease;
  }

  input:checked~.box:after,
  input:checked~label:after {
    opacity: 1;
  }

  input:checked~.box:after,
  input:checked~label:after {
    content: '\2713';
    border-radius: $sb-checkbox-border-radius;
    font-weight: normal;
  }

  input[type=checkbox] {
    outline: 0;
  }

}

.sb-radio-btn-checkbox {

  &.sb-radio-btn-primary {
    label:before {
      border: 1px solid $sb-radio-btn-primary-border;
    }

    input:checked~label:after {
      background-color: $sb-checkbox-primary-background;
    }
  }

  &.sb-radio-btn-secondary {
    label:before {
      border: 1px solid $sb-radio-btn-secondary-border;
    }

    input:checked~label:after {
      background-color: $sb-checkbox-secondary-background;
    }
  }

  &.sb-radio-btn-warning {
    label:before {
      border: 1px solid $sb-radio-btn-warning-border;
    }

    input:checked~label:after {
      background-color: $sb-checkbox-warning-background;
    }

  }

  &.sb-radio-btn-error {
    label:before {
      border: 1px solid $sb-radio-btn-error-border;
    }

    input:checked~label:after {
      background: $sb-checkbox-error-background;
    }
  }

  label:before {
    border-radius: 50%;
  }

  label:after {
    position: absolute;
    left: $base-block-space/2;
    top: $base-block-space/2;
    border-radius: 50%;
    height: $base-block-space;
    width: $base-block-space;
    opacity: 0;
  }

  input:checked~label:after {
    content: '';
    background: $sb-checkbox-primary-background;
    opacity: 1;
  }
}

.sb-chapterlist-modal {

  .sb-checkbox label,
  .sb-radio-btn-checkbox label {
    padding-left: 0;
    padding-right: 24px;
    margin-bottom: 0;
  }

  .sb-checkbox label:before {
    left: unset;
    right: 0;
  }

  .sb-radio-btn-checkbox label {
    &:before {
      left: unset;
      right: 0;
    }

    &:after {
      left: unset;
      right: 4px;
    }
  }

  .chapter-lists--item {
    .sb-radio-btn-checkbox label {

      &::before,
      &::after {
        top: 50%;
        transform: translateY(-50%);
      }

      &::before {
        right: 16px;
      }

      &::after {
        right: 20px;
      }
    }
  }
}

.ui.checkbox {
  font-size:14px;
}

[dir="rtl"] {
  .sb-radio-btn-checkbox label {
    padding-left: 0;
    padding-right: ($base-block-space * 3);

    &::before {
      left: unset;
      right: 0;
    }
    
    &::after {
      left: unset;
      right: 4px;
    }
  }
}