@use "../common/utils" as *;
@use "../common/mixins" as *;

.slide-over {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: .4s ease all;
    z-index: 50;

    &__backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .75);
        z-index: 10;
        width: 100vw;
        height: 100vh;
    }

    &__inner {
        border-top: calc-rem(5px) solid rgba(var(--color-secondary), 1);
        position: fixed;
        width: 100%;
        background: #FFF;
        z-index: 15;
        top: 0;
        right: 0;
        height: 100vh;
        transition: .4s ease all;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        @include media-breakpoint-up(md) {
            min-width: calc-rem(400px);
            width: calc-rem(30vw);
            max-width: calc-rem(500px);
        }
    }

    &__content {
        padding: calc-rem(10px 15px);
        height: 100%;
        overflow-y: scroll;
        max-height: calc(100vh - 4.3333333333em);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    &__header {
        background: #FFF;
        border-bottom: 1px solid rgba(var(--color-border), 1);
        padding: calc-rem(15px 5px);

        &--gray {
            background: rgba(var(--color-border));
            border-bottom: 0;
        }

        &--no-border {
            border-bottom: 0;
        }

        a {
            img {
                width: calc-rem(142px);
                height: auto;
                object-fit: contain;

                @include media-breakpoint-up(lg) {
                    width: calc-rem(206px);
                }
            }
        }

        h3 {
            font-size: clamp-font(12px, 14px);
            text-transform: uppercase;
            margin-bottom: 0;
            line-height: 1;
        }
    }

    &__header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    &__left {
        display: flex;
        align-items: center;
    }

    &__right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    &__icons {
        list-style: none;
        margin: calc-rem(0 0 0 10px);
        padding: 0;
        display: flex;
        align-items: center;
        gap: calc-rem(10px);

        li {
            a, button {
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid rgba(var(--color-border));
                background: #FFF;
                border-radius: 9999px;
                width: calc-rem(35px);
                height: calc-rem(35px);
                transition: background 0.2s ease;

                @include media-breakpoint-up(lg) {
                    width: calc-rem(45px);
                    height: calc-rem(45px);
                }

                img {
                    width: calc-rem(12px);
                    object-fit: contain;

                    @include media-breakpoint-up(lg) {
                        width: calc-rem(15px);
                    }
                }

                &:hover {
                    transition: background 0.2s ease;
                    background: rgba(var(--color-secondary), 0.1);
                }
            }
        }
    }

    &__offcanvas {
        display: flex;

        button {
            background: rgba(var(--color-primary), 1) !important;

            img {
                width: calc-rem(10px) !important;
                object-fit: contain;
            }
        }
    }

    &__cart {
        position: relative;

        .badge {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(var(--color-primary), 1);
            width: calc-rem(18px);
            height: calc-rem(18px);
            top: -6px;
            right: -6px;
            border-radius: calc-rem(18px);
            border: 2px solid rgba(var(--color-border));
            font-size: calc-rem(9px);
            font-weight: bold;
            color: #FFF;

            @include media-breakpoint-up(lg) {
                width: calc-rem(24px);
                height: calc-rem(24px);
                border-radius: calc-rem(24px);
            }
        }
    }

    &__footer {
        background: rgba(var(--color-background));
        border-top-right-radius: calc-rem(25px);
        border-top-left-radius: calc-rem(25px);
        padding: calc-rem(30px 15px 30px 15px);

        @include media-breakpoint-up(lg) {
            padding: calc-rem(30px 20px);
        }
    }

    &__subtotal {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: calc-rem(20px);

        p {
            margin-bottom: calc-rem(-5px);
            font-weight: var(--font-weight-bold);
        }

        small {
            font-size: calc-rem(9px);
            opacity: .6;
        }
    }

    &__buttons {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    &--top {
        .slide-over__inner {
            top: 0;
            left: 0;
            right: 0;
            height: auto;
            width: 100%;
            max-width: unset;
        }

        .slide-over__content {
            padding: calc-rem(15px 5px);
            overflow-y: auto;
        }
    }

    &__search-autocomplete {
        padding-bottom: calc-rem(30px);

        @include media-breakpoint-up(lg) {
            padding-bottom: calc-rem(30px);
        }

        .popular-searches {
            .title {
                margin-top: calc-rem(30px);
                font-weight: var(--font-weight-bold);

            }

            .list-search-autocomplete {
                display: flex;
                gap: calc-rem(5px);
                list-style-type: none;
                padding-left: 0;
                flex-wrap: wrap;


                .filter {
                    height: calc-rem(30px);
                    padding-inline: calc-rem(5px);
                    border: calc-rem(1px) solid rgba(var(--color-primary));
                    color: rgba(var(--color-secondary));
                    border-radius: calc-rem(5px);
                    white-space: nowrap;
                    font-size: calc-rem(12px);

                    @include media-breakpoint-up(lg) {
                        height: calc-rem(45px);
                        padding-inline: calc-rem(10px);
                    }

                    &.active {
                        border-color: rgba(var(--color-primary));
                    }
                }
            }
        }

        .popular-products {

            .title {
                margin-top: calc-rem(30px);
                font-weight: var(--font-weight-bold);

            }

            .list-products-autocomplete {
                display: grid;
                width: fit-content;
                list-style-type: none;
                padding-left: 0;
                margin-bottom: 0;
                gap: calc-rem(10px);
                //grid-row-gap: calc-rem(10px);

                @include media-breakpoint-up(md) {
                    grid-template-columns: repeat(2, 1fr);
                    //grid-column-gap: calc-rem(40px);
                }

                @include media-breakpoint-up(lg) {
                    grid-template-columns: repeat(4, 1fr);
                    //grid-column-gap: calc-rem(125px);
                    width: 100%;
                }

                .card-product-search {
                    display: flex;
                    width: 100%;
                    gap: calc-rem(10px);
                    align-items: center;

                    @include media-breakpoint-up(md) {
                        max-width: calc-rem(300px);
                    }

                    figure {
                        aspect-ratio: 1;
                        width: calc-rem(75px);
                        height: calc-rem(75px);
                        flex: none;
                        border: calc-rem(1px) solid rgba(var(--color-border));
                        border-radius: var(--border-radius-small);
                        overflow: hidden;

                        @include media-breakpoint-up(lg) {
                            width: calc-rem(85px);
                            height: calc-rem(85px);
                        }


                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                    }

                    &__content {
                        .product-title {
                            font-size: clamp-font(12px, 14px);
                            line-height: calc(20/14);
                            text-transform: initial;
                            font-family: var(--font-family-body), sans-serif;
                            margin-bottom: calc-rem(5px);
                            font-variation-settings: var(--font-variation-settings-extended-bold);
                            @include truncate(2);
                        }

                    }


                }


            }

            .button {
                margin-top: calc-rem(20px);
            }

        }


    }

}
