//
// Variables
// --------------------------------------------------


// Global values
// --------------------------------------------------


// Grays
// -------------------------
@black: #000;
@blackLight: #1D1D1D;
@grayDarker: #222;
@grayDark: #343434;
@gray: #555;
@grayMed: #7F7F7F;
@blueGrey: #607D8B;
@grayLight: #D9D9D9;
@grayLighter: #F8F8F8;
@white: #FFF;
@grayIcon: #9E9E9E;


// Colors
// -------------------------

@turquoise-d1: #00AEA2;
@turquoise: #03BFB3;
@turquoise-l1: #42CFC5;
@turquoise-l2: #81DED8;
@turquoise-l3: #C0F0ED;
@turquoise-washed: #F3FDFC;

@purple-d2: #1D1333;
@purple-d1: #2E2246;
@purple: #413659;
@purple-l1: #675E7A;
@purple-l2: #8D869B;
@purple-l3: #B3AFBD;
@purple-washed: #F6F3FD;

// UI Colors
@red-d1: #F02E28;
@red: #D42054; // updated 2019
@red-l1: #e22c60; // updated 2019
@red-l2: #FE8B88;
@red-l3: #FFB2B0;
@red-washed: #FFECEB;

@yellow-d2: #F0AC00;
@yellow-d1: #FFC011;
@yellow: #fad634; // updated 2019
@yellow-l1: #FFD861;
@yellow-l2: #FFE28A;
@yellow-l3: #FFECB0;
@yellow-washed: #FFFAEB;

@green-d1: #1FB572;
@green: #2bc37c; // updated 2019
@green-l1: #4ECF95;
@green-l2: #79E1B2;
@green-l3: #A6F0CF;
@green-washed: #EBFFF6;

// Grayscale
@gray-1: #1E1C1C;
@gray-2: #303033;
@gray-3: #515054;
@gray-4: #68676B;
@gray-5: #817F85;
@gray-6: #A2A1A6;
@gray-7: #BBBABF;
@gray-8: #D8D7D9;
@gray-9: #E9E9EB;
@gray-10: #F3F3F5;
@gray-11: #F6F6F7;
@gray-12: #F9F9FA;
@gray-13: #FBFBFD;

@sand-1: #DED4CF; // added 2019
@sand-2: #EBDED6; // added 2019
@sand-5: #F3ECE8; // added 2019
@sand-6: #F6F1EF; // added 2019
@sand-7: #F9F7F5; // added 2019
@sand-8: #fbfaf9; // added 2019
@sand-9: #fdfcfc; // added 2019


// Additional Icon Colours
@brownIcon: #795548;
@blueIcon: #2196F3;
@lightBlueIcon: #03A9F4;
@cyanIcon: #00BCD4;
@greenIcon: #4CAF50;
@lightGreenIcon: #8BC34A;
@limeIcon: #CDDC39;
@yellowIcon: #FFEB3B;
@amberIcon: #FFC107;
@orangeIcon: #FF9800;
@deepOrangeIcon: #FF5722;
@redIcon: #F44336;
@pinkIcon: #E91E63;
@purpleIcon: #9C27B0;
@deepPurpleIcon: #673AB7;
@indigoIcon: #3F51B5;


// Brand colors
// -------------------------

//@blueLight:               #4f89de;
@blue: #2E8AEA;
@blueMid: #2152A3; // updated 2019
@blueMidLight: #6ab4f0;
@blueDark: #3544b1; // updated 2019
@blueExtraDark: #1b264f; // added 2019
@blueLight: #ADD8E6;
@blueNight: #162335; // added 2019
//@orange:              #f79c37;// updated 2019
@pink: #D93F4C; // #C3325F;// update 2019
@pinkLight: #f5c1bc; // added 2019
@pinkExtraLight: #fee4e1; // added 2020
@pinkRedLight: #ff8a89; // added 2019
@brown: #9d8057; // added 2019
@brownLight: #e4e0dd; // added 2019
@brownGrayLight: #f6f4f4; // added 2019
@brownGrayExtraLight: #faf9f9; // added 2019
@orange: #ff9412; // added 2019

//@u-greyLight:           #f2ebe6;// added 2019
@u-white: #f9f7f4; // added 2019
@u-black: @black; // added 2019


// UI colors
// -------------------------

@ui-option-type: @blueExtraDark;
@ui-option-type-hover: @blueMid;
@ui-option: @white;
@ui-option-hover: @gray-12;

@ui-option-disabled-type: @gray-6;
@ui-option-disabled-type-hover: @gray-5;
@ui-option-disabled-hover: @gray-12;

@ui-disabled-type: @gray-6;
@ui-disabled-border: @gray-6;

//@ui-active:           #346ab3;
@ui-active: @pinkExtraLight;
@ui-active-border: @pinkLight;
@ui-active-blur: @brownLight;
@ui-active-type: @blueExtraDark;
@ui-active-type-hover: @blueMid;

@ui-selected: @sand-5;
@ui-selected-hover: ligthen(@sand-5, 10%);
@ui-selected-type: @blueExtraDark;
@ui-selected-type-hover: @blueMid;
@ui-selected-border: @blueDark;
@ui-selected-border-hover: darken(@blueDark, 10%);

@ui-light-border: @pinkLight;
@ui-light-type: @gray-3;
@ui-light-type-hover: @blueMid;

@ui-light-active-border: @pinkLight;
@ui-light-active-type: @blueMid;
@ui-light-active-type-hover: @blueMidLight;


@ui-action: @white;
@ui-action-hover: @gray-12;
@ui-action-type: @blueExtraDark;
@ui-action-type-hover: @blueMid;
@ui-action-border: @blueExtraDark;
@ui-action-border-hover: @blueMid;

@ui-action-discreet: @white;
@ui-action-discreet-hover: @gray-12;
@ui-action-discreet-type: @blueExtraDark;
@ui-action-discreet-type-hover: @blueMid;
@ui-action-discreet-border: @gray-7;
@ui-action-discreet-border-hover: @blueMid;

@ui-outline: @blueMidLight;

@type-white: @white;
@type-black: @blueNight;

@ui-btn: @blueExtraDark;
@ui-btn-hover: @blueMid;
@ui-btn-type: @white;

@ui-btn-positive: @green;
@ui-btn-positive-hover: lighten(@green, 6%);
@ui-btn-positive-type: @white;

@ui-btn-negative: @red;
@ui-btn-negative-type: @white;
@ui-btn-negative-hover: @red;

@ui-icon: @blueNight;
@ui-icon-hover: @blueMid;

@ui-drop-area-color: @blueMidLight;


// Scaffolding
// -------------------------
@appHeaderHeight: 55px;
@bodyBackground: @gray-10;
@textColor: @black;

@editorHeaderHeight: 70px;
@editorFooterHeight: 50px;


// Links
// -------------------------
@linkColor: @black;
@linkColorHover: darken(@linkColor, 15%);

// Typography
// -------------------------
@sansFontFamily: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;

@baseFontSize: 15px;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;

@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: 500; // instead of browser default, bold
@headingsColor: inherit; // empty to use BS default, @textColor


// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height

@fontSizeLarge: (@baseFontSize * 1.25); // ~18px
@fontSizeMedium: (@baseFontSize * 1.15); // ~14px
@fontSizeSmall: (@baseFontSize * 0.85); // ~12px
@fontSizeMini: (@baseFontSize * 0.75); // ~11px

@paddingLarge: 11px 19px; // 44px
@paddingSmall: 2px 10px; // 26px
@paddingMini: 0 6px; // 22px

@propertyEditorLimitedWidth: 800px;

// Disabled this to keep consistency throughout the backoffice UI. Untill a better solution is thought up, this will do.
@baseBorderRadius: 3px; // 2px;
@doubleBorderRadius: 6px;
@borderRadiusLarge: 3px; // 6px;
@borderRadiusSmall: 3px; // 3px;


// Tables
// -------------------------
@tableBackground: @white; // overall background-color
@tableBackgroundAccent: @gray-10; // for striping
@tableBackgroundHover: @gray-10; // for hover
@tableBorder: @gray-9; // table and cell border

// Buttons
// -------------------------
@btnBackground: @gray-9;
@btnBackgroundHighlight: @gray-10;
@btnBorder: @gray-9;

@btnPrimaryBackground: @ui-btn;
@btnPrimaryBackgroundHighlight: @ui-btn-hover;

@btnInfoType: @ui-btn-type; // updated 2019
@btnInfoTypeHover: @ui-btn-type; // updated 2019
@btnInfoBackground: @ui-btn; // updated 2019
@btnInfoBackgroundHighlight: @ui-btn-hover; // updated 2019

@btnWhiteType: @blueExtraDark; // updated 2019
@btnWhiteTypeHover: @ui-action-type-hover; // updated 2019
@btnWhiteBackground: @white; // updated 2019
@btnWhiteBackgroundHighlight: @white; // updated 2019

@btnSuccessType: @ui-btn-positive-type; // updated 2019
@btnSuccessBackground: @ui-btn-positive; // updated 2019
@btnSuccessBackgroundHighlight: @ui-btn-positive-hover; // updated 2019

@btnWarningBackground: @yellow-d2;
@btnWarningBackgroundHighlight: lighten(@yellow-d2, 10%);

@btnDangerBackground: @red;
@btnDangerBackgroundHighlight: @red-l1;

@btnInverseBackground: @gray-2;
@btnInverseBackgroundHighlight: @gray-2;

@btnNeutralBackground: @gray-9;
@btnNeutralBackgroundHighlight: @gray-9;


// Forms
// -------------------------
@inputBackground: @white;
@inputBorder: @gray-8;
@inputBorderFocus: @gray-7;
@inputBorderTabFocus: @ui-outline;
@inputBorderRadius: 0;
@inputDisabledBackground: @gray-10;
@formActionsBackground: @gray-9;
@inputHeight: (@baseLineHeight + 12px); // base line-height + 8px vertical padding + 2px top/bottom border
@controlRequiredColor: @red;
@inputReadonlyBorderColor: @gray-9;


// Tabs
// -------------------------

@tabsBorderRadius: @baseBorderRadius;

// Dropdowns
// -------------------------
@dropdownBackground: @white;
@dropdownBorder: none;
@dropdownBorderRadius: @baseBorderRadius;
@dropdownDividerTop: @gray-8;
@dropdownDividerBottom: @white;

@dropdownLinkColor: @gray-2;
@dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @white;

@dropdownLinkBackgroundActive: @linkColor;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;



// COMPONENT VARIABLES
// --------------------------------------------------

// Drawer
@drawerWidth: 400px;


// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zIndexEditor: 100;
@zIndexTree: 100;
@zIndexBlockActions: 500;
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1030;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
@zindexSearchBox: 8000;
@zindexUmbOverlay: 7500;
@zindexOverlayBackdrop: 2000;

@zindexNotification: 8000;

// these are used for the tour which should be on top of everything else
@zindexTourBackdrop: 9999;
@zindexTourModal: 10000;

// Sticky bar has a z-index of "500", which is set from javascript in directive
// so set z-index of cropper should be lower to be behind sticky bar.
@zindexCropperOverlay: 499;

// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";


// Input placeholder text color
// -------------------------
@placeholderText: @gray-8;


// Hr border color
// -------------------------
@hrBorder: @gray-10;


// Horizontal forms & lists
// -------------------------
@horizontalComponentOffset: 180px;


// Wells
// -------------------------
@wellBackground: @gray-10;


// Navbar
// -------------------------
@navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: (@navbarCollapseWidth + 1);

@navbarHeight: 40px;
@navbarBackgroundHighlight: @white;
@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
@navbarBorder: darken(@navbarBackground, 12%);

@navbarText: @gray-4;
@navbarLinkColor: @gray-4;
@navbarLinkColorHover: @gray-2;
@navbarLinkColorActive: @gray-3;
@navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);

@navbarBrandColor: @navbarLinkColor;

// Inverted navbar
@navbarInverseBackground: @gray-1;
@navbarInverseBackgroundHighlight: @gray-2;
@navbarInverseBorder: @gray-2;

@navbarInverseText: @gray-8;
@navbarInverseLinkColor: @gray-8;
@navbarInverseLinkColorHover: @white;
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover: transparent;
@navbarInverseLinkBackgroundActive: @navbarInverseBackground;

@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus: @white;
@navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: @gray-7;

@navbarInverseBrandColor: @navbarInverseLinkColor;


// Pagination
// -------------------------
@paginationBackground: @white;
@paginationBorder: @gray-8;
@paginationActiveBackground: @gray-10;


// Hero unit
// -------------------------
@heroUnitBackground: @gray-10;
@heroUnitHeadingColor: inherit;
@heroUnitLeadColor: inherit;


// Alerts
// -------------------------
@warningText: @white;
@warningBackground: @yellow-d2;
@warningBorder: transparent;

@errorText: @white;
@errorBackground: @red;
@errorBorder: transparent;

@successText: @white;
@successBackground: @green-d1;
@successBorder: transparent;

@infoText: @white;
@infoBackground: @blueDark;
@infoBorder: transparent;

@alertBorderRadius: 0;

// SD: Had to duplicate the above but prefix with 'form' inversed colors
// because we cannot share the above alert colors with forms otherwise we end up with white
// text and giant red backgrounds.

// Form states
// -------------------------
@formWarningText: @warningBackground;
@formWarningBackground: lighten(@warningBackground, 38%);
@formWarningBorder: darken(spin(@warningBackground, -10), 3%);

@formErrorText: @errorBackground;
@formErrorBackground: @errorBackground;
@formErrorBorder: @red;

@formSuccessText: @successBackground;
@formSuccessBackground: lighten(@successBackground, 48%);
@formSuccessBorder: darken(spin(@successBackground, -10), 5%);

@formInfoText: @infoBackground;
@formInfoBackground: lighten(@infoBackground, 41%);
@formInfoBorder: darken(spin(@infoBackground, -10), 7%);


// Tooltips and popovers
// -------------------------
@tooltipColor: @white;
@tooltipBackground: @black;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;

@popoverBackground: @white;
@popoverArrowWidth: 10px;
@popoverArrowColor: @white;
@popoverTitleBackground: darken(@popoverBackground, 3%);

// Special enhancement for popovers
@popoverArrowOuterWidth: (@popoverArrowWidth + 1);
@popoverArrowOuterColor: @gray-7;



// GRID
// --------------------------------------------------


// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 0;
@gridRowWidth: ((@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)));

// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 30px;
@gridRowWidth1200: ((@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)));

// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
@gridRowWidth768: ((@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)));


// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage((@gridColumnWidth / @gridRowWidth));
@fluidGridGutterWidth: percentage((@gridGutterWidth / @gridRowWidth));

// 1200px min
@fluidGridColumnWidth1200: percentage((@gridColumnWidth1200 / @gridRowWidth1200));
@fluidGridGutterWidth1200: percentage((@gridGutterWidth1200 / @gridRowWidth1200));

// 768px-979px
@fluidGridColumnWidth768: percentage((@gridColumnWidth768 / @gridRowWidth768));
@fluidGridGutterWidth768: percentage((@gridGutterWidth768 / @gridRowWidth768));

// SORTABLE
// --------------------------------------------------
@sortableHelperBg: @turquoise-l2;
@sortablePlaceholderBg : @turquoise;
