@import "../global.less";

/* Metrics */
@veui-tag-height-xs: @veui-height-unit * 5;
@veui-tag-height-s: @veui-height-unit * 6;
@veui-tag-height-m: @veui-height-unit * 7;
@veui-tag-height-l: @veui-height-unit * 8;

@veui-tag-padding: @veui-padding-unit * 2;
@veui-tag-content-spacing: @veui-padding-unit;
@veui-tag-list-spacing: @veui-padding-unit * 1;

@veui-tag-font-size-xs: @veui-font-size-s;
@veui-tag-font-size-s: @veui-font-size-s;
@veui-tag-font-size-m: @veui-font-size-m;
@veui-tag-font-size-l: @veui-font-size-m;

// Close icon
// interactive styles are the same as icon buttons
@veui-tag-icon-size-aux: @veui-icon-size-aux;

/* Colors */
@veui-tag-font-color: @veui-font-color-normal;
@veui-tag-font-color-hover: @veui-font-color-strong;
@veui-tag-font-color-simple-hover: @veui-font-color-highlighted;
@veui-tag-font-color-disabled: @veui-font-color-disabled;
@veui-tag-background-color: @veui-color-gray-3;
@veui-tag-background-color-simple: @veui-background-color-normal;
@veui-tag-background-color-simple-active: @veui-color-info-2;
@veui-tag-background-color-hover: @veui-color-gray-4;
@veui-tag-background-color-disabled: @veui-background-color-disabled;
@veui-tag-border-color: @veui-color-gray-5;
@veui-tag-border-color-simple-hover: @veui-border-color-focus;
@veui-tag-border-color-focus: @veui-border-color-focus;
@veui-tag-border-color-disabled: @veui-border-color-disabled;
@veui-tag-shadow-focus: @veui-shadow-focus;

@veui-tag-font-color-selected: @veui-color-gray-1;
@veui-tag-background-color-selected: @veui-color-brand-6;
@veui-tag-background-color-simple-selected: @veui-background-color-normal-focus;
@veui-tag-background-color-selected-hover: @veui-color-info-5;
@veui-tag-background-color-selected-active: @veui-color-info-7;
@veui-tag-background-color-selected-disabled: @veui-color-brand-2;
@veui-tag-border-color-selected: transparent;
@veui-tag-border-color-selected-focus: @veui-border-color-focus;
@veui-tag-border-color-selected-disabled: transparent;
@veui-tag-shadow-selected-focus: @veui-shadow-focus;

@veui-tag-font-color-add: @veui-color-brand-6;

// Contextual tags
@veui-tag-font-color-info: @veui-color-info-6;
@veui-tag-font-color-info-disabled: @veui-color-info-3;
@veui-tag-background-color-info: @veui-color-info-1;
@veui-tag-border-color-info: @veui-color-info-4;
@veui-tag-border-color-info-disabled: @veui-color-info-2;

@veui-tag-font-color-success: @veui-color-success-6;
@veui-tag-font-color-success-disabled: @veui-color-success-3;
@veui-tag-background-color-success: @veui-color-success-1;
@veui-tag-border-color-success: @veui-color-success-4;
@veui-tag-border-color-success-disabled: @veui-color-success-2;

@veui-tag-font-color-warning: @veui-color-warning-6;
@veui-tag-font-color-warning-disabled: @veui-color-warning-3;
@veui-tag-background-color-warning: @veui-color-warning-1;
@veui-tag-border-color-warning: @veui-color-warning-4;
@veui-tag-border-color-warning-disabled: @veui-color-warning-2;

@veui-tag-font-color-error: @veui-color-error-6;
@veui-tag-font-color-error-disabled: @veui-color-error-3;
@veui-tag-background-color-error: @veui-color-error-1;
@veui-tag-border-color-error: @veui-color-error-4;
@veui-tag-border-color-error-disabled: @veui-color-error-2;

@veui-tag-font-color-remove-hover: @veui-font-color-aux;
@veui-tag-font-color-remove-focus: @veui-font-color-aux;
@veui-tag-font-color-remove-active: @veui-font-color-normal;

// Reversed tags, same as selected contextual tags
// Fixed font color, no border (transparent)
@veui-tag-font-color-reversed: @veui-color-gray-1;

@veui-tag-background-color-info-reversed: @veui-color-info-6;
@veui-tag-background-color-info-reversed-disabled: @veui-color-info-2;
@veui-tag-background-color-success-reversed: @veui-color-success-6;
@veui-tag-background-color-success-reversed-disabled: @veui-color-success-2;
@veui-tag-background-color-warning-reversed: @veui-color-warning-6;
@veui-tag-background-color-warning-reversed-disabled: @veui-color-warning-2;
@veui-tag-background-color-error-reversed: @veui-color-error-6;
@veui-tag-background-color-error-reversed-disabled: @veui-color-error-2;

// Interactive styles
@veui-tag-opacity-hover: 0.8;