@use 'sass:math';

@import '../../lib/commonStyles/colors.scss';
@import '../../lib/commonStyles/full-size.scss';
@import '../../lib/commonStyles/fonts.scss';

$circle: 14px;
$baseSize: $circle + 2px;

.item {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.checkButton {
  height: $baseSize;
  width: $baseSize;
  margin-right: $circle;
  position: relative;
  display: inline-block;
  &:before {
    height: $circle;
    width: $circle;
    border: 1px solid $silver;
    border-radius: math.div($baseSize, 2);
    position: absolute;
    content: '';
    box-sizing: content-box;
  }
}

.disabled {
  .checkButton {
    &:before {
      background-color: $gray;
      border: 1px solid $gray;
    }
  }
  .text {
    color: $smoke;
  }
}

.selectedCheckButton {
  &:before {
    border-color: $primary-color;
  }
  &:after {
    position: absolute;
    left: math.div($baseSize, 4);
    top: math.div($baseSize, 4);
    height: math.div($baseSize, 2);
    width: math.div($baseSize, 2);
    border-radius: math.div($baseSize, 4);
    background-color: $primary-color;
    content: '';
  }
}

.text {
  display: inline-block;
  font-size: 13px;
  color: $ash;
}

// type checkbox
.checkboxWrapper {
  color: $ash;
  cursor: pointer;
  line-height: 14px;
  font-size: $tertiary-font-size;

  &.wrapperDisabled {
    cursor: default;
    color: rgba(0, 0, 0, 0.38);
  }

  .checkbox {
    width: 14px;
    height: 14px;
    color: $snow;
    text-align: center;
    user-select: none;
    background: transparent;
    border: solid 1px $smoke;
    margin-right: 8px;
    display: inline-block;

    &.checked {
      background: $primary-color;
      border-color: $primary-color;
    }

    &.checkboxDisabled {
      cursor: not-allowed;
      background-color: transparent;
      border-color: $smoke;
    }

    &.checked.checkboxDisabled {
      cursor: not-allowed;
      background-color: $smoke;
      border-color: $smoke;
    }
  }
}