@import "../lib.less";

.@{veui-prefix}-checkbox {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: @dls-checkbox-font-color;
  cursor: pointer;
  .make-size(@dls-checkbox-font-size-m);

  .make-size(@font-size) {
    font-size: @font-size;
    line-height: dls-even(dls-line-height(@dls-line-height-1, @font-size));
  }

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

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

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

    .@{veui-prefix}-icon {
      .absolute(50%, _, _, 50%);
      margin: auto;
      .dls-icon-size(@dls-checkbox-icon-size, @dls-checkbox-icon-min-size);
      transform: translate(-50%, -50%) scale(1.25);
      .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: @dls-checkbox-border-color-hover;
    background-color: @dls-checkbox-background-color-hover;
    color: @dls-checkbox-foreground-color-hover;
  }

  & .focus-visible + &-box {
    .dls-focus-ring(
      @dls-checkbox-border-color-focus,
      @dls-checkbox-shadow-focus
    );
    background-color: @dls-checkbox-background-color-focus;
    color: @dls-checkbox-foreground-color-focus;
  }

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

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

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

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

  & :checked.focus-visible + &-box,
  & :indeterminate.focus-visible + &-box {
    border-color: @dls-checkbox-border-color-checked-focus;
    background-color: @dls-checkbox-background-color-checked-focus;
  }

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

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

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

  &[ui~="s"] {
    .make-size(@dls-checkbox-font-size-s);

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