@import "../global.less";
@import "./button.less";

/* Typography */
@veui-checkbox-font-size-s: @veui-font-size-s;
@veui-checkbox-font-size-m: @veui-font-size-m;
@veui-checkbox-font-size-l: @veui-font-size-l;

@veui-checkbox-font-color: @veui-font-color-normal;

/* Metrics */
@veui-checkbox-size-s: veui-sum(@veui-checkbox-font-size-s, 2px);
@veui-checkbox-size-m: veui-sum(@veui-checkbox-font-size-m, 2px);
@veui-checkbox-size-l: veui-sum(@veui-checkbox-font-size-l, 2px);

@veui-checkbox-icon-min-size: 8px;
@veui-checkbox-icon-size: @veui-icon-size-aux;

@veui-checkbox-border-radius: @veui-border-radius-s;

@veui-checkbox-spacing: @veui-padding-unit * 2;

/* Colors */
@veui-checkbox-border-color: @veui-color-gray-6;
@veui-checkbox-border-color-hover: @veui-color-gray-7;
@veui-checkbox-border-color-focus: @veui-border-color-focus;
@veui-checkbox-border-color-active: @veui-color-brand-6;
@veui-checkbox-border-color-disabled: @veui-color-gray-5;

@veui-checkbox-border-color-checked: transparent;
@veui-checkbox-border-color-checked-hover: transparent;
@veui-checkbox-border-color-checked-focus: @veui-border-color-focus;
@veui-checkbox-border-color-checked-active: transparent;
@veui-checkbox-border-color-checked-disabled: transparent;

@veui-checkbox-background-color: @veui-background-color-normal;
@veui-checkbox-background-color-hover: @veui-background-color-normal;
@veui-checkbox-background-color-focus: @veui-background-color-normal;
@veui-checkbox-background-color-active: @veui-background-color-normal;
@veui-checkbox-background-color-disabled: @veui-background-color-disabled;

@veui-checkbox-background-color-checked: @veui-color-brand-6;
@veui-checkbox-background-color-checked-hover: @veui-color-brand-5;
@veui-checkbox-background-color-checked-focus: @veui-color-brand-5;
@veui-checkbox-background-color-checked-active: @veui-color-brand-7;
@veui-checkbox-background-color-checked-disabled: @veui-color-brand-2;

@veui-checkbox-foreground-color: @veui-color-gray-1;
@veui-checkbox-foreground-color-hover: @veui-checkbox-foreground-color;
@veui-checkbox-foreground-color-focus: @veui-checkbox-foreground-color;
@veui-checkbox-foreground-color-active: @veui-checkbox-foreground-color;
@veui-checkbox-foreground-color-disabled: @veui-checkbox-foreground-color;

/* Focus ring */
@veui-checkbox-shadow-focus: @veui-shadow-focus;

/* Strong variant */
@veui-checkbox-strong-check-icon-color: @veui-color-gray-6;
@veui-checkbox-strong-check-icon-color-disabled: @veui-color-gray-5;

@veui-checkbox-strong-check-icon-color-checked: currentColor;
@veui-checkbox-strong-check-icon-color-checked-disabled: currentColor;

@veui-checkbox-strong-check-icon-size: @veui-height-unit * 2;
@veui-checkbox-strong-check-icon-width: @veui-padding-unit * 1.75;
@veui-checkbox-strong-check-icon-height: @veui-padding-unit * 1.5;

/* Checkbox group */
@veui-checkbox-group-spacing: @veui-padding-unit * 8;

/* Checkbox triangle mark */
// Use corresponding border color for the triangle
@veui-checkbox-icon-size-strong: @veui-height-unit * 1.5;
@veui-checkbox-icon-spacing-strong: @veui-padding-unit * 0.5;

@veui-checkbox-font-color-strong-checked: @veui-color-gray-1;
@veui-checkbox-font-color-strong-checked-disabled: @veui-color-gray-1;

@veui-checkbox-border-color-strong-checked: @veui-color-brand-6;
@veui-checkbox-border-color-strong-checked-disabled: @veui-color-brand-2;

@veui-checkbox-background-color-strong-checked: @veui-color-brand-6;
@veui-checkbox-background-color-strong-checked-hover: @veui-color-brand-5;
@veui-checkbox-background-color-strong-checked-focus: @veui-color-brand-5;
@veui-checkbox-background-color-strong-checked-active: @veui-color-brand-7;
@veui-checkbox-background-color-strong-checked-disabled: @veui-color-brand-2;

@veui-checkbox-backgroung-color-checked-disabled: @veui-color-brand-1;
@veui-checkbox-font-color-checked-disabled: @veui-color-brand-3;