/*-------------------------------------------
* Wishlist page - Elements styles
* For exceeding file size purposes, this file contains only the CSS variables
* CSS tokens which need to use Themes Settings are in wishlist-css-token.css file
*------------------------------------------*/
:root {
    --theme-success-text: rgb(var(--success-color));
    --theme-success-background: rgb(var(--success-background));
    --theme-error-text: rgb(var(--error-color));
    --theme-error-background: rgb(var(--error-background));

    --theme-heading-font-family: var(--heading-font-family);
    --theme-heading-text-transform: var(--heading-text-transform);

    --theme-text-font-family: var(--text-font-family);
    --theme-text-font-weight-bold: var(--text-font-bold-weight);
    --theme-text-font-size: calc(var(--base-font-size) - 1px);
    --theme-text-line-height: 1.6;

    --theme-button-font-size: calc(var(--base-font-size) - 2px);
    --theme-button-text-transform: uppercase;
    --theme-button-letter-spacing: 2px;
    --theme-button-font-weight: var(--theme-text-font-weight-bold);
    --theme-button-text-color: rgb(var(--primary-button-text-color));
    --theme-button-background-color: rgb(var(--primary-button-background));
    --theme-button-border-radius: var(--button-border-radius);
    --theme-button-height: var(--button-height);

    --theme-border-color: rgb(var(--border-color));

    /* page content styles */
    --ooo-wl-page-content-separation-color: none;

    /* product card container styles */
    --ooo-wl-page-product-card-gap: 16px;
    --ooo-wl-page-product-card-info-wrapper-gap: 6px;

    --ooo-wl-page-product-card-container-row-gap: 32px;
    --ooo-wl-page-product-card-container-column-gap: 12px;

    /* product card vendor */
    --ooo-wl-page-product-card-vendor-font-size: var(--heading-xsmall-font-size);
    --ooo-wl-page-product-card-vendor-line-height: 1.46636;
    --ooo-wl-page-product-card-vendor-font-family: var(--theme-text-font-family);
    --ooo-wl-page-product-card-vendor-letter-spacing: 1px;
    --ooo-wl-page-product-card-vendor-text-transform: uppercase;
    --ooo-wl-page-product-card-vendor-font-weight: var(--theme-text-font-weight-bold);

    /* product card title */
    --ooo-wl-page-product-card-title-line-height: var(--theme-text-line-height);
    --ooo-wl-page-product-card-title-font-size: var(--theme-text-font-size);
    --ooo-wl-page-product-card-title-font-family: var(--theme-text-font-family);
    --ooo-wl-page-product-card-title-letter-spacing: initial;

    /* product card price */
    --ooo-wl-page-product-card-price-color: rgb(var(--text-color));
    --ooo-wl-page-product-card-price-color-compare: rgb(var(--text-color), .7);
    --ooo-wl-page-product-card-price-order-compare: 1;
    --ooo-wl-page-product-card-price-line-height: var(--theme-text-line-height);
    --ooo-wl-page-product-card-price-font-size: var(--theme-text-font-size);
    --ooo-wl-page-product-card-price-font-family: var(--theme-text-font-family);
    --ooo-wl-page-product-card-price-letter-spacing: initial;

    /* product card compare at price */
    --ooo-wl-page-product-card-compare-at-price-color: rgb(var(--product-on-sale-accent));
    --ooo-wl-page-product-card-compare-at-price-line-height: var(--theme-text-line-height);
    --ooo-wl-page-product-card-compare-at-price-font-size: var(--theme-text-font-size);
    --ooo-wl-page-product-card-compare-at-price-font-family: var(--theme-text-font-family);
    --ooo-wl-page-product-card-compare-at-price-letter-spacing: initial;

    /* product card unit price */
    --ooo-wl-page-product-card-unit-price-color: rgb(var(--text-color));
    --ooo-wl-page-product-card-unit-price-line-height: var(--theme-text-line-height);
    --ooo-wl-page-product-card-unit-price-font-size: var(--theme-text-font-size);
    --ooo-wl-page-product-card-unit-price-font-family: var(--theme-text-font-family);
    --ooo-wl-page-product-card-unit-price-letter-spacing: initial;

    /* product card form */
    --ooo-wl-page-product-card-form-select-font-size: var(--theme-text-font-size);
    --ooo-wl-page-product-card-form-select-border-radius: var(--theme-button-border-radius);
    --ooo-wl-page-product-card-form-select-border-color: rgb(var(--border-color));
    --ooo-wl-page-product-card-form-select-letter-spacing: normal;
    --ooo-wl-page-product-card-form-select-error-border-color: rgb(var(--error-color));

    --ooo-wl-page-product-card-form-button-padding: 0 30px;
    --ooo-wl-page-product-card-form-button-height: var(--theme-button-height);
    --ooo-wl-page-product-card-form-button-font-family: var(--theme-text-font-family);
    --ooo-wl-page-product-card-form-button-font-size: var(--theme-button-font-size);
    --ooo-wl-page-product-card-form-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-page-product-card-form-button-font-weight: var(--theme-button-font-weight);
    --ooo-wl-page-product-card-form-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-page-product-card-form-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-page-product-card-form-button-background: var(--theme-button-background-color);
    --ooo-wl-page-product-card-form-button-color: var(--theme-button-text-color);
    --ooo-wl-page-product-card-form-button-disabled-background: rgb(var(--secondary-background));
    --ooo-wl-page-product-card-form-button-disabled-color: rgb(var(--root-text-color));
    /*--ooo-wl-page-product-card-form-button-line-height: var(--theme-button-height);*/

    /* empty page styles */
    --ooo-wl-page-empty-title-font-family: var(--theme-heading-font-family);
    --ooo-wl-page-empty-title-text-transform: var(--theme-heading-text-transform);
    --ooo-wl-page-empty-button-width: 100%;
    --ooo-wl-page-empty-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-page-empty-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-page-empty-button-line-height: var(--theme-button-height);
    --ooo-wl-page-empty-button-color: var(--theme-button-text-color);
    --ooo-wl-page-empty-button-font-size: var(--theme-button-font-size);
    --ooo-wl-page-empty-button-background: var(--theme-button-background-color);
    --ooo-wl-page-empty-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-page-empty-button-font-weight: var(--theme-button-font-weight);
    --ooo-wl-page-empty-button-padding: 0;

    /* not accessible page styles */
    --ooo-wl-page-not-accessible-title-font-family: var(--theme-heading-font-family);
    --ooo-wl-page-not-accessible-title-text-transform: var(--theme-heading-text-transform);
    --ooo-wl-page-not-accessible-button-width: 100%;
    --ooo-wl-page-not-accessible-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-page-not-accessible-button-color: var(--theme-button-text-color);
    --ooo-wl-page-not-accessible-button-background: var(--theme-button-background-color);
    --ooo-wl-page-not-accessible-button-font-size: var(--theme-button-font-size);
    --ooo-wl-page-not-accessible-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-page-not-accessible-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-page-not-accessible-button-font-weight: var(--theme-button-font-weight);
    --ooo-wl-page-not-accessible-button-line-height: var(--theme-button-height);
    --ooo-wl-page-not-accessible-button-padding: 0;

    /* popup login styles */
    --ooo-wl-popup-title-font-family: var(--theme-heading-font-family);
    --ooo-wl-popup-title-text-transform: var(--theme-heading-text-transform);
    --ooo-wl-popup-button-color: var(--theme-button-text-color);
    --ooo-wl-popup-button-background: var(--theme-button-background-color);
    --ooo-wl-popup-button-font-size: var(--theme-button-font-size);
    --ooo-wl-popup-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-popup-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-popup-button-line-height: var(--theme-button-height);
    --ooo-wl-popup-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-popup-button-font-weight: var(--theme-button-font-weight);
    --ooo-wl-popup-button-padding: 0;

    /* share wishlist button */
    --ooo-wl-copy-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-copy-button-font-size: var(--theme-button-font-size);
    --ooo-wl-copy-button-font-family: var(--theme-text-font-family);
    --ooo-wl-copy-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-copy-button-line-height: var(--theme-button-height);
    --ooo-wl-copy-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-copy-button-font-weight: var(--theme-button-font-weight);
    --ooo-wl-copy-button-padding: 0 20px;

    /* variant popup */
    --ooo-wl-variant-popup-padding: 24px;
    --ooo-wl-variant-popup-form-border-color: var(--theme-border-color);
    --ooo-wl-variant-popup-title-font-size: 1rem;

    --ooo-wl-block-swatch-padding: 9px 18px;
    --ooo-wl-block-swatch-border-radius: var(--theme-button-border-radius);
    --ooo-wl-block-swatch-border-color: var(--theme-border-color);
}

@media screen and (min-width: 740px) {
    :root {
        --ooo-wl-page-product-card-container-row-gap: 48px;
        --ooo-wl-page-product-card-container-column-gap: 24px;

        --ooo-wl-variant-popup-padding: 40px;
    }
}

/*-------------------------------------------
* Wishlist page - tooltip notification
*------------------------------------------*/
ooo-wl-tooltip {
    --ooo-wl-page-product-card-form-tooltip-success-color: var(--theme-success-text);
    --ooo-wl-page-product-card-form-tooltip-success-background: var(--theme-success-background);
    --ooo-wl-page-product-card-form-tooltip-error-color: var(--theme-error-text);
    --ooo-wl-page-product-card-form-tooltip-error-background: var(--theme-error-background);
}

/*-------------------------------------------
* Product page - Add to wishlist button
*------------------------------------------*/
:root {
    --ooo-wl-product-page-button-font-family: var(--theme-button-font-family);
    --ooo-wl-product-page-button-font-size: var(--theme-button-font-size);
    --ooo-wl-product-page-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-product-page-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-product-page-button-line-height: var(--theme-button-height);
    --ooo-wl-product-page-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-product-page-button-font-weight: var(--theme-button-font-weight);
}