@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-chekbox-size: 40px !default;
$ink-checkbox-margin: $ink-spacing-xs !default; // CheckboxGroup 下 Checkbox 之间间距
$ink-checkbox-border-color: $ink-color-grey-3 !default;
$ink-checkbox-label-color: $ink-color-text !default;
$ink-checkbox-label-font-size: $ink-font-size-lg !default;
$ink-checkbox-label-margin: $ink-spacing-sm !default;
$ink-checkbox-icon-checked-color: $ink-color-white !default;
$ink-checkbox-icon-checked-bg-color: $ink-color-brand !default;
$ink-checkbox-disabled-opacity: $ink-opacity-disabled !default;

.ink-checkbox-group {
  .ink-checkbox + .ink-checkbox {
    margin-top: $ink-checkbox-margin;
  }
}

.ink-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;

  &__label {
    display: inline-flex;
    color: $ink-checkbox-label-color;
    font-size: $ink-checkbox-label-font-size;
    line-height: $ink-chekbox-size;
    text-align: left;
    padding-left: $ink-checkbox-label-margin;
  }

  &__icon-cnt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: $ink-chekbox-size;
    height: $ink-chekbox-size;
    color: transparent;
    line-height: 1;
    border: $ink-one-px solid $ink-checkbox-border-color;
    border-radius: $ink-border-radius-circle;
    box-sizing: border-box;
    transition: all $ink-animation-duration-fast;
    background-color: transparent;
  }

  &__icon {
    font-size: $ink-chekbox-size * 0.6;
  }

  &--disabled {
    .ink-checkbox__icon-cnt,
    .ink-checkbox__label {
      opacity: $ink-checkbox-disabled-opacity;
    }
  }

  &--selected {
    .ink-checkbox__icon-cnt {
      border: none;
      background-color: $ink-checkbox-icon-checked-bg-color;
    }
    .ink-checkbox__icon {
      color: $ink-checkbox-icon-checked-color;
    }
  }
}