@use "../base" as *;
@use "../abstracts" as *;
.ui-widget-overlay {
    z-index: 10 !important;
    background-color: $dark-gray;
    background-blend-mode: normal, color;
    backdrop-filter: blur(6px);
    opacity: .7;
}
.add-to-cart_product_widget {
    z-index: 12 !important;
    padding: 24px 0;
    background-color: #fff !important;
    border-radius: 8px !important;
    max-width: calc(100vw - 32px);
    @include breakpoint(small) {
        width: 450px !important;
    }
    @include breakpoint(medium) {
        width: 738px !important;
    }
    @include breakpoint(large) {
        width: 962px !important;
    }
    @include breakpoint(extra_large) {
        width: 1336px !important;
    }
    .ui-widget-header {
        background: #fff !important; // Override base modal styling.
        position: relative;
        padding: 0 68px;
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: center;
        @include breakpoint(medium) {
            padding: 0 76px;
        }
        .ui-dialog-title {
            font-family: $font-primary;
            font-size: 1.5rem;
            font-style: normal;
            font-weight: 500;
            line-height: 2rem;
            color: $dark-gray;
            margin: 0;
            white-space: normal;
            overflow: visible;
            text-overflow: unset;
            width: 100%;
            text-align: center;
            @include breakpoint(medium) {
                font-size: 1.75rem;
                line-height: 2.25rem;
            }
        }
        .ui-dialog-titlebar-close {
            position: absolute;
            top: 50%;
            right: 18px;
            transform: translateY(-50%);
            font-family: $font-primary;
            font-size: 0;
            line-height: 0;
            display: flex;
            align-items: center;
            margin: 0;
            gap: 0;
            padding: 0;
            width: 44px;
            height: 44px;
            min-width: 44px;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            color: transparent;
            cursor: pointer;
            @include breakpoint(medium) {
                right: 28px;
                min-width: 44px;
            }

            &::before,
            &::after {
                position: absolute;
                content: '';
                display: block;
                width: 18px;
                height: 2px;
                border-radius: 2px;
                background-color: $brand-red;
            }

            &::before {
                transform: rotate(45deg);
            }

            &::after {
                transform: rotate(-45deg);
            }

            .ui-button-icon,
            .ui-button-icon-space {
                display: none;
            }
        }
    }
    .ui-dialog-content {
        padding: 0 24px !important;
        @include breakpoint(medium) {
            padding: 0 32px !important;
        }
        .add-to-cart_product {
            &__product {
                &--wrapper {
                    margin: 24px 0;
                    .product-info {
                        margin: 0 0 12px;
                        display: grid;
                        align-items: stretch;
                        grid-template-columns: repeat(1, 1fr);
                        grid-template-areas: 'image''line''title''class''dimensions''weight';
                        @include breakpoint(medium) {
                            grid-template-columns: repeat(4, 1fr);
                            grid-template-areas: 'image title title title'
                                                 'line class dimensions weight';
                        }
                        @include breakpoint(large) {
                            grid-template-columns: repeat(6, 1fr);
                            grid-template-areas: 'image line title class dimensions weight';
                            border-radius: 8px;
                            border: 1px solid $light-gray;
                        }
                        .product-info__item {
                            width: 100%;
                            color: $dark-gray;
                            font-family: $font-primary;
                            font-size: .875rem;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 1.125rem;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            @include breakpoint(medium) {
                                padding: 0 16px;
                            }
                            @include breakpoint(large) {
                                justify-content: center;
                                text-align: center;
                                border-right: 1px solid $light-gray;
                                &:last-child {
                                    border-right: none;
                                }
                            }
                        }
                        .product-info__item.image {
                            grid-area: image;
                        }
                        .product-info__item.line {
                            grid-area: line;
                        }
                        .product-info__item.title {
                            grid-area: title;
                        }
                        .product-info__item.class {
                            grid-area: class;
                        }
                        .product-info__item.dimensions {
                            grid-area: dimensions;
                        }
                        .product-info__item.weight {
                            grid-area: weight;
                        }
                        @include breakpoint(medium) {
                            .line, .class, .dimensions, .weight {
                                justify-content: center;
                            }
                        }
                    }
                    .product-info.non_return_valves {
                        grid-template-areas: 'image''line''title''dimensions''weight';
                        @include breakpoint(medium) {
                            grid-template-columns: repeat(3, 1fr);
                            grid-template-areas: 'image title title'
                                                 'line dimensions weight';
                        }
                        @include breakpoint(large) {
                            grid-template-columns: repeat(6, 1fr);
                            grid-template-areas: 'image line title title dimensions weight';
                        }
                    }
                    .product-form {
                        display: flex;
                        justify-content: flex-end;
                        .form-actions {
                            display: flex;
                            margin: 0;
                            gap: 8px;
                            width: 100%;
                            flex-direction: column-reverse;
                            justify-content: center;
                            align-items: center;
                            cursor: pointer;
                            @include breakpoint(small) {
                                flex-direction: row;
                                justify-content: flex-end;
                            }
                            .button {
                                padding: 16px 20px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: 100%;
                                font-size: .75rem;
                                font-style: normal;
                                font-weight: 500;
                                line-height: 1rem;
                                font-family: $font-primary;
                                background-color: $brand-blue;
                                border: 1px solid $brand-blue;
                                border-radius: 4px;
                                color: #fff;
                                margin: 0;
                                @include breakpoint(small) {
                                    font-size: .875rem;
                                    width: auto;
                                }
                                &:hover {
                                    transition: .3s;
                                    background-color: #fff;
                                    color: $dark-gray;
                                }
                            }
                            .continue {
                                background-color: #fff;
                                color: $dark-gray;
                                &:hover {
                                    transition: .3s;
                                    background-color: $brand-blue;
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }
            &__additional-product {
                &--title {
                    margin-bottom: 16px;
                    h3 {
                        color: $dark-gray;
                        font-family: $font-primary;
                        font-size: 1.5rem;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 2rem;
                    }
                }
                &--widget {
                    position: relative;
                    min-height: 600px;
                    .splide__slide {
                        height: auto;
                        article {
                            height: 100%;
                        }
                    }
                    .splide__arrows {
                        z-index: 10;
                        .splide__arrow {
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            margin: auto 0;
                            width: 40px;
                            height: 40px;
                            display: flex;
                            padding: 12px;
                            justify-content: center;
                            align-items: center;
                            gap: 8px;
                            border-radius: 50%;
                            border: 1px solid $light-gray;
                            background: rgba(255, 255, 255, 0.80);
                            box-shadow: 0px 12px 24px -8px rgba(0, 0, 0, 0.24);
                            backdrop-filter: blur(6px);
                            z-index: 2;
                            @include breakpoint(medium) {
                                width: 50px;
                                height: 50px;
                            }
                        }
                        .prev-arrow {
                            left: -25px;
                            svg {
                                rotate: 180deg;
                            }
                        }
                        .next-arrow {
                            right: -25px;
                        }
                    }
                    .splide__track {
                        min-height: 600px;
                        &.hovered {
                            padding-bottom: 0 !important;
                            margin-bottom: 0 !important;
                        }
                    }
                    .product-teaser {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        &__anchor {
                            margin-top: auto;
                        }

                        &__details, &__buttons, &__wrapper--price {
                            height: auto;
                            opacity: 1;
                            margin-bottom: 16px;
                            padding: 0 16px;
                        }

                        &__details {
                            &--dimensions,
                            &--diameter,
                            &--weight {
                                color: $dark-gray;

                                &::before {
                                    background-color: $dark-gray;
                                }
                            }
                        }

                        .gto-commerce-cart-add-to-cart-product-widget {
                            display: grid;
                            grid-template-columns: 106px minmax(0, 1fr);
                            width: 100%;
                            height: 56px;
                            padding: 0;
                            overflow: hidden;

                            .field--name-quantity {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                height: 56px;
                                border-radius: 6px 0 0 6px;
                                background-color: $brand-blue;
                                border-right: 1px solid rgba(255, 255, 255, 0.26);
                            }

                            .form-item-quantity {
                                display: grid;
                                grid-template-columns: 24px 34px 24px;
                                align-items: center;
                                justify-content: center;
                                width: 100%;
                                height: 100%;
                                margin: 0;

                                label {
                                    display: none;
                                }

                                .before,
                                .after {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    width: 24px;
                                    height: 100%;

                                    &::before {
                                        content: "";
                                        display: block;
                                        width: 14px;
                                        height: 14px;
                                        background-color: #fff;
                                        -webkit-mask-position: center;
                                        -webkit-mask-repeat: no-repeat;
                                        -webkit-mask-size: contain;
                                        mask-position: center;
                                        mask-repeat: no-repeat;
                                        mask-size: contain;
                                    }
                                }

                                .before::before {
                                    -webkit-mask-image: url("../../assets/icons/minus.svg");
                                    mask-image: url("../../assets/icons/minus.svg");
                                }

                                .after::before {
                                    -webkit-mask-image: url("../../assets/icons/plus.svg");
                                    mask-image: url("../../assets/icons/plus.svg");
                                }

                                .form-text {
                                    width: 34px !important;
                                    color: #fff;
                                    font-size: 1.125rem;
                                    font-weight: 700;
                                    text-align: center;
                                }
                            }

                            .form-actions {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                height: 56px;
                                margin: 0;
                                border-radius: 0 6px 6px 0;
                                background-color: $brand-blue;
                                box-shadow: 0 16px 28px -20px rgba(28, 120, 225, 0.75);
                            }

                            .add-to-cart-wrapper {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                min-width: 0;
                                width: 100%;
                                height: 100%;
                            }

                            .cart-button-label {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 8px;
                                width: 100%;
                                min-width: 0;
                                height: 100%;
                                padding: 0 12px;
                                color: #fff;
                                font-family: $font-primary;
                                font-size: .95rem;
                                font-weight: 700;
                                line-height: 1.1;
                                text-align: center;
                                white-space: nowrap;
                                cursor: pointer;

                                &::before {
                                    content: "";
                                    display: block;
                                    flex: 0 0 18px;
                                    width: 18px;
                                    height: 18px;
                                    background-image: url("../../assets/icons/shopping-cart.svg");
                                    background-position: center;
                                    background-repeat: no-repeat;
                                    background-size: contain;
                                    filter: brightness(0) invert(1);
                                    transform: translateY(-1px);
                                }

                                @media (max-width: 1199px) {
                                    gap: 4px;
                                    padding: 0 6px;
                                    font-size: .875rem;

                                    &::before {
                                        flex-basis: 14px;
                                        width: 14px;
                                        height: 14px;
                                    }
                                }
                            }

                            input.form-submit {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
}