/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

@linkColor: #0099CC;
@highlightBlue: #37A9FD;
@borderRadius: 4px;
@borderRadiusTabs: 4px;
@borderRadiusURL: 4px;
@borderRadiusUIbox: 8px;
@borderRadiusModal: 8px;
@bigBorderRadius: 14px;
@privateTabBackground: #392e54;
@dialogTopOffset: 30px;

@bitcoinOrange: #f7931a;

@chromePrimary: #F3F3F3;
@chromeSecondary: #d3d3d3;
@chromeTertiary: #c7c7c7;
@chromeText: #555555;

@tabsBackground: #dddddd;
@navigationBarBackground: @chromeSecondary;
@navigationBarBackground: white;
@chromeBorderColor: @chromePrimary;
@chromeControlsBackground: #bbb;
@chromeControlsWarningBackground: @chromePrimary;
//@chromeControlsBackground2: @chromeSecondary;
@chromeControlsBackground2: white;
@toolbarBackground: #eee;
@toolbarBorderColor: #ccc;
@menuSelectionColor: #2F7AFB;
@errorTextColor: #999;

@navigatorHeight: 48px;
@defaultSpacing: 12px;
@progressBarColor: #3498DB;
@defaultFontSize: 13px;
@contextMenuFontSize: 14px;
@audioColor: @highlightBlue;
@focusUrlbarOutline: @highlightBlue;
@siteSecureColor: @buttonColor;
@siteInsecureColor: #C63626;
@siteEVColor: green;
@loadTimeColor: @highlightBlue;
@activeTabDefaultColor: @chromePrimary;
@buttonColor: #5a5a5a;
@braveOrange: rgb(255, 80, 0);
@braveLightOrange: #FF7A1D;
@braveMediumOrange: rgb(232, 72, 0);
@braveDarkOrange: #D44600;
@dragSpacing: 50px;

@switchBG_on: #ff6000;
@switchBG_off: #ccc;
@switchBG_off_lrg: #adadad;
@switchBG_dis: #e8e8e8;
@switchBGTransition: background-color 100ms;
@switchHeight: 16px;
@switchWidth: 45px;
@switchRadius: 10px;
@switchShadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
@switchNubDiameter: 12px;
@switchNubTopMargin: 2px;
@switchNubLeftMargin: 2px;
@switchNubRightMargin: 2px;
@switchNubColor: white;
@switchNubShadow: 1px 1px 5px -2px black;
@switchNubTransition: right 100ms;

@navbarHeight: 36px;
@downloadsBarHeight: 50px;
@tabsToolbarHeight: 28px;
@tabPagesHeight: 9px;
@bookmarksToolbarHeight: 24px;
@bookmarksToolbarWithFaviconsHeight: 28px;
@bookmarksFileIconSize: 13px;
@bookmarksFolderIconSize: 15px;

@navbarButtonSpacing: 4px;
@navbarButtonWidth: 20px;
@navbarBraveButtonWidth: 23px;
@navbarBraveButtonMarginLeft: 80px;
@navbarLeftMarginDarwin: 76px;

@findbarBackground: #F7F7F7;

@carotRadius: 8px;
@sideBarWidth: 190px;

@veryLightGray: rgb(250, 250, 250);
@lightGray: rgb(236, 236, 236);
@gray: rgb(153, 153, 153);
@mediumGray: rgb(101, 101, 101);
@darkGray: rgb(68, 68, 68);

@modalVeryLightGray: rgb(247, 247, 247);
@modalLightGray: rgb(231, 231, 231);

@white25: rgba(255, 255, 255, 0.25);
@white50: rgba(255, 255, 255, 0.5);
@white75: rgba(255, 255, 255, 0.75);
@gray25: rgba(116, 116, 130, 0.25);
@gray50: rgba(116, 116, 130, 0.5);
@black10: rgba(0, 0, 0, 0.1);
@black25: rgba(0, 0, 0, 0.25);
@black50: rgba(0, 0, 0, 0.5);
@black75: rgba(0, 0, 0, 0.75);

@buttonShadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.5);
@dialogShadow: 0px 8px 22px 0px rgba(0, 0, 0, .5);
@softBoxShadow: 0 4px 8px @lightGray;
@lightBoxShadow: 0 2px 2px @lightGray;
@insetShadow: inset -5px 0 15px @black25;

@orangeButtonShadow: 0 2px 0 @braveDarkOrange;

@zindexWindowNotActive: 900;
@zindexWindow: 1000;
@zindexWindowIsPreview: 1100;

@zindexDownloadsBar: 1000;

@zindexTabs: 1000;
@zindexTabsThumbnail: 1100;
@zindexTabsDragIndicator: 1100;

@zindexNavigationBar: 2000;
@zindexUrlbarNotLegend: 2100;

@zindexPopUp: 3000;
@zindexContextMenu: 3000;
@zindexDialogs: 3000;
@zindexPopupWindow: 3000;
@zindexForms: 3000;
@zindexSuggestionText: 3100;

@zindexWindowFullScreen: 4000;
@zindexWindowFullScreenBanner: 4100;

@breakpointWideViewport: 1000px;
@breakpointNarrowViewport: 600px;
@breakpointExtensionButtonPadding: 720px;
@breakpointSmallWin32: 650px;
@breakpointTinyWin32: 500px;
@transitionDuration: 100ms;

@aboutPageSectionPadding: 24px;

@transition: all 600ms linear;
@transitionFast: all 100ms linear;
@transitionSlow: all 1s linear;
@transitionEase: all 600ms ease;
@transitionFastEase: all 100ms ease;
@transitionSlowEase: all 1s ease;

// Colors used for stats on:
// - Bravery panel
// - about:newtab
@statsYellow: #ffc000;
@statsOrange: #f39030;
@statsRed: #fe521d;
@statsBlue: #0796fa;
@statsGray: @chromeText;
@statsLightGray: #999999;

@defaultIconBackground: #F7F7F7;

// Variables can be exposed to (and read from) our JavaScript code
// (for more info, search MDN for CSSStyleDeclaration)
:root {
  --navbar-height: @navbarHeight;
  --downloads-bar-height: @downloadsBarHeight;
}