@import "../lib.less";
@import "../variables/components/checkbox.less";

.@{veui-prefix}-checkbox {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: @veui-checkbox-font-color;
  cursor: pointer;
  font-size: @veui-checkbox-font-size-m;
  line-height: @veui-checkbox-font-size-m * @veui-line-height-m + 1;

  input {
    position: absolute;
    opacity: 0;
    cursor: inherit;
  }

  &-label,
  &-box {
    .veui-transition(color);
  }

  &-box {
    position: relative;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    .size(@veui-checkbox-size-m);
    margin-right: @veui-checkbox-spacing;
    border: 1px solid @veui-checkbox-border-color;
    background-color: @veui-checkbox-background-color;
    color: @veui-checkbox-foreground-color;
    border-radius: @veui-checkbox-border-radius;
    font-size: @veui-checkbox-font-size-m;
    .veui-transition(border-color, background-color, box-shadow);

    .@{veui-prefix}-icon {
      position: absolute;
      margin: auto;
      .veui-icon-size(@veui-checkbox-icon-size, @veui-checkbox-icon-min-size);
      .veui-position-center();
      .veui-transition(transform, opacity);

      path {
        transform: scale(0.8);
        transform-origin: 50% 50%;
        stroke: currentColor;
        stroke-width: 1px;
      }
    }
  }

  &-icon-enter,
  &-icon-leave-to {
    opacity: 0;
    transform: scale(0.5);
  }

  &:hover &-box {
    border-color: @veui-checkbox-border-color-hover;
    background-color: @veui-checkbox-background-color-hover;
    color: @veui-checkbox-foreground-color-hover;
  }

  & [data-focus-visible-added] + &-box {
    .veui-focus-ring(
      @veui-checkbox-border-color-focus,
      @veui-checkbox-shadow-focus
    );
    background-color: @veui-checkbox-background-color-focus;
    color: @veui-checkbox-foreground-color-focus;
  }

  &:active &-box {
    border-color: @veui-checkbox-border-color-active;
    background-color: @veui-checkbox-background-color-active;
    color: @veui-checkbox-foreground-color-active;
  }

  & :disabled + &-box {
    border-color: @veui-checkbox-border-color-disabled;
    background-color: @veui-checkbox-background-color-disabled;
    color: @veui-checkbox-foreground-color-disabled;
  }

  & :checked + &-box,
  & :indeterminate + &-box {
    border-color: @veui-checkbox-border-color-checked;
    background-color: @veui-checkbox-background-color-checked;
  }

  &:hover :checked + &-box,
  &:hover :indeterminate + &-box {
    border-color: @veui-checkbox-border-color-checked-hover;
    background-color: @veui-checkbox-background-color-checked-hover;
  }

  & :checked[data-focus-visible-added] + &-box,
  & :indeterminate[data-focus-visible-added] + &-box {
    border-color: @veui-checkbox-border-color-checked-focus;
    background-color: @veui-checkbox-background-color-checked-focus;
  }

  &:active :checked + &-box,
  &:active :indeterminate + &-box {
    border-color: @veui-checkbox-border-color-checked-active;
    background-color: @veui-checkbox-background-color-checked-active;
  }

  & :checked:disabled + &-box,
  & :indeterminate:disabled + &-box {
    border-color: @veui-checkbox-border-color-checked-disabled;
    background-color: @veui-checkbox-background-color-checked-disabled;
  }

  &.@{veui-prefix}-disabled {
    cursor: not-allowed;
  }

  &[ui~="s"] {
    font-size: @veui-checkbox-font-size-s;
    line-height: @veui-checkbox-font-size-s * @veui-line-height-m + 2;

    .@{veui-prefix}-checkbox-box {
      .size(@veui-checkbox-size-s);
    }
  }
  &[ui~="l"] {
    font-size: @veui-checkbox-font-size-l;
    line-height: @veui-checkbox-font-size-l * @veui-line-height-m;

    .@{veui-prefix}-checkbox-box {
      .size(@veui-checkbox-size-l);
    }
  }
}