@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/mixins.scss';

$class-prefix: 'cn-ui-m';

@keyframes #{$class-prefix}-checkbox-blink {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.#{$hashClassName} {
  &.#{$class-prefix}-checkbox-container {
    @include flex(row, flex-start, center);
    box-sizing: border-box;

    &--large {
      padding: $m-s-8 0;
    }
    &--medium,
    &--small {
      padding: $m-s-7 0;
    }

    .#{$class-prefix}-checkbox {
      &-item--hoz {
        margin-right: $m-s-24;
      }

      &-circle {
        @include flex(row, center, center);
        border-radius: $m-s-4;
        border-width: $m-line;
        border-style: solid;
        box-sizing: border-box;
        border-color: $m-color-bg;
        transition: all 0.1s ease;

        &--selected {
          background-color: $m-color-primary;
          border-color: $m-color-primary;
        }

        &--unselected-indeterminate {
          background-color: $m-color-primary;
          border-width: 0;
        }

        &--unselected-disabled {
          border-color: $m-color-bg-light;
          background-color: $m-color-bg-disabled;
        }

        &--selected-disabled {
          border-color: $m-color-bg-light;
          background-color: $m-color-bg-disabled;
        }

        &--unselected-indeterminate-disabled {
          border-color: $m-color-bg-light;
          background-color: $m-color-bg-disabled;
          border-width: $m-line;
        }
      }

      &-icon {
        &--selected {
          transform: scale(1);
          color: $m-color-bg-white;
          animation: #{$class-prefix}-checkbox-blink 0.1s ease;
        }

        &--selected-disabled {
          color: $m-color-text-disabled;
        }

        &--unselected-indeterminate {
          color: $m-color-bg-white;
        }

        &--unselected-indeterminate-disabled {
          color: $m-color-text-disabled;
        }
      }

      &-text {
        flex: 1;
        color: $m-color-text;
        line-height: $m-font-lineheight-2;

        &--selected {
          color: $m-color-text;
        }

        &--unselected-indeterminate {
          color: $m-color-text;
        }

        &--unselected-disabled {
          color: $m-color-text-disabled;
        }

        &--selected-disabled {
          color: $m-color-text-disabled;
        }

        &--unselected-indeterminate-disabled {
          color: $m-color-text-disabled;
        }
      }

      &-circle--large {
        height: $m-s-24;
        width: $m-s-24;
      }

      &-circle--medium {
        height: $m-s-18;
        width: $m-s-18;
      }

      &-circle--small {
        height: $m-s-14;
        width: $m-s-14;
      }

      // 文字
      &-text--large {
        font-size: $m-font-size-headline-6;
        margin-left: $m-s-16;
      }
      &-text--medium {
        font-size: $m-font-size-body-1;
        margin-left: $m-s-12;
      }
      &-text--small {
        font-size: $m-font-size-caption;
        margin-left: $m-s-8;
      }
    }
  }

  &.#{$class-prefix}-checkbox-item--tag {
    background-color: $m-color-bg-disabled;
    padding: $m-s-3 $m-s-11;
    border-radius: $m-s-4;
    border: $m-line solid transparent;
    &.#{$class-prefix}-checkbox-container--large {
      margin: $m-s-8 0;
    }
    &.#{$class-prefix}-checkbox-container--medium,
    &.#{$class-prefix}-checkbox-container--small {
      margin: $m-s-7 0;
    }
    .#{$class-prefix}-checkbox {
      flex-grow: 0;
      flex-shrink: 0;
      color: $m-color-text-title3;
      padding: $m-s-3 $m-s-11;
      &-circle {
        display: none;
      }
      &-text--large {
        font-size: $m-font-size-headline-6;
        margin-left: 0;
      }
      &-text--medium {
        font-size: $m-font-size-body-1;
        margin-left: 0;
      }
      &-text--small {
        font-size: $m-font-size-caption;
        margin-left: 0;
      }
    }
    &.#{$class-prefix}-checkbox-container--tag--selected {
      background-color: $m-color-secondary-lightest;
      border: $m-s-1 solid $m-color-primary;
      .#{$class-prefix}-checkbox {
        &-text {
          color: $m-color-primary;
        }
      }
    }
  }
}