/*-------------------------------------------
* Wishlist CSS tokens
* 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-text));
    --theme-success-background: rgb(var(--success-background));
    --theme-error-text: rgb(var(--error-text));
    --theme-error-background: rgb(var(--error-background));
    /*OK*/

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

    --theme-text-font-size: var(--text-sm);
    --theme-text-letter-spacing: var(--text-letter-spacing);

    --theme-input-border-radius: var(--input-border-radius);
    --theme-input-padding-block: var(--input-padding-block);
    --theme-input-padding-inline: var(--input-padding-inline) calc(var(--input-padding-inline) * 2);

    --theme-product-card-text-color: rgb(var(--theme-text-color));
    --theme-product-card-text-color-subdued: rgb(var(--theme-text-color) / .6);

    /*OK*/
    --theme-button-padding-block: .75rem;
    --theme-button-padding-inline: 1.5rem;
    --theme-button-text-transform: var(--button-text-transform);
    --theme-button-font-size: var(--button-font-size);
    --theme-button-letter-spacing: var(--button-letter-spacing);
    --theme-button-border-radius: var(--button-border-radius);
    --theme-button-font-family: var(--text-font-family);
    --theme-button-font-weight: var(--text-font-weight);
    --theme-button-line-height: var(--theme-text-line-height);
    --theme-button-outline-color: var(--theme-button-text-color);
    /*OK*/

    /* page content styles */
    --ooo-wl-page-content-separation-color: rgb(var(--theme-border-color));

    /* product card container styles */
    --ooo-wl-page-product-card-gap: 15px;

    /* product card styles */
    --ooo-wl-page-product-card-text-align: center;
    --ooo-wl-page-product-card-info-container-single-padding-block: 10px;
    --ooo-wl-page-product-card-border-radius: 0;
    --ooo-wl-page-product-card-border-bottom-left-radius: 0;
    --ooo-wl-page-product-card-image-container-single-border-bottom-left-radius: var(--rounded-sm);
    --ooo-wl-page-product-card-image-container-single-border-top-right-radius: 0;

    /* product card vendor */
    --ooo-wl-page-product-card-vendor-font-size: var(--theme-text-font-size);
    --ooo-wl-page-product-card-vendor-color: var(--theme-product-card-text-color-subdued);

    /* product card title */
    --ooo-wl-page-product-card-title-font-size: var(--theme-text-font-size);
    --ooo-wl-page-product-card-title-color: var(--theme-product-card-text-color);

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

    /* product card compare at price */
    --ooo-wl-page-product-card-compare-at-price-font-size: var(--theme-text-font-size);
    --ooo-wl-page-product-card-compare-at-price-line-height: var(--theme-text-line-height);
    --ooo-wl-page-product-card-compare-at-price-color: var(--theme-product-card-text-color-subdued);
    --ooo-wl-page-product-card-compare-at-price-letter-spacing: var(--theme-text-letter-spacing);

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

    /* product card form */
    --ooo-wl-page-product-card-form-select-font-size: var(--theme-text-font-size);
    --ooo-wl-page-product-card-form-select-padding-block: var(--theme-input-padding-block);
    --ooo-wl-page-product-card-form-select-padding-inline: var(--theme-input-padding-inline);
    --ooo-wl-page-product-card-form-select-border-radius: var(--theme-input-border-radius);
    --ooo-wl-page-product-card-form-select-letter-spacing: var(--theme-text-letter-spacing);
    --ooo-wl-page-product-card-form-select-border-color: rgb(var(--input-text-color));
    --ooo-wl-page-product-card-form-select-background: transparent;
    --ooo-wl-page-product-card-form-select-error-border-color: var(--theme-error-text);

    --ooo-wl-page-product-card-form-button-font-family: var(--theme-button-font-family);
    --ooo-wl-page-product-card-form-button-font-size: var(--theme-button-font-size);
    --ooo-wl-page-product-card-form-button-font-weight: var(--theme-button-font-weight);
    --ooo-wl-page-product-card-form-button-height: auto;
    --ooo-wl-page-product-card-form-button-padding: var(--theme-button-padding-block) var(--theme-button-padding-inline);
    --ooo-wl-page-product-card-form-button-margin-block: 0;
    --ooo-wl-page-product-card-form-button-text-transform: var(--theme-button-text-transform);
    --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-border-color: var(--theme-button-outline-color);
    --ooo-wl-page-product-card-form-button-border-width: var(--theme-button-border-width);
    --ooo-wl-page-product-card-form-button-disabled-background: var(--theme-button-disabled-background-color);

    /* 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-font-family: var(--theme-button-font-family);
    --ooo-wl-page-empty-button-font-size: var(--theme-button-font-size);
    --ooo-wl-page-empty-button-font-weight: var(--theme-button-font-weight);
    --ooo-wl-page-empty-button-padding: var(--theme-button-padding-block) var(--theme-button-padding-inline);
    --ooo-wl-page-empty-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-page-empty-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-page-empty-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-page-empty-button-color: var(--theme-button-text-color);
    --ooo-wl-page-empty-button-background: var(--theme-button-background-color);
    --ooo-wl-page-empty-button-border-width: var(--theme-button-border-width);
    --ooo-wl-page-empty-button-border-color: var(--theme-button-outline-color);

    /* 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-font-family: var(--theme-button-font-family);
    --ooo-wl-page-not-accessible-button-font-size: var(--theme-button-font-size);
    --ooo-wl-page-not-accessible-button-font-weight: var(--theme-button-font-weight);
    --ooo-wl-page-not-accessible-button-width: 100%;
    --ooo-wl-page-not-accessible-button-padding: var(--theme-button-padding-block) var(--theme-button-padding-inline);
    --ooo-wl-page-not-accessible-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-page-not-accessible-button-letter-spacing: var(--theme-button-letter-spacing);
    --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-border-width: var(--theme-button-border-width);
    --ooo-wl-page-not-accessible-border-color: var(--theme-button-outline-color);

    /* 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-font-family: var(--theme-button-font-family);
    --ooo-wl-popup-button-font-weight: var(--theme-button-font-weight);
    --ooo-wl-popup-button-font-size: var(--theme-button-font-size);
    --ooo-wl-popup-button-padding: var(--theme-button-padding-block) var(--theme-button-padding-inline);
    --ooo-wl-popup-button-text-transform: var(--theme-button-text-transform);
    --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-color: var(--theme-button-text-color);
    --ooo-wl-popup-button-background: var(--theme-button-background-color);
    --ooo-wl-popup-button-border-width: var(--theme-button-border-width);
    --ooo-wl-popup-button-border-color: var(--theme-button-outline-color);

    /* share wishlist button */
    --ooo-wl-copy-button-font-family: var(--theme-button-font-family);
    --ooo-wl-copy-button-font-size: var(--theme-button-font-size);
    --ooo-wl-copy-button-font-weight: var(--theme-button-font-weight);
    --ooo-wl-copy-button-padding: var(--theme-button-padding-block) var(--theme-button-padding-inline);
    --ooo-wl-copy-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-copy-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-copy-button-border-radius: var(--theme-button-border-radius);
}

@media screen and (min-width: 700px) {
    :root {
        --theme-button-padding-block: .875rem;
        --theme-button-padding-inline: 2.5rem;

        --ooo-wl-page-product-card-info-wrapper-gap: 3px;
    }
}

/*-------------------------------------------
* Wishlist page - tooltip notification
*------------------------------------------*/
ooo-wl-page-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);
    --ooo-wl-page-product-card-form-tooltip-letter-spacing: var(--theme-text-letter-spacing);
}

/*-------------------------------------------
* 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-font-weight: var(--theme-button-font-weight);
    --ooo-wl-product-page-button-text-transform: var(--theme-button-text-transform);
    --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-padding-inline: var(--theme-button-padding-inline);
    --ooo-wl-product-page-button-padding-block: var(--theme-button-padding-block);
}

:root {
    --ooo-wl-page-pagination-button-border-radius: 100%;
    --ooo-wl-page-pagination-button-background: rgb(var(--theme-text-color) / .08);
    --ooo-wl-page-pagination-button-width: 3em;
    --ooo-wl-page-pagination-button-height: 3em;
}