/* <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/ecommStyle/css/components/commerce-quantity-selector.css?{ versionKey }"/> */
/* 
    This component is used on the "Cart" page
*/

/* QTY RULE ICON */

commerce-quantity-selector > span {
    grid-column-gap: 8px;
}

commerce-quantity-selector > span > commerce-quantity-selector-popover {
    width: 1.5rem !important;
}

commerce-quantity-selector commerce-quantity-selector-popover [name="source"] lightning-button-icon {
    margin: 0 !important;
}

commerce-quantity-selector commerce-quantity-selector-popover [name="source"] lightning-button-icon button.slds-button_icon {
    position: relative;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 1.5rem;
}

commerce-quantity-selector commerce-quantity-selector-popover [name="source"] lightning-button-icon button.slds-button_icon lightning-primitive-icon {
    opacity: 0;
}

commerce-quantity-selector commerce-quantity-selector-popover [name="source"] lightning-button-icon button.slds-button_icon::after {
    display: block;
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z' fill='%23D32028'/%3E%3C/svg%3E%0A");
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* QTY RULE POPUP */

commerce-quantity-selector commerce-quantity-selector-popover lightning-popup .slds-popover {
    max-width: 214px;
    color: var(--ecomm-color-white-01);
    border: 0;
    border-radius: 0.25rem;
    background: var(--ecomm-color-black-01);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.16);
}

commerce-quantity-selector commerce-quantity-selector-popover lightning-popup .slds-popover__close {
    top: 50%;
    right: 0.5rem !important;
    margin: 0;
    transform: translateY(-50%);
}

commerce-quantity-selector commerce-quantity-selector-popover lightning-popup .slds-popover__close button.slds-button_icon {
    position: relative;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
}

commerce-quantity-selector commerce-quantity-selector-popover lightning-popup .slds-popover__close button.slds-button_icon lightning-primitive-icon {
    opacity: 0;
}

commerce-quantity-selector commerce-quantity-selector-popover lightning-popup .slds-popover__close button.slds-button_icon::after {
    display: block;
    content: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.34332 6.84332L12.0001 12.5001M12.0001 12.5001L17.657 18.157M12.0001 12.5001L17.657 6.84326M12.0001 12.5001L6.34326 18.157' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

commerce-quantity-selector commerce-quantity-selector-popover lightning-popup .slds-popover__body {
    padding: 0.5rem 2.125rem 0.5rem 0.5rem;
}

commerce-quantity-selector commerce-quantity-selector-popover lightning-popup .slds-popover__body ul {
    margin-left: 0;
}

commerce-quantity-selector commerce-quantity-selector-popover lightning-popup .slds-popover__body ul li {
    margin-left: 1.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
}

commerce-quantity-selector commerce-quantity-selector-popover lightning-popup .slds-popover__body ul li + li {
    margin-top: 0.125rem;
}

/* QTY BUTTONS */

commerce-quantity-selector commerce-number-input span.slds-grid[role="group"] {
    border-radius: 0.25rem;
    transition: box-shadow 0.1s !important;
}

commerce-quantity-selector commerce-number-input button.number-input__decrement-button,
commerce-quantity-selector commerce-number-input input.number-input__input,
commerce-quantity-selector commerce-number-input button.number-input__increment-button {
    border-color: var(--ecomm-color-white-06) !important;
    background-color: var(--ecomm-color-white-01) !important;
    transition: color 0.1s, border-color 0.1s, background-color 0.1s, box-shadow 0.1s !important;
}

commerce-quantity-selector commerce-number-input:has(button:hover) button.number-input__decrement-button:not(:disabled),
commerce-quantity-selector commerce-number-input:has(button:focus) button.number-input__decrement-button:not(:disabled),
commerce-quantity-selector commerce-number-input:has(input:hover) button.number-input__decrement-button:not(:disabled),
commerce-quantity-selector commerce-number-input:has(input:focus) button.number-input__decrement-button:not(:disabled),
commerce-quantity-selector commerce-number-input:has(button:hover) input.number-input__input:not(:disabled),
commerce-quantity-selector commerce-number-input:has(button:focus) input.number-input__input:not(:disabled),
commerce-quantity-selector commerce-number-input:has(input:hover) input.number-input__input:not(:disabled),
commerce-quantity-selector commerce-number-input:has(input:focus) input.number-input__input:not(:disabled),
commerce-quantity-selector commerce-number-input:has(button:hover) button.number-input__increment-button:not(:disabled),
commerce-quantity-selector commerce-number-input:has(button:focus) button.number-input__increment-button:not(:disabled),
commerce-quantity-selector commerce-number-input:has(input:hover) button.number-input__increment-button:not(:disabled),
commerce-quantity-selector commerce-number-input:has(input:focus) button.number-input__increment-button:not(:disabled) {
    border-color: var(--ecomm-color-primary-02) !important;
}

commerce-quantity-selector commerce-number-input:has(button:hover) span.slds-grid[role="group"],
commerce-quantity-selector commerce-number-input:has(button:focus) span.slds-grid[role="group"],
commerce-quantity-selector commerce-number-input:has(input:hover) span.slds-grid[role="group"],
commerce-quantity-selector commerce-number-input:has(input:focus) span.slds-grid[role="group"] {
    box-shadow: var(--ecomm-button-box-shadow-focus);
}

commerce-quantity-selector commerce-number-input button.number-input__decrement-button,
commerce-quantity-selector commerce-number-input button.number-input__increment-button {
    position: relative;
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    padding: 0 !important;
    box-shadow: unset !important;
}

commerce-quantity-selector commerce-number-input button.number-input__decrement-button {
    border-right: 0;
}

commerce-quantity-selector commerce-number-input button.number-input__increment-button {
    border-left: 0;
}

commerce-quantity-selector commerce-number-input input.number-input__input {
    width: 3rem !important;
    padding-left: 0;
    padding-right: 0;
    text-align: center !important;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--ecomm-color-black-02) !important;
    border: 1px solid var(--ecomm-color-white-06);
    box-shadow: unset;
    transition: color 0.1s, border-color 0.1s, box-shadow 0.1s !important;
}

commerce-quantity-selector commerce-number-input input.number-input__input:focus {
    box-shadow:
        inset -1px -1px 0 0 var(--ecomm-color-form-field-border-focus),
        inset 1px -1px 0 0 var(--ecomm-color-form-field-border-focus),
        inset -1px 1px 0 0 var(--ecomm-color-form-field-border-focus),
        inset 1px 1px 0 0 var(--ecomm-color-form-field-border-focus);
}

/* Button Icons */

commerce-quantity-selector commerce-number-input button.number-input__decrement-button::after,
commerce-quantity-selector commerce-number-input button.number-input__increment-button::after {
    display: block;
    position: absolute;
    top: 0.5625rem;
    left: 0.6875rem;
    width: 1.5rem;
    height: 1.75rem;
    opacity: 1;
    transition: opacity 0.1s;
}

commerce-quantity-selector commerce-number-input button.number-input__decrement-button::after {
    content: url("data:image/svg+xml,%3Csvg width='24' height='28' viewBox='0 0 24 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4.28576C0 2.07663 1.79086 0.285767 4 0.285767H24V27.7143H4C1.79086 27.7143 0 25.9235 0 23.7143V4.28576Z' fill='white'/%3E%3Cpath d='M4.5 13.1429V14.8572H19.5V13.1429H4.5Z' fill='%233B3F42'/%3E%3C/svg%3E%0A");
}

commerce-quantity-selector commerce-number-input button.number-input__increment-button::after {
    content: url("data:image/svg+xml,%3Csvg width='24' height='28' viewBox='0 0 24 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-0.000244141 4.28576C-0.000244141 2.07663 1.79062 0.285767 3.99976 0.285767H23.9998V27.7143H3.99976C1.79062 27.7143 -0.000244141 25.9235 -0.000244141 23.7143V4.28576Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.2547 14.8572H4.49976L4.49976 13.1429H11.2547V5.43427L12.7547 5.43427V13.1429H19.4998V14.8572H12.7547V22.5771H11.2547V14.8572Z' fill='%233B3F42'/%3E%3C/svg%3E%0A");
}

commerce-quantity-selector commerce-number-input button.number-input__decrement-button:disabled::after,
commerce-quantity-selector commerce-number-input button.number-input__increment-button:disabled::after {
    opacity: 0.5;
}

commerce-quantity-selector commerce-number-input button.number-input__decrement-button lightning-icon,
commerce-quantity-selector commerce-number-input button.number-input__increment-button lightning-icon {
    opacity: 0;
}