/* <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/ecommStyle/css/components/commerce-modal-base.css?{ versionKey }"/> */

lightning-modal-base .slds-modal__container {
    width: 50% !important;
    max-width: 40rem !important;
    min-width: 20rem !important;
}

lightning-modal-base .slds-modal__header {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    padding: 2rem 4.5rem 1rem 2rem;
    border-bottom: none;
    text-align: left;
}

lightning-modal-base .slds-modal__close {
    top: 4rem;
    right: 2rem;
    transform: scale(0.8);
    z-index: 1;
}

lightning-modal-base .slds-modal__close lightning-primitive-icon {
    color: var(--ecomm-color-black);
}

lightning-modal-base .slds-modal__header .slds-modal__title {
    font-size: 1.5rem;
    text-align: start;
}

lightning-modal-base .slds-modal__content.slds-modal__content_footless {
    padding: 2rem;
    border-bottom-right-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}

lightning-modal-base .slds-modal__footer {
    padding: 1rem 2rem;
    border-bottom-right-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}

lightning-modal-base .dialog-options {
    display: flex;
    column-gap: 1rem;
}

lightning-modal-base .dialog-options > div:has(button[name="closeCancelModalButton"]),
lightning-modal-base .dialog-options > div:has(button[name="confirmClearCartButton"]) {
    padding: 0 !important;
    flex: 1;
}

lightning-modal-base .slds-modal__content_footless .slds-button_neutral,
lightning-modal-base .slds-modal__footer .slds-button_neutral {
    border-color: var(--ecomm-color-primary-green);
    box-shadow: none;
}

lightning-modal-base .slds-modal__content_footless .slds-button_neutral:focus,
lightning-modal-base .slds-modal__footer .slds-button_neutral:focus {
    border-color: var(--ecomm-color-primary-green);
    background-color: var(--ecomm-color-white);
    color: var(--ecomm-color-primary-green);
}

lightning-modal-base .slds-modal__content_footless .slds-button_neutral:is(:hover, :active),
lightning-modal-base .slds-modal__footer .slds-button_neutral:is(:hover, :active) {
    border-color: var(--ecomm-color-button-background-hover);
    background-color: var(--ecomm-color-button-background-hover);
    color: var(--ecomm-color-white);
}

@media screen and (max-width: 1023.98px) {

    lightning-modal-base .slds-modal__content_footless .slds-button,
    lightning-modal-base .slds-modal__footer .slds-button {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

}

@media screen and (max-width: 767.98px) {

    lightning-modal-base .slds-modal__container {
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        margin: 0 2rem;
    }

}

@media screen and (max-width: 639.98px) {

    lightning-modal-base .dialog-options {
        flex-direction: column-reverse;
        row-gap: 1rem;
    }

}

@media screen and (max-width: 479.98px) {

    lightning-modal-base .slds-modal__container {
        justify-content: flex-end;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 0;
    }

    lightning-modal-base .slds-modal__content.slds-modal__content_footless,
    lightning-modal-base .slds-modal__footer {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

}