/* 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/. */

@commonTextColor: #3b3b3b;

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

@bitcoinOrange: #f7931a;

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

@chromeBorderColor: @chromePrimary;
@chromeControlsBackground: #bbb;
@chromeControlsWarningBackground: @chromePrimary;
@toolbarBackground: #f5f5f5;
@toolbarBorderColor: #ccc;
@menuSelectionColor: #2F7AFB;
@errorTextColor: #999;

@navigatorHeight: 48px;
@defaultSpacing: 12px;
@progressBarColor: #3498DB;
@defaultFontSize: 13px;
@contextMenuFontSize: 14px;
@settingItemSubtextFontSize: 0.95rem;
@audioColor: @highlightBlue;
@focusUrlbarOutline: rgba(55, 169, 253, 0.4);
@siteSecureColor: @buttonColor;
@siteInsecureColor: #C63626;
@siteEVColor: #7ED321;
@loadTimeColor: @highlightBlue;
@activeTabDefaultColor: @chromePrimary;
@buttonColor: rgb(90, 90, 98);
@braveOrange: rgb(255, 85, 0);
@braveLightOrange: #FF7A1D;
@braveMediumOrange: rgb(232, 72, 0);
@braveDarkOrange: #D44600;
@dragSpacing: 50px;
@urlBarOutline: #bbb;
@urlbarFormHeight: 26px;

@navbarHeight: 36px;
@downloadsBarHeight: 60px;
@tabsToolbarHeight: 26px;
@tabHeight: @tabsToolbarHeight;
@tabPagesHeight: 7px;
@bookmarksToolbarHeight: 24px;
@bookmarksToolbarWithFaviconsHeight: 24px;
@bookmarksFileIconSize: 13px;
@bookmarksFolderIconSize: 15px;

@settingsListContainerMargin: 2rem;

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

@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);
@flyoutDialogBoxShadow: 2px 2px 8px rgba(59, 59, 59, 1.0);
@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;

@zindexNavigationBar: 2000;
@zindexUrlbarNotLegend: 2100;

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

@zindexWindowFullScreen: 4000;
@zindexWindowFullScreenBanner: 4100;

@breakpointWideViewport: 1000px;
@breakpointNarrowViewport: 600px;
@breakpointForBookmarksPage: 565px;
@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;
@statsLightGray: #999999;

@defaultIconBackground: #F7F7F7;

// Variables can be exposed to (and read from) our JavaScript code
// (for more info, search MDN for CSSStyleDeclaration)
// If updating update app/common/constants/styleValues.js as well and vice-versa
:root {
  --navbar-height: @navbarHeight;
  --downloads-bar-height: @downloadsBarHeight;
}
