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

:root,
:host {
  --xzx-checkbox-size: 24px;
  --xzx-checkbox-icon-size: 21px;
  --xzx-checkbox-border-color: var(--xzx-gray-4);
  --xzx-checkbox-duration: 0.2s;
  --xzx-checkbox-margin: 12px;
  --xzx-checkbox-label-margin: 8px;
  --xzx-checkbox-border-width: 1.5px;
  --xzx-checkbox-label-color: var(--xzx-text-gray-1);
  --xzx-checkbox-checked-icon-color: var(--xzx-color-primary);
  --xzx-checkbox-disabled-icon-color: var(--xzx-gray-4);
  --xzx-checkbox-disabled-label-color: var(--xzx-text-gray-4);
  --xzx-checkbox-disabled-background: var(--xzx-gray-2);
}

@include b(checkbox-group) {
  @include m(horizontal) {
    display: flex;
    flex-wrap: wrap;
  }
}

@include b(checkbox) {
  display: flex;
  // align-items: center;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;

  @include m(disabled) {
    cursor: not-allowed;
  }

  @include m(label-disabled) {
    cursor: default;
  }

  @include m(horizontal) {
    margin-right: var(--xzx-checkbox-margin);
  }

  @include e(icon) {
    flex: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--xzx-checkbox-size);
    height: var(--xzx-checkbox-size);
    font-size: var(--xzx-checkbox-icon-size);
    flex-shrink: 0;

    .#{$namespace}-icon {
      box-sizing: border-box;
      color: transparent;
      text-align: center;
      border: var(--xzx-checkbox-border-width) solid
        var(--xzx-checkbox-border-color);
      transition-duration: var(--xzx-checkbox-duration);
      transition-property: color, border-color, background-color;
      path {
        stroke-width: 3px;
      }
    }
    @include m(round) {
      .#{$namespace}-icon {
        padding: 2px;
        border-radius: 100%;
      }
    }
    @include m(square) {
      .#{$namespace}-icon {
        border-radius: var(--xzx-br-sm);
      }
    }
    @include m(indeterminate) {
      .#{$namespace}-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--xzx-text-white-1);
        border-color: var(--xzx-checkbox-checked-icon-color);
        background-color: var(--xzx-checkbox-checked-icon-color);
      }
    }
    @include m(checked) {
      --xzx-checkbox-disabled-icon-color: var(--xzx-brand-3);
      --xzx-checkbox-disabled-background: var(--xzx-brand-3);
      .#{$namespace}-icon {
        color: var(--xzx-text-white-1);
        background-color: var(--xzx-checkbox-checked-icon-color);
        border-color: var(--xzx-checkbox-checked-icon-color);
      }
    }
    @include m(disabled) {
      cursor: not-allowed;
      .#{$namespace}-icon {
        background-color: var(--xzx-checkbox-disabled-background);
        border-color: var(--xzx-checkbox-disabled-icon-color);
      }
      &.#{$namespace}-checkbox__icon--checked {
        .#{$namespace}-icon {
          // color: var(--xzx-checkbox-disabled-icon-color);
        }
      }
    }
  }
  @include e(label) {
    margin-left: var(--xzx-checkbox-label-margin);
    color: var(--xzx-checkbox-label-color);
    line-height: var(--xzx-checkbox-size);
    @include m(left) {
      margin: 0 var(--xzx-checkbox-label-margin) 0 0;
    }
    @include m(disabled) {
      color: var(--xzx-checkbox-disabled-label-color);
    }
  }
}