// =============================================================================
// Stencil Checkout - Customize the Optimized Single-Page Checkout experience
// =============================================================================

// =============================================================================
//
// IMPORTANT DISCLAIMER
// Please do not nest elements within class selectors, and do not use class selectors other than those given below.
// Future support is guaranteed only if class selectors' structure and naming are left unchanged.
//
// =============================================================================

//
// Header Section
// Background, Logo Position
// -----------------------------------------------------------------------------

*:focus {
    outline-color: stencilColor("optimizedCheckout-colorFocus");
}

.optimizedCheckout-header {
    background-color: stencilColor("optimizedCheckout-header-backgroundColor");
    /* stylelint-disable function-url-quotes*/
    background-image: url(stencilImage('optimizedCheckout-backgroundImage', 'optimizedCheckout-backgroundImage-size'));
    /* stylelint-enable */
    background-size: cover;
    border-color: stencilColor("optimizedCheckout-header-borderColor");
    color: stencilColor("optimizedCheckout-header-textColor");

    //
    // TODO:
    // Configure media query to be 'desktop' breakpoint size
    // -----------------------------------------------------------------------------
    @media (min-width: 801px) {
        text-align: stencilString("optimizedCheckout-logo-position");
    }
}

//
// Primary and Secondary Headings
// Text Color & Typography
// .optimizedCheckout-headingPrimary styles top-level headings.
// .optimizedCheckout-headingSecondary styles certain lower-level elements, such as descriptions of cart items.
// -----------------------------------------------------------------------------

.optimizedCheckout-headingPrimary {
    color: stencilColor("optimizedCheckout-headingPrimary-color");
    font-family: stencilFontFamily("optimizedCheckout-headingPrimary-font"), Arial, Helvetica, sans-serif;
    font-weight: stencilFontWeight("optimizedCheckout-headingPrimary-font");
}

.optimizedCheckout-headingSecondary {
    color: stencilColor("optimizedCheckout-headingSecondary-color");
    font-family: stencilFontFamily("optimizedCheckout-headingSecondary-font"), Arial, Helvetica, sans-serif;
    font-weight: stencilFontWeight("optimizedCheckout-headingSecondary-font");
}

//
// Body
// Background & Shipping Method Overlay
// -----------------------------------------------------------------------------

body {
    background-color: stencilColor("optimizedCheckout-body-backgroundColor");
}

.optimizedCheckout-overlay {
    background-color: stencilColor("optimizedCheckout-body-backgroundColor");
    border-color: stencilColor("optimizedCheckout-step-borderColor");
    color: stencilColor("optimizedCheckout-contentPrimary-color");
}

//
// Primary & Secondary Content
// Text Color & Typography
// .optimizedCheckout-contentPrimary styles body text in the Order Summary/Order Confirmation; drop-down-list items; and text that summarizes completed steps.
// .optimizedCheckout-contentSecondary styles check boxes' text labels, and lower-level text in the Order Summary.
// -----------------------------------------------------------------------------

.optimizedCheckout-contentPrimary {
    color: stencilColor("optimizedCheckout-contentPrimary-color");
    font-family: stencilFontFamily("optimizedCheckout-contentPrimary-font"), Arial, Helvetica, sans-serif;
    font-weight: stencilFontWeight("optimizedCheckout-contentPrimary-font");
}

.optimizedCheckout-contentSecondary {
    color: stencilColor("optimizedCheckout-contentSecondary-color");
    font-family: stencilFontFamily("optimizedCheckout-contentSecondary-font"), Arial, Helvetica, sans-serif;
    font-weight: stencilFontWeight("optimizedCheckout-contentSecondary-font");
}

//
// Primary Button
// Background & Border & Text Color & Typography
// Styles the CONTINUE button for each step, & the final confirmation button.
// -----------------------------------------------------------------------------

.optimizedCheckout-buttonPrimary {
    background-color: stencilColor("optimizedCheckout-buttonPrimary-backgroundColor");
    border-color: stencilColor("optimizedCheckout-buttonPrimary-borderColor");
    color: stencilColor("optimizedCheckout-buttonPrimary-color");
    font-family: stencilFontFamily("optimizedCheckout-buttonPrimary-font"), Arial, Helvetica, sans-serif;
    font-weight: stencilFontWeight("optimizedCheckout-buttonPrimary-font");

    &:focus,
    &:hover {
        background-color: stencilColor("optimizedCheckout-buttonPrimary-backgroundColorHover");
        border-color: stencilColor("optimizedCheckout-buttonPrimary-borderColorHover");
        color: stencilColor("optimizedCheckout-buttonPrimary-colorHover");
    }

    &:focus {
        border-color: stencilColor("optimizedCheckout-colorFocus");
        box-shadow: 0 0 3px stencilColor("optimizedCheckout-colorFocus");
    }

    &:active {
        background-color: stencilColor("optimizedCheckout-buttonPrimary-backgroundColorActive");
        border-color: stencilColor("optimizedCheckout-buttonPrimary-borderColorActive");
        color: stencilColor("optimizedCheckout-buttonPrimary-colorActive");
    }

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled].is-active,
    &[disabled].is-loading,
    &[disabled].active {
        background-color: stencilColor("optimizedCheckout-buttonPrimary-backgroundColorDisabled");
        border-color: stencilColor("optimizedCheckout-buttonPrimary-borderColorDisabled");
        color: stencilColor("optimizedCheckout-buttonPrimary-colorDisabled");
    }
}

//
// Secondary Button
// Background & Border & Text Color & Typography
// Styles the EDIT button for each step.
// -----------------------------------------------------------------------------

.optimizedCheckout-buttonSecondary {
    background-color: stencilColor("optimizedCheckout-buttonSecondary-backgroundColor");
    border-color: stencilColor("optimizedCheckout-buttonSecondary-borderColor");
    color: stencilColor("optimizedCheckout-buttonSecondary-color");
    font-family: stencilFontFamily("optimizedCheckout-buttonSecondary-font"), Arial, Helvetica, sans-serif;
    font-weight: stencilFontWeight("optimizedCheckout-buttonSecondary-font");

    &:focus,
    &:hover {
        background-color: stencilColor("optimizedCheckout-buttonSecondary-backgroundColorHover");
        border-color: stencilColor("optimizedCheckout-buttonSecondary-borderColorHover");
        color: stencilColor("optimizedCheckout-buttonSecondary-colorHover");
    }

    &:focus {
        border-color: stencilColor("optimizedCheckout-colorFocus");
        box-shadow: 0 0 3px stencilColor("optimizedCheckout-colorFocus");
    }

    &:active {
        background-color: stencilColor("optimizedCheckout-buttonSecondary-backgroundColorActive");
        border-color: stencilColor("optimizedCheckout-buttonSecondary-borderColorActive");
        color: stencilColor("optimizedCheckout-buttonSecondary-colorActive");
    }

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled].is-active,
    &[disabled].is-loading,
    &[disabled].active {
        background-color: stencilColor("optimizedCheckout-buttonPrimary-backgroundColorDisabled");
        border-color: stencilColor("optimizedCheckout-buttonPrimary-borderColorDisabled");
        color: stencilColor("optimizedCheckout-buttonPrimary-colorDisabled");
    }
}

//
// Links
// Text Color & Typography
// -----------------------------------------------------------------------------

a {
    color: stencilColor("optimizedCheckout-link-color");
    font-family: stencilFontFamily("optimizedCheckout-link-font"), Arial, Helvetica, sans-serif;
    font-weight: stencilFontWeight("optimizedCheckout-link-font");

    &:focus,
    &:hover {
        color: stencilColor("optimizedCheckout-link-hoverColor");
    }
}

//
// Order Summary (Mobile Drawer & Modal)
// Background Color
// -----------------------------------------------------------------------------

.optimizedCheckout-orderSummary {
    background-color: stencilColor("optimizedCheckout-orderSummary-backgroundColor");
    border-color: stencilColor("optimizedCheckout-orderSummary-borderColor");
    box-shadow: 0 4px 8px transparentize(stencilColor("optimizedCheckout-orderSummary-borderColor"), 0.5);
}

.optimizedCheckout-orderSummary-cartSection {
    border-color: stencilColor("optimizedCheckout-orderSummary-borderColor");
}

.optimizedCheckout-checkoutStep {
    border-color: stencilColor("optimizedCheckout-step-borderColor");
}

//
// Checkout Steps
// Background & Text Color
// Styles the large step-number indicators on the page's left side.
// -----------------------------------------------------------------------------

.optimizedCheckout-step {
    background-color: stencilColor("optimizedCheckout-step-backgroundColor");

    &::before {
        color: stencilColor("optimizedCheckout-step-textColor");
    }

    svg {
        fill: stencilColor("optimizedCheckout-step-textColor");
    }
}

//
// Form Labels
// Text Color
// Styles text labels on form fields.
// -----------------------------------------------------------------------------

.optimizedCheckout-form-label {
    color: stencilColor("optimizedCheckout-form-textColor");
}

.form-field--error {
    .optimizedCheckout-form-label,
    .form-inlineMessage {
        color: stencilColor("optimizedCheckout-formField-errorColor");
    }
}
//
// Form Input
// Background, Border, Shadow and Text Color
// Styles form fields.
// -----------------------------------------------------------------------------

$optimizedCheckout-input-boxShadow: inset 0 1px 1px stencilColor("optimizedCheckout-formField-shadowColor");
$optimizedCheckout-input--focus-boxShadow: 0 0 3px transparentize(stencilColor("optimizedCheckout-colorFocus"), 0.4);
$optimizedCheckout-input--error-boxShadow: 0 0 3px transparentize(stencilColor("optimizedCheckout-formField-errorColor"), 0.4);

.optimizedCheckout-form-input,
.optimizedCheckout-form-select {
    background-color: stencilColor("optimizedCheckout-formField-backgroundColor");
    border-color: stencilColor("optimizedCheckout-formField-borderColor");
    box-shadow: $optimizedCheckout-input-boxShadow;
    color: stencilColor("optimizedCheckout-formField-textColor");

    &::placeholder {
        color: stencilColor("optimizedCheckout-formField-placeholderColor");
    }

    .form-field--error & {
        background-color: stencilColor("optimizedCheckout-formField-backgroundColor");
        border-color: stencilColor("optimizedCheckout-formField-errorColor");
        box-shadow: $optimizedCheckout-input--error-boxShadow, $optimizedCheckout-input-boxShadow;
    }
}

.optimizedCheckout-form-input:focus,
.optimizedCheckout-form-select:focus,
.optimizedCheckout-form-select:hover {
    background-color: stencilColor("optimizedCheckout-formField-backgroundColor");
    border-color: stencilColor("optimizedCheckout-colorFocus");
    box-shadow: $optimizedCheckout-input--focus-boxShadow, $optimizedCheckout-input-boxShadow;
}

.optimizedCheckout-form-label::before {
    .optimizedCheckout-form-radio + &,
    .optimizedCheckout-form-checkbox + & {
        background-color: stencilColor("optimizedCheckout-formField-backgroundColor");
        border-color: stencilColor("optimizedCheckout-formField-borderColor");
        box-shadow: $optimizedCheckout-input-boxShadow;
        opacity: 1;
    }

    .optimizedCheckout-form-radio:checked + &,
    .optimizedCheckout-form-checkbox:checked + & {
        background-color: stencilColor("optimizedCheckout-formField-inputControlColor");
        border-color: stencilColor("optimizedCheckout-formField-inputControlColor");
        box-shadow: none;
    }

    .optimizedCheckout-form-radio:focus + &,
    .optimizedCheckout-form-checkbox:focus + & {
        border-color: stencilColor("optimizedCheckout-colorFocus");
        box-shadow: $optimizedCheckout-input--focus-boxShadow, $optimizedCheckout-input-boxShadow;
    }

    .optimizedCheckout-form-radio:focus:checked + &,
    .optimizedCheckout-form-checkbox:focus:checked + & {
        box-shadow: $optimizedCheckout-input--focus-boxShadow;
    }
}

//
// Discount Banners
// Background & Text & Icon Color
// Styles discount banners.
// -----------------------------------------------------------------------------

.optimizedCheckout-discountBanner {
    background-color: stencilColor("optimizedCheckout-discountBanner-backgroundColor");
    color: stencilColor("optimizedCheckout-discountBanner-textColor");
    font-family: stencilFontFamily("optimizedCheckout-link-font"), Arial, Helvetica, sans-serif;
    font-weight: stencilFontWeight("optimizedCheckout-link-font");

    svg {
        fill: stencilColor("optimizedCheckout-discountBanner-iconColor");
    }
}

//
// Form Checklist (Shipping / Payment methods)
// Background & Border & Text Color
// Styles form checklists
// -----------------------------------------------------------------------------

.optimizedCheckout-form-checklist {
    background-color: stencilColor("optimizedCheckout-formChecklist-backgroundColor");
    border-color: stencilColor("optimizedCheckout-formChecklist-borderColor");
    color: stencilColor("optimizedCheckout-formChecklist-color");
}

.optimizedCheckout-form-checklist-item {
    background-color: stencilColor("optimizedCheckout-formChecklist-backgroundColor");
    border-color: stencilColor("optimizedCheckout-formChecklist-borderColor");
}

.optimizedCheckout-form-checklist-item:hover,
.optimizedCheckout-form-checklist-item--selected {
    background-color: stencilColor("optimizedCheckout-formChecklist-backgroundColorSelected");
    border-color: stencilColor("optimizedCheckout-formChecklist-borderColor");
}

.optimizedCheckout-form-checklist-checkbox {
    ~ .form-label::after,
    ~ .form-label::before {
        background-color: stencilColor("optimizedCheckout-formField-backgroundColor");
        border-color: stencilColor("optimizedCheckout-formField-borderColor");
    }

    &:focus ~ .form-label {
        box-shadow: inset 0 0 0 1px stencilColor("optimizedCheckout-colorFocus");
    }

    &:checked ~ .form-label::before {
        border-color: stencilColor("optimizedCheckout-formField-inputControlColor");
    }

    &:checked ~ .form-label::after {
        background: stencilColor("optimizedCheckout-formField-inputControlColor");
    }
}

//
// Loading Toaster
// Background & Text Color
// Styles the Loading Toaster
// -----------------------------------------------------------------------------

.optimizedCheckout-loadingToaster {
    background-color: stencilColor("optimizedCheckout-loadingToaster-backgroundColor");
    color: stencilColor("optimizedCheckout-loadingToaster-textColor");
}
