@import "../global.less";

/* Metrics */
@veui-menu-width: 200px;
@veui-menu-width-collapsed: 60px;

@veui-menu-font-size-s: @veui-font-size-s;
@veui-menu-font-size-m: @veui-font-size-m;
@veui-menu-font-size-l: @veui-font-size-l;

@veui-menu-item-height-s: @veui-height-unit * 7;
@veui-menu-item-height-m: @veui-height-unit * 8;
@veui-menu-item-height-l: @veui-height-unit * 9;

@veui-menu-padding-x: @veui-padding-unit * 5;
@veui-menu-padding-y: 0;
@veui-menu-item-spacing: @veui-padding-unit * 2;
@veui-menu-item-content-spacing: @veui-padding-unit * 2;
@veui-menu-level-indent: @veui-padding-unit * 4;

@veui-menu-footer-height-s: @veui-menu-footer-height-m;
@veui-menu-footer-height-m: @veui-height-unit * 13;
@veui-menu-footer-height-l: @veui-menu-footer-height-m;
@veui-menu-footer-height-half: @veui-height-unit * 6.5;
@veui-menu-footer-width-half: @veui-height-unit * 3;
@veui-menu-footer-border-radius: @veui-border-radius-m * 6;
@veui-menu-footer-right-padding: @veui-height-unit / 2;
@veui-menu-footer-collapsed-right-padding: @veui-height-unit / 4;
@veui-menu-footer-padding: @veui-height-unit * 5;

@veui-menu-item-icon-size: @veui-icon-size-normal;
@veui-menu-item-icon-size-aux: @veui-icon-size-aux;

/* Colors */
@veui-menu-border-color: @veui-border-color-normal; // left border
@veui-menu-separator-color: @veui-border-color-normal; // internal horizontal separator

@veui-menu-item-font-color: @veui-font-color-normal;
@veui-menu-item-font-color-hover: @veui-color-brand-5;
@veui-menu-item-font-color-focus: @veui-menu-item-font-color-hover;
@veui-menu-item-font-color-active: @veui-color-brand-7;
@veui-menu-item-font-color-disabled: @veui-font-color-disabled;

@veui-menu-item-group-label-font-color: @veui-font-color-normal;
@veui-menu-item-group-label-font-weight: @veui-font-weight-2;

@veui-menu-item-background-color: @veui-background-color-normal;
@veui-menu-item-background-color-hover: @veui-color-brand-1;
@veui-menu-item-background-color-focus: @veui-color-brand-2;
@veui-menu-item-background-color-active: @veui-color-brand-2;

@veui-menu-item-font-color-current: @veui-color-brand-6;
@veui-menu-item-font-color-current-hover: @veui-color-brand-6;
@veui-menu-item-font-color-current-focus: @veui-menu-item-font-color-current-hover;
@veui-menu-item-font-color-current-active: @veui-color-brand-7;

@veui-menu-item-background-color-current: @veui-color-brand-1;
@veui-menu-item-background-color-current-hover: @veui-color-brand-1;
@veui-menu-item-background-color-current-focus: @veui-color-brand-1;
@veui-menu-item-background-color-current-active: @veui-color-brand-2;

@veui-menu-item-font-weight-current: @veui-font-weight-2;

/* Indicators */
@veui-menu-indicator-color: @veui-menu-item-font-color-current;
@veui-menu-indicator-color-hover: @veui-menu-item-font-color-current-hover;
@veui-menu-indicator-color-focus: @veui-menu-item-font-color-current-focus;
@veui-menu-indicator-color-active: @veui-menu-item-font-color-current-active;

@veui-menu-indicator-width: 2px;
@veui-menu-overlay-border-radius-l: @veui-border-radius-l;


/**
 * Horizontal menu-----Nav component
 */
@veui-menu-font-size-horizontal-s: @veui-font-size-m;
@veui-menu-font-size-horizontal-m: @veui-font-size-l;

@veui-menu-item-height-horizontal-s: @veui-height-unit * 11;
@veui-menu-item-height-horizontal-m: @veui-height-unit * 12;
@veui-menu-item-padding-x-horizontal: @veui-padding-unit * 4;
@veui-menu-item-padding-x-horizontal-m: @veui-padding-unit * 5;
@veui-menu-item-spacing-horizontal: @veui-padding-unit * 6;
@veui-menu-item-spacing-horizontal-m: @veui-padding-unit * 8;

@veui-menu-border-color-horizontal: @veui-border-color-normal;

@veui-menu-item-icon-horizontal-s: 10px;
@veui-menu-item-icon-horizontal-m: 12px;

@veui-menu-item-font-color-horizontal: @veui-font-color-normal;
@veui-menu-item-font-color-horizontal-hover: @veui-color-brand-5;
@veui-menu-item-font-color-horizontal-focus: @veui-menu-item-font-color-horizontal-hover;
@veui-menu-item-font-color-horizontal-active: @veui-color-brand-7;
@veui-menu-item-font-color-horizontal-disabled: @veui-font-color-disabled;
@veui-menu-item-font-color-horizontal-current-disabled: @veui-color-brand-5;

@veui-menu-item-background-color-horizontal: @veui-background-color-normal;
@veui-menu-item-background-color-horizontal-hover: @veui-background-color-normal-focus;
@veui-menu-item-background-color-horizontal-focus: @veui-background-color-normal-focus;
@veui-menu-item-background-color-horizontal-active: @veui-color-brand-2;
@veui-menu-item-background-color-horizontal-disabled: @veui-background-color-disabled;

@veui-menu-item-font-color-horizontal-current: @veui-color-brand-6;
@veui-menu-item-font-color-horizontal-current-hover: @veui-color-brand-5;
@veui-menu-item-font-color-horizontal-current-focus: @veui-menu-item-font-color-horizontal-current-hover;
@veui-menu-item-font-color-horizontal-current-active: @veui-color-brand-7;

@veui-menu-item-background-color-horizontal-current: @veui-background-color-normal;
@veui-menu-item-background-color-horizontal-current-hover: @veui-menu-item-background-color-horizontal-current;
@veui-menu-item-background-color-horizontal-current-focus: @veui-background-color-normal-focus;
@veui-menu-item-background-color-horizontal-current-active: @veui-menu-item-background-color-horizontal-current;

 /* Dropdown card */
@veui-menu-card-background-color: @veui-background-color-normal;
@veui-menu-card-border-radius-m: @veui-border-radius-m;
@veui-menu-card-padding-x: @veui-padding-unit * 6;
@veui-menu-card-padding-y: @veui-padding-unit * 6;
@veui-menu-card-column-spacing: @veui-padding-unit * 12;
@veui-menu-card-target-spacing: @veui-padding-unit * 1;

@veui-menu-card-title-font-color: @veui-font-color-strong;
@veui-menu-card-title-font-size-m: @veui-font-size-m;
@veui-menu-card-title-font-weight: @veui-font-weight-2;

 // Use Link for items
@veui-menu-card-item-spacing: @veui-padding-unit * 4;
@veui-menu-card-item-font-size-m: @veui-font-size-m;
@veui-menu-card-item-icon-size: @veui-icon-size-normal;

// primary horizontal
@veui-menu-item-font-color-horizontal-primary: @veui-color-gray-1;

@veui-menu-item-background-color-horizontal-primary: @veui-color-brand-6;
@veui-menu-item-background-color-hover-horizontal-primary: @veui-color-brand-5;
@veui-menu-item-background-color-active-horizontal-primary: @veui-color-brand-7;