@import "colors";

/**
	Note: If you rename a variable here, make sure it is also renamed in other themes (theme-*)
**/

@textColor: @primaryNeutralColor; 
@secondaryTextColor: @secondaryNeutralColor;

//deprecated legacy variables
/*
@primaryColor: #5dc1d5;
@secondaryColor: #465861;
@tertiaryColor: @neutralSemanticColor;
@successColor: #81a773;
@warningColor: @warningSemanticColor;
@dangerColor: #ea6555;
@disabledColor: #969696;
*/

//mapping legacy variables to new design system variables
@primaryColor: @infoSemanticColor; 
@secondaryColor: @primaryActionColor;
@tertiaryColor: @neutralSemanticColor;
@successColor: @positiveSemanticColor; 
@warningColor: @warningSemanticColor;
@dangerColor: @negativeSemanticColor; 
@disabledColor: @tertiaryNeutralColor;

@disabledLightColor: @tertiaryBrandColor;
@muteColor: @secondaryNeutralColor--light;
@inactiveColor: @secondaryNeutralColor--light;
@fadedColor: @secondaryNeutralColor--light;
@closeColor: @secondaryActionColor;
@placeholderColor: @secondaryNeutralColor;

@primaryBackgroundColor: @primaryNeutralColor--light;
@secondaryBackgroundColor: @tertiaryBrandColor;
@invertedBackgroundColor: @secondaryBrandColor;
@disabledBackgroundColor: @secondaryNeutralColor--light;
@tertiaryBackgroundColor: @secondaryBrandColor--light;

@initialColor: @secondaryNeutralColor;

@primaryBorderColor: @secondaryNeutralColor--light;
@secondaryBorderColor: @tertiaryNeutralColor;

//deprecated
@pressedBackgroundColor: #e1f2f6;
@activeBackgroundColor: #f2f2f2;
@focusBackgroundColor: #f7fcfd;
@availableColor: @warningSemanticColor;
@activatedColor: @positiveSemanticColor;
@focusBorderColor: #b6e0e8;

// Border
@primaryBorderWidth: 1px;
@primaryBorderRadius: 6px;
@secondaryBorderRadius: 3px;

// Grid
@gridSpacing: 24px;
@gridBaseUnit: 6px;
@gridVerticalUnit: @gridBaseUnit;

@primaryBoxSizing: border-box;

@primaryMargin: 12px;
@primaryMargin--xxs: @primaryMargin / 4;
@primaryMargin--xs: @primaryMargin / 3;
@primaryMargin--sm: @primaryMargin / 2;
@primaryMargin--lg: @primaryMargin * 2;
@primaryMargin--xl: @primaryMargin * 3;
@primaryMargin--xxl: @primaryMargin * 4;

@primaryPadding: 12px;
@primaryPadding--xxs: @primaryPadding / 4;
@primaryPadding--xs: @primaryPadding / 3;
@primaryPadding--sm: @primaryPadding / 2;
@primaryPadding--lg: @primaryPadding * 2;
@primaryPadding--xl: @primaryPadding * 3;
@primaryPadding--xxl: @primaryPadding * 4;

@primaryAnimationCurve: cubic-bezier(0.24, 0.63, 0.51, 0.81);
@primaryAnimationTime: 1s;
@primaryAnimationTimeQuick: .2s;
@primaryAnimation: @primaryAnimationTime @primaryAnimationCurve;
@primaryBoxShadow: 0 0 10px rgba(0, 0, 0, 0.05);
@secondaryBoxShadow: 0 2px 4px rgba(0, 0, 0, 0.12);
@tertiaryBoxShadow: 0 1px 2px 0 rgba(0,0,0,0.12);

@primaryLineHeight--xxs: 12px;
@primaryLineHeight--xs: 14px;
@primaryLineHeight--sm: 18px;
@primaryLineHeight: 24px;
@primaryLineHeight--lg: 30px;
@primaryLineHeight--xl: 42px;
@primaryLineHeight--xxl: 48px;

@primaryFocusOutlineColor: @primaryActionColor;
@primaryFocusOutlineOffset: 4px;

//Used for elements like buttons, form inputs, select menus etc
@elementLineHeight--xxs: 30px;
@elementLineHeight--xs: 36px;
@elementLineHeight--sm: 42px;
@elementLineHeight: 48px;
@elementLineHeight--lg: 54px;
@elementLineHeight--xl: 60px;
@elementLineHeight--xxl: 66px;

@elementFontSize--xxs: @primaryFontSize--xs;
@elementFontSize--xs: @primaryFontSize--sm;
@elementFontSize--sm: @primaryFontSize--sm;
@elementFontSize: @primaryFontSize;
@elementFontSize--lg: 18px;
@elementFontSize--xl: 24px;
@elementFontSize--xxl: 30px;

@primaryFontFamily: 'gotham', Arial, Tahoma, Verdana, Helvetica, Sans-Serif;

@primaryFontSize: 14px;
@primaryFontSize--xxs: 8px;
@primaryFontSize--xs: 10px;
@primaryFontSize--sm: 12px;
@primaryFontSize--lg: 16px;
@primaryFontSize--xl: 20px;
@primaryFontSize--xxl: 30px;

@primaryHeadingSize: 18px;
@primaryHeadingSize--xxs: 10px;
@primaryHeadingSize--xs: 12px;
@primaryHeadingSize--sm: 16px;
@primaryHeadingSize--lg: 20px;
@primaryHeadingSize--xl: 24px;
@primaryHeadingSize--xxl: 30px;

//<Heading /> component
@heading--one-size: @primaryHeadingSize--xl;
@heading--two-size: @primaryHeadingSize--lg;
@heading--three-size: @primaryFontSize;
@heading--four-size: @primaryHeadingSize--xs;
@heading--five-size: 8px;
@heading--six-size: 6px;

@screenMaxSize: 1600px;
@maxWidth: 984px;
@minWidth: 360px;

// icon variables
@icon-size: 18px;
@icon--xxs-size: 10px;
@icon--xs-size: 12px;
@icon--sm-size: 16px;
@icon--lg-size: 24px;
@icon--xl-size: 30px;
@icon--xxl-size: 36px;

@icon-color: @textColor;

@icon-actions-family: 'MeniconActions';
@icon-categories-family: 'MeniconCategories';
@icon-empty-line: "\ea5a";
@icon-empty-solid: "\ea5b";
@icon-up-line: "\eac2";
@icon-up-solid: "\eac3";
@icon-down-line: "\ea4e";
@icon-down-solid: "\ea4f";
@icon-right-line: "\eaa6";
@icon-right-solid: "\eaa7";
@icon-right-fill: "\e91d";
@icon-left-line: "\ea6b";
@icon-left-solid: "\ea6c";
@icon-left-fill: "\e91c";
@icon-exclude-line: "\e940";
@icon-exclude-solid: "\e941";
@icon-languages-line: "\e9c3";

@checkbox-size: 18px;
@checkbox-icon-border-width: 2px;

// Breakpoints for Sidebar and AppNavigation

// phablet
@grid-phablet-minWidth: 360px;
// small tablet
@grid-tabletSmall-minWidth: 768px;
// tablet
@grid-tablet-minWidth: 1024px;
// desktop
@grid-desktop-minWidth: 1280px;
// wide desktop
@grid-desktopWide-minWidth: 1440px;
// ultra desktop
@grid-desktopUltra-minWidth: 2000px;

// Max width for each breakpoint
@grid-phone-maxWidth: (@grid-phablet-minWidth - 1);
@grid-phablet-maxWidth: (@grid-tabletSmall-minWidth - 1);
@grid-tabletSmall-maxWidth: (@grid-tablet-minWidth - 1);
@grid-tablet-maxWidth: (@grid-desktop-minWidth - 1);
@grid-desktop-maxWidth: (@grid-desktopWide-minWidth - 1);
@grid-desktopWide-maxWidth: (@grid-desktopUltra-minWidth - 1);


// Sidebar width

@appNavigation-width: 228px;
@appNavigation-width--mobile: 60px;
@appSidebar-transitionDuration: 200ms;
@appNavigation-color: @brandActionColor;
