/**
 * Copyright Â© 2021 O2TI. All rights reserved.
 * @author    Bruno Elisei <brunoelisei@o2ti.com>
 * See LICENSE.txt for license details.
 */

//
//  Colors
//  _____________________________________________

@theme-full-checkout__color__complementary: #ccc;
@theme-full-checkout__active__color: @theme__color__primary;
@theme-full-checkout-step-content-mobile__background: @color-white;
@theme-full-checkout-step-content-mobile-light__background: darken(@theme-full-checkout-step-content-mobile__background, 2.5%);
@theme-full-checkout-step-content-mobile-dark__background: darken(@theme-full-checkout-step-content-mobile__background, 4.5%);

//
//  Additional Elements
//  _____________________________________________

@theme-full-checkout__box-shadow: 0 0 5px lighten(@theme__color__primary, 1%);
@theme-full-checkout__border-radius: 3px;
@theme-full-checkout__border: @border-width__base solid @theme-full-checkout__color__complementary;
@theme-full-checkout-collapsible-icon__down: @icon-down;
@theme-full-checkout-collapsible-icon__up: @icon-up;
@theme-full-checkout-collapsible-icon__font-size: 13px;
@theme-full-checkout-collapsible-icon__line-height: 1;
@theme-full-checkout-collapsible-icon__text-hide: true;
@theme-full-checkout-collapsible-icon__margin: 3px 0 0;
@theme-full-checkout-collapsible-icon__position: after;
@theme-full-checkout-collapsible-icon__display: block;

//
//  Sizes & Margins
//  _____________________________________________

@theme-full-checkout-wrapper__columns: 12;
@theme-full-checkout-container__max-width: 1200px;
@theme-full-checkout-form__max-width: 500px;
@theme-full-checkout-item-base__width: 100%/5;

@theme-full-checkout-wrapper__margin: @indent__base;
@theme-full-checkout-step-content-mobile__margin-s: @indent__xs + @indent__s;
@theme-full-checkout-step-content-mobile__margin: 0 -(@theme-full-checkout-step-content-mobile__margin-s) @theme-full-checkout-step-content-mobile__margin-s;
@theme-full-checkout-step-content-mobile-two-fieldset__margin: @indent__base -@indent__s @theme-full-checkout-step-content-mobile__margin-s;
@theme-full-checkout-step-content-desktop-two-fieldset__margin: 0 -@indent__s 0;

//
//  Titles
//  _____________________________________________

@theme-full-checkout-step-title__border: unset;
@theme-full-checkout-step-title-mobile__font-size: 18px;
@theme-full-checkout-step-title__padding: @indent__base;

//
//  Header - Logo
//  _____________________________________________

@theme-full-checkout-header-logo-mobile__max-width: 150px;
@theme-full-checkout-header-logo-desktop__max-width: 150px;
@theme-full-checkout-header-logo-mobile__text-align: center;
@theme-full-checkout-header-logo-desktop__text-align: left;

//
//  Component - Inputs Floating Label
//  _____________________________________________

@theme-full-checkout-fields-label-floating-label__font-size: @indent__s;
@theme-full-checkout-fields-label-floating-aixs-x: @indent__s + @indent__xs;
@theme-full-checkout-fields-label-floating-aixs-y: @indent__s + @indent__xs;

@theme-full-checkout-fields-label-floating-input__padding-top: @theme-full-checkout-fields-label-floating-aixs-y;
@theme-full-checkout-fields-label-floating-input__padding-bottom: @theme-full-checkout-fields-label-floating-aixs-y;
@theme-full-checkout-fields-label-floating-input__padding-left: @theme-full-checkout-fields-label-floating-aixs-x;
@theme-full-checkout-fields-label-floating-input__padding-right: @theme-full-checkout-fields-label-floating-aixs-y + @theme-full-checkout-fields-label-floating-aixs-y;

@theme-full-checkout-fields-tooltip-icon__font-size: 18px;
@theme-full-checkout-fields-tooltip__padding: (@theme-full-checkout-fields-tooltip-icon__font-size - 2px) @indent__s;
@theme-full-checkout-icon-view__closed: '@{baseDir}O2TI_ThemeFullCheckout/images/eye.svg';
@theme-full-checkout-icon-view__openned: '@{baseDir}O2TI_ThemeFullCheckout/images/eye-slash-fill.svg';
@theme-full-checkout-icon-view-password__height: @theme-full-checkout-fields-tooltip-icon__font-size;
@theme-full-checkout-icon-view-password__width: @theme-full-checkout-fields-tooltip-icon__font-size;
@theme-full-checkout-icon-view-password__line-height: 1;

@theme-full-checkout-form-element-input-error__border-color: @form-element-validation__border-error;

//
//  Header - Progress Bar
//  _____________________________________________

@theme-full-checkout-progress-bar__font-size: 12px;
@theme-full-checkout-progress-bar__font-weight: @font-weight__light;
@theme-full-checkout-progress-bar__margin: @indent__base;

@theme-full-checkout-progress-bar-item__border-radius: 6px;
@theme-full-checkout-progress-bar-item__color: @theme-full-checkout__color__complementary;
@theme-full-checkout-progress-bar-item__margin: @indent__s;
@theme-full-checkout-progress-bar-item__transition: background .3s;
@theme-full-checkout-progress-bar-item__width: calc(~'100% / 3');

@theme-full-checkout-progress-bar-item__active__font-weight: @font-weight__semibold;

@theme-full-checkout-progress-bar-item__hover__background-color: darken(@theme-full-checkout-progress-bar-item__background-color, 5%);
@theme-full-checkout-progress-bar-item-element__padding-top: 26px;
@theme-full-checkout-progress-bar-item-element__width: 24px;
@theme-full-checkout-progress-bar-item-element__height: @theme-full-checkout-progress-bar-item-element__width;
@theme-full-checkout-progress-bar-item-element-outer-radius__width: 3px;

@theme-full-checkout-progress-bar-item-element-inner__background-color: @page__background-color;
@theme-full-checkout-progress-bar-item__background-color: @theme-full-checkout__color__complementary;
@theme-full-checkout-progress-bar-item__active__color: @theme-full-checkout__active__color;
@theme-full-checkout-progress-bar-item__active__background-color: @theme-full-checkout__active__color;

@theme-full-checkout-progress-bar-item-element-inner__active__color: @color-white;
@theme-full-checkout-progress-bar-item-element-inner__active__background-color: @theme-full-checkout__active__color;
@theme-full-checkout-progress-bar-item-element-inner__active__border-color: @theme-full-checkout__active__color;

@theme-full-checkout-progress-bar-item__complete__background-color: @theme-full-checkout__active__color;
@theme-full-checkout-progress-bar-item__complete__color: @theme-full-checkout__active__color;
@theme-full-checkout-progress-bar-item-element-inner__complete__color: @color-white;
@theme-full-checkout-progress-bar-item-element-inner__complete__background-color: @theme-full-checkout__active__color;
@theme-full-checkout-progress-bar-item-element-inner__complete__border-color: @theme-full-checkout__active__color;

@theme-full-checkout-progress-bar-item-element-inner__border-color: @theme-full-checkout__color__complementary;
@theme-full-checkout-progress-bar-item-element-inner__color: @theme-full-checkout__active__color;
@theme-full-checkout-progress-bar-item-element-inner__height: @theme-full-checkout-progress-bar-item-element-inner__width;
@theme-full-checkout-progress-bar-item-element-inner__width: @theme-full-checkout-progress-bar-item-element__width - ( @theme-full-checkout-progress-bar-item-element-outer-radius__width*2 );
@theme-full-checkout-progress-bar-item-element-inner__active__content: @icon-checkmark;

//
//  Component - Modal
//  _____________________________________________

@theme-full-checkout-modal-popup__width: 500px;


@theme-full-checkout-block-auth__dropdown__padding: @indent__m;
@theme-full-checkout-block-auth__dropdown__background-color: @color-white;
@theme-full-checkout-block-auth__or-label__size: 36px;
@theme-full-checkout-block-auth__width: 0;
@theme-full-checkout-block-auth__border: 1px solid @color-gray-light3;

//
//  Component - Tooltip
//  _____________________________________________

@theme-full-checkout-tooltip__hover__z-index: @tooltip__z-index;

@theme-full-checkout-tooltip-icon-arrow__font-size: 10px;
@theme-full-checkout-tooltip-icon-arrow__left: -( @theme-full-checkout-tooltip-content__padding + @theme-full-checkout-tooltip-icon-arrow__font-size - @theme-full-checkout-tooltip-content__border-width);

@theme-full-checkout-tooltip-icon__color: @theme-full-checkout__active__color;
@theme-full-checkout-tooltip-icon__content: @icon-help;
@theme-full-checkout-tooltip-icon__font-size: 24px;
@theme-full-checkout-tooltip-icon__hover__color: @theme-full-checkout__active__color;

@theme-full-checkout-tooltip-content__background-color: @theme-full-checkout__color__complementary;
@theme-full-checkout-tooltip-content__border-color: @theme__color__primary;
@theme-full-checkout-tooltip-content__border-width: 1px;
@theme-full-checkout-tooltip-content__font-size: @font-size__base;
@theme-full-checkout-tooltip-content__padding: 12px;
@theme-full-checkout-tooltip-content__width: 150px;
@theme-full-checkout-tooltip-content__active__border-color: darken(@theme-full-checkout-tooltip-content__border-color, 20%);

@theme-full-checkout-tooltip-content-mobile-popup__width: 150px;
@theme-full-checkout-tooltip-content-mobile__right: -(@indent__s);
@theme-full-checkout-tooltip-content-mobile__top: @theme-full-checkout-fields-label-floating-aixs-y + @theme-full-checkout-tooltip-icon-arrow__font-size;


//
//  Step - Identification
//  _____________________________________________

@theme-full-checkout-step-identification-desktop__padding: @indent__s + @indent__base;
@theme-full-checkout-step-identification-content-mobile__padding: @indent__s (@indent__xs + @indent__s) @indent__xl;
@theme-full-checkout-step-identification-is-customer__padding: @indent__base (@indent__xs + @indent__s);
@theme-full-checkout-step-identification__max-width: @theme-full-checkout-shipping-address__max-width;
@theme-full-checkout-step-identification-mobile-action__margin: @indent__base 0 0;
@theme-full-checkout-step-identification-desktop-action__margin: 0;
@theme-full-checkout-step-identification-fieldset-legend__margin: @indent__base (@indent__xs + @indent__s) @indent__xl;
@theme-full-checkout-step-identification-fieldset-legend-desktop__margin: @indent__base 0;
@theme-full-checkout-step-identification-is-customer__background: @color-gray-light01;

//
//  Step - Shipping
//  _____________________________________________

@theme-full-checkout-shipping-address__max-width: 500px;
@theme-full-checkout-shipping-address__margin-top: 28px;

@theme-full-checkout-shipping-policy-action__color: @link__color;
@theme-full-checkout-shipping-policy-tooltip__width: 420px;
@theme-full-checkout-shipping-policy-tooltip-mobile__width: 300px;

@theme-full-checkout-shipping-item__active__border-color: @theme-full-checkout__active__color;
@theme-full-checkout-shipping-item-icon__background-color: @theme-full-checkout-shipping-item__active__border-color;
@theme-full-checkout-shipping-item-icon__color: @color-white;
@theme-full-checkout-shipping-item-icon__content: @icon-checkmark;
@theme-full-checkout-shipping-item__border: @theme-full-checkout__border;
@theme-full-checkout-shipping-item__line-height: 30px;
@theme-full-checkout-shipping-item__margin: 0;
@theme-full-checkout-shipping-items_margin-bottom: @indent__base;
@theme-full-checkout-shipping-item__padding: @indent__base;
@theme-full-checkout-shipping-item__transition: .3s border-color;
@theme-full-checkout-shipping-item__display: grid;
@theme-full-checkout-shipping-item__grid-template-columns: 1fr;
@theme-full-checkout-shipping-item-desktop__grid-template-columns: repeat(2, 1fr);
@theme-full-checkout-shipping-item__grid-column-gap: @indent__s;
@theme-full-checkout-shipping-item__grid-row-gap: @indent__s;


@theme-full-checkout-shipping-item-icon__selected__height: 27px;
@theme-full-checkout-shipping-item-icon__selected__width: 29px;
@theme-full-checkout-shipping-item-before__border-color: @color-gray80;
@theme-full-checkout-shipping-item-before__height: calc(~'100% - 20px');

@theme-full-checkout-shipping-item-mobile__padding: @indent__base;
@theme-full-checkout-shipping-item-mobile__margin: 0;
@theme-full-checkout-shipping-item-mobile__active__padding: (@theme-full-checkout-shipping-item__padding + 2px);

@theme-full-checkout-shipping-method__border: @theme-full-checkout__border;
@theme-full-checkout-shipping-method__padding: @indent__base;

//
//  Step - Payment
//  _____________________________________________

@theme-full-checkout-payment-method-title-mobile__padding: 15px;
@theme-full-checkout-payment-method-content__padding__xl: 22px;
@theme-full-checkout-payment-method-content__padding: @indent__s (@indent__xs + @indent__s) @indent__xl;
@theme-full-checkout-payment-method-content-desktop__padding: @indent__base @indent__base @indent__xl @indent__base;
@theme-full-checkout-payment-method-content__margin: 0 0 0 0;

@theme-full-checkout-payment-option-title__border: @theme-full-checkout-payment-method-title__border;
@theme-full-checkout-payment-option-title__color: @link__color;
@theme-full-checkout-payment-option-title__padding: @theme-full-checkout-payment-method-title__padding;
@theme-full-checkout-payment-option-title-mobile__padding: @theme-full-checkout-payment-method-title-mobile__padding;

@theme-full-checkout-payment-option-title-icon__font-size: 32px;
@theme-full-checkout-payment-option-title-icon__line-height: 16px;
@theme-full-checkout-payment-option-title-icon__margin: 0;
@theme-full-checkout-payment-option-title-icon__color: @minicart-icons-color;
@theme-full-checkout-payment-option-title-icon__hover__color: @theme-full-checkout__active__color;

@theme-full-checkout-billing-address-details__line-height: 27px;
@theme-full-checkout-billing-address-details__padding: 0 0 0 23px;
@theme-full-checkout-billing-address-form__max-width: @theme-full-checkout-shipping-address__max-width;

@theme-full-checkout-payment-method-title__border: @theme-full-checkout-shipping-method__border;
@theme-full-checkout-payment-method-title__padding: @theme-full-checkout-shipping-method__padding;



//
//  Sidebar
//  _____________________________________________

@theme-full-checkout-sidebar__margin: @indent__base;
@theme-full-checkout-sidebar__margin__xl: @indent__xl;
@theme-full-checkout-sidebar__columns: 4;

@theme-full-checkout-summary__padding: 0 @indent__xl + @indent__xl @indent__l;
@theme-full-checkout-summary-title__margin: @indent__s;
@theme-full-checkout-summary-mark-value__color: @theme-full-checkout__color__complementary;
@theme-full-checkout-summary-items__max-height: 370px;
@theme-full-checkout-summary-items__padding: @indent__s + @indent__xs;

@theme-full-sidebar-shipping-information__padding: @indent__l;
@theme-full-sidebar-shipping-information__line-height: @theme-full-checkout-billing-address-details__line-height;

@theme-full-sidebar-shipping-information-edit-icon-image__content: '@{baseDir}O2TI_ThemeFullCheckout/images/pen.svg';
@theme-full-sidebar-shipping-information-edit-icon__color: @minicart-icons-color;
@theme-full-sidebar-shipping-information-edit-icon__content: @icon-settings;
@theme-full-sidebar-shipping-information-edit-icon__font-size: 18px;
@theme-full-sidebar-shipping-information-edit-icon__line-height: 18px;
@theme-full-sidebar-shipping-information-edit-icon__top: 2px;
@theme-full-sidebar-shipping-information-edit-icon__hover__color: @theme-full-checkout__active__color;

@theme-full-sidebar-identification-information__padding: @indent__l;
@theme-full-sidebar-identification-information__line-height: 1;

@theme-full-sidebar-identification-information-edit-icon-image__content: '@{baseDir}O2TI_ThemeFullCheckout/images/pen.svg';
@theme-full-sidebar-identification-information-edit-icon__color: @minicart-icons-color;
@theme-full-sidebar-identification-information-edit-icon__content: @icon-settings;
@theme-full-sidebar-identification-information-edit-icon__font-size: 18px;
@theme-full-sidebar-identification-information-edit-icon__line-height: 18px;
@theme-full-sidebar-identification-information-edit-icon__top: 2px;
@theme-full-sidebar-identification-information-edit-icon__hover__color: @theme-full-checkout__active__color;

//
//  Fixed Magento Luma Theme
//  _____________________________________________

@checkout-payment-option-title__border: @theme-full-checkout-payment-option-title__border;