// /**
//  * Copyright Â© Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Luma theme overrides
//  _____________________________________________

//  Theme file should contain declarations (overrides) ONLY OF EXISTING variables
//  Otherwise this theme won't be available for parent nesting
//  All new variables should be placed in local theme lib or local theme files

//
//  Typography
//  ---------------------------------------------

//  Fonts
@font-family-name__base: 'Jost';
@font-family__base: @font-family-name__base, @font-family__sans-serif;

@icons__font-path: '@{baseDir}fonts/Luma-Icons';
@icons__font-name: 'luma-icons';

@font-size__base: 14px;

//  Color nesting
@panel__background-color: @color-gray-light0;
@border-color__base: @color-gray80;

//  Headings
@h3__font-weight: @font-weight__semibold;
@h3__margin-top: @indent__base;

//  Links
@link__color: @theme__color__primary-alt;

//  Focus
@focus__color: @color-blue3;

@border-color__base: #e1e1e1;

//
//  Tables
//  ---------------------------------------------

@table-cell__padding-vertical: 11px;
@table-cell-stripped__background-color: @table-cell__hover__background-color;
@table-responsive-th__background-color: @table-cell-stripped__background-color;
@table-responsive-cell__padding: @indent__xs @indent__s;

//
//  Layout grid
//  ---------------------------------------------
@layout__max-width: 1200px;
@layout-indent__width: 15px;

@total-columns: 24;

//  Variables for layout columns
@layout-column__sidebar-width: 6;

//  Checkout columns width
@layout-column-checkout__width-left: 6;

//
//  Navigation
//  ---------------------------------------------

@navigation__background: @color-gray94;
@navigation-level0-item__active__color: @primary__color;

@submenu-item__active__color: @navigation-level0-item__active__color;

//  Desktop navigation
@navigation-desktop-level0-item__line-height: 47px;
@submenu-desktop__font-weight: @font-weight__regular;
@submenu-desktop-item__active__color: @navigation-level0-item__active__color;

//  Tabs
@tab-control__color: @color-gray43;
@tab-control__font-weight: @font-weight__regular;
@tab-control__height: @indent__base*2;
@tab-control__margin-right: -1px;
@tab-control__padding-top: 1px;
@tab-control__padding-right: 35px;

//  Tabs content
@tab-content__padding-top: 35px;
@tab-content__padding-right: @tab-control__padding-right;

//
//  Accordion
//  ---------------------------------------------

@accordion-control__font-family: false;
@accordion-control__font-size: @font-size__base;
@accordion-control__font-style: false;
@accordion-control__font-weight: @font-weight__semibold;
@accordion-control__border-right: false;
@accordion-control__border-bottom: false;
@accordion-control__border-left: false;
@accordion-control__background-color: false;
@accordion-control__color: @primary__color;
@accordion-control__hover__background-color: false;
@accordion-control__hover__color: @accordion-control__color;
@accordion-control__active__background-color: false;
@accordion-control__active__color: @accordion-control__color;
@accordion-control__margin-bottom: 0;
@accordion-control__padding-right: @indent__s;
@accordion-control__padding-left: @indent__s;
@accordion-content__border: false;
@accordion-content__margin: 0;
@accordion-content__padding: @indent__s @indent__s @indent__l;

//
//  Buttons
//  ---------------------------------------------

@button__font-weight: @font-weight__semibold;

//  Default = secondary button
@button__background: @color-gray-darken0;
@button__border: 1px solid @border-color__base;
@button__hover__color: @button__color;
@button__hover__background: darken(@button__background, 5%);
@button__active__background: @color-gray-darken1;

//  Primary button

@link__color: #227ed1;
@link__text-decoration: none;
@link__hover__color: #333333;
@link__hover__text-decoration: none;
@link__active__color: #227ed1;
@link__active__text-decoration: none;
@link__visited__color: #227ed1;
@link__visited__text-decoration: none;

@button-primary__color: @color-white;
@button-primary__background: #227ed1;
@button-primary__border: 1px solid #227ed1;
@button-primary__hover__color: @color-white;
@button-primary__hover__background: #333333;
@button-primary__hover__border: 1px solid #333333;
@button-primary__active__color: @color-white;
@button-primary__active__background: #227ed1;
@button-primary__active__border: 1px solid #227ed1;
@button__border-radius: 3px;
@button__padding: 9px 20px;
@button__font-weight: 400;
@button__font-size: 15px;

//  Button with icon
@button-icon__line-height: @icon-font__line-height;

//
//  Icons
//  ---------------------------------------------

@icon-wishlist-empty: false;
@icon-comment-reflected: false;
@icon-compare-empty: false;
@icon-arrow-up-thin: false;
@icon-arrow-right-thin: false;
@icon-arrow-left-thin: false;
@icon-arrow-down-thin: false;
@icon-wishlist-empty: '\e601';

//
//  Messages
//  ---------------------------------------------

@message__padding: 12px @indent__base 12px @indent__m;
@message__line-height: false;
@message-icon__font-size: 24px;
@message-icon__inner-padding-left: 45px;
@message-icon__top: 22px;
@message-error-icon: @icon-error;
@message-success-icon: @icon-success;

//
//  Loaders
//  ---------------------------------------------

@loader-overlay__background-color: rgba(255, 255, 255, .7);

//
//  Forms
//  ---------------------------------------------


//  Select
@select__background: @form-element-input__background url('../images/select-bg.svg') no-repeat 100% 45%;
@select__border: 1px solid @border-color__base;
@select__height: 38px;
@select__padding: 4px 25px @indent__xs @indent__s;
@select__border-radius: 0;

@form-element-input__border: 1px solid #e1e1e1;
@form-element-input__height: 38px;

//  Form fieldset
@form-fieldset-legend__font-size: 18px;
@form-fieldset-legend__font-weight: @font-weight__light;
@form-fieldset-legend__margin: 0 0 @indent__base;
@form-fieldset-legend__padding: 0 0 @indent__s;
@form-fieldset-legend__width: 100%;

//  Form field
@form-field-type-revert: false;
@form-field__additional-vertical-indent: @indent__s;

//  Form field label
@form-field-label__font-weight: @font-weight__semibold;
@form-field-type-label-block__margin: 0 0 8px;

//  Form field note icon
@form-field-note-icon-font__content: false;

//  Placeholder
@form-element-input-placeholder__color: @color-gray34;

//
//  Pager
//  ---------------------------------------------

@pager__font-weight: @font-weight__regular;
@pager__line-height: @indent__l;
@pager-item__margin: 0 8px 0 0;
@pager-item__padding: 0 @indent__xs;

//  Pager current page
@pager-current__background: @color-gray90;

//  Pager link.action
@pager-icon__font-margin: 0;
@pager-icon__font-size: 16px;

//  Pager link.action visited
@pager-action__visited__color: @text__color__muted;

//  Pager link.action hover
@pager-action__hover__color: @text__color__muted;

//  Pager link.action active
@pager-action__active__color: @text__color__muted;

//
//  Rating
//  ---------------------------------------------

@rating-icon__font-size: 16px;
@rating-icon__letter-spacing: 2px;

//
//  Dropdowns
//  ---------------------------------------------

@dropdown-toggle-icon__content: @icon-down;
@dropdown-toggle-icon__active__content: @icon-up;
@dropdown-toggle-icon__font-size: 12px;

//  Split dropdown
@dropdown-split-actions__padding: 0 @indent__xs;
@dropdown-split-toggle__actions__padding: false;

//  Actions-toolbar
@actions-toolbar-actions__position: left;
@actions-toolbar-actions-primary__margin: 0 15px 0 0;

//
//  Breadcrumbs
//  ---------------------------------------------

@breadcrumbs__container-margin: 0 0 25px;
@breadcrumbs-icon__font-size: 10px;
@breadcrumbs-icon__font-margin: 0 @indent__s;

@breadcrumbs-current__color: @color-gray-middle5;
@breadcrumbs-link__color: @link__color;
@breadcrumbs-link__visited__color: @breadcrumbs-link__color;
@breadcrumbs-link__hover__color: @breadcrumbs-link__color;
@breadcrumbs-link__active__color: @breadcrumbs-link__color;

//
//  Popups
//  ---------------------------------------------

@popup__border: 1px solid @color-gray68;
@popup-title-headings__level: h2;

//  Popup icons
@popup-icon-font__size: 16px;
@popup-icon-font__line-height: 16px;
@popup-icon-font__color: @color-gray55;
@popup-icon-font__color-hover: darken(@popup-icon-font__color, 10%);
@popup-icon-font__color-active: @popup-icon-font__color-hover;

//  Window overlay
@overlay__background: @color-gray55;
@overlay__opacity: .7;
@overlay__opacity-old: 70;

@gallery-thumb-border-color-active: @active__color;

//  Checkout tooltip icon
@checkout-tooltip-icon__font-size: 21px;

//  Checkout Payment Option icon
@checkout-payment-option-title-icon__font-size: 14px;
@checkout-payment-option-title-icon__line-height: 16px;
@checkout-payment-option-title-icon__margin: 0 0 0 @indent__s;

//  Checkout Sidebar Shipping Information
@checkout-sidebar-shipping-information-edit-icon__content: @icon-edit;
@checkout-sidebar-shipping-information-edit-icon__font-size: 18px;
@checkout-sidebar-shipping-information-edit-icon__line-height: 20px;
@checkout-sidebar-shipping-information-edit-icon__top: @indent__s;

//  Checkout
@checkout-sidebar__columns: 8;

//
//  Footer
//  ---------------------------------------------

@copyright__background-color: @color-gray-middle4;

@color-orange-red1: #227ed1;
@color-orange-red2: #227ed1;
@color-orange-red3: #227ed1;
@color-orange-red4: #227ed1;
@color-gray82: #e1e1e1;