/*-------------------------------------------
* Global styles
*------------------------------------------*/
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/*---- Placeholder when loading ------*/
button[loading] {
    opacity: 0;
    visibility: hidden;
}


/*-------------------------------------------
* Wishlist button on product page
*------------------------------------------*/
button {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    justify-self: var(--ooo-wl-product-page-button-justify-self);
    gap: var(--ooo-wl-product-page-button-gap, 12px);
    padding-inline: var(--ooo-wl-product-page-button-padding-inline, 12px);
    padding-block: var(--ooo-wl-product-page-button-padding-block);
    width: var(--ooo-wl-product-page-button-width);
    min-width: var(--ooo-wl-product-page-button-min-width);
    max-width: var(--ooo-wl-product-page-button-max-width, auto);
    min-height: var(--ooo-wl-product-page-button-height);
    margin-block: var(--ooo-wl-product-page-button-margin-block);
    border: none;
    border-radius: var(--ooo-wl-product-page-button-border-radius, 0);
    font-family: var(--ooo-wl-product-page-button-font-family, inherit);
    font-weight: var(--ooo-wl-product-page-button-font-weight);
    font-style: var(--ooo-wl-product-page-button-font-style);
    font-size: var(--ooo-wl-product-page-button-font-size);
    letter-spacing: var(--ooo-wl-product-page-button-letter-spacing);
    line-height: var(--ooo-wl-product-page-button-line-height);
    color: var(--ooo-wl-product-page-button-text-color);
    background-color: var(--ooo-wl-product-page-button-background-color);
    text-transform: var(--ooo-wl-product-page-button-text-transform);
    cursor: pointer;
}

button::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: var(--ooo-wl-product-page-button-border-radius, 0);
    box-shadow: var(--ooo-wl-product-page-shadow-horizontal-offset) var(--ooo-wl-product-page-shadow-vertical-offset) var(--ooo-wl-product-page-shadow-blur-radius) rgba(var(--ooo-wl-product-page-shadow-color), var(--ooo-wl-product-page-shadow-opacity));
}

.button--outline {
    background: transparent;
    border: var(--ooo-wl-product-page-button-border-width, 1px) solid var(--ooo-wl-product-page-button-background-color);
}

.button--link {
    background: transparent;
    text-decoration: underline;
}

button svg {
    color: var(--ooo-wl-product-page-button-icon-color, currentColor);
}

/*---- Button state ------*/
button[aria-checked="true"] svg {
    fill: var(--ooo-wl-product-page-button-icon-stroke-color, currentColor);
}

button[aria-checked="false"][data-icon="false"] [data-state="remove"],
button[aria-checked="true"][data-icon="false"] [data-state="add"] {
    position: absolute;
    transform: translateY(100%);
    height: 100%;
}

/* ----- Loader when update state / button with text ------*/
[data-icon="false"] .loader {
    position: absolute;
    inset: 50% 0 0 50%;
    display: block;
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%);
    animation: loading .4s infinite linear alternate;
}

button[data-icon="false"][aria-busy="true"] {
    background-color: rgba(var(--ooo-wl-product-page-button-background-color), .2);
}

button[data-icon="false"][aria-busy="true"] .loader {
    visibility: visible;
    opacity: 1;
}

button[data-icon="false"][aria-busy="true"] [data-state],
button[data-icon="false"][aria-busy="true"] svg {
    visibility: hidden;
    opacity: 0;
}

button[data-icon="false"][aria-busy="false"] [data-state],
button[data-icon="false"][aria-busy="false"] svg {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s, visibility .3s;
}

button[aria-checked="false"][data-icon="false"] [data-state="remove"],
button[aria-checked="true"][data-icon="false"] [data-state="add"] {
    opacity: 0;
    visibility: hidden;
}

/* ----- Loader when update state / button with icon only ------*/
[data-icon="true"] .loader {
    display: none;
}

button[data-icon="true"][aria-busy="true"][aria-checked="true"] svg {
    animation: pulse 0.3s cubic-bezier(.13,-0.3,.2,1.91);
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes loading {
    0%  { box-shadow: 16px 0 #000, -16px 0 #0002; background: #000 }
    33% { box-shadow: 16px 0 #000, -16px 0 #0002; background: #0002 }
    66% { box-shadow: 16px 0 #0002, -16px 0 #000; background: #0002 }
    100%{ box-shadow: 16px 0 #0002, -16px 0 #000; background: #000 }
}

/*-------------------------------------------
* Variant warning message
*------------------------------------------*/
[data-action="variant-warning"] {
    display: flex;
    gap: 8px;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: .6px;
}

[data-action="variant-warning"][hidden] {
    display: none;
}