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

.product-browser {
    padding: calc-rem(30px 0);

    &__sidebar {
        display: none;

        @include media-breakpoint-up(lg) {
            display: block;
        }
    }

    &__widget {
        border-bottom: 1px solid rgba(var(--color-border), 1);
        padding: calc-rem(20px 0 0 0);

        h3 {
            position: relative;
            font-variation-settings: var(--font-variation-settings-bold);
            text-transform: none;
            font-size: calc-rem(14px);
            margin-bottom: calc-rem(20px);
            line-height: 1;
            cursor: pointer;

            &:after {
                transition: transform 0.2s ease;
                content: '';
                position: absolute;
                right: 0;
                top: calc(50% - 2px);
                width: calc-rem(8px);
                height: calc-rem(4px);
                background: url('../images/icons/icon-dropdown.svg') no-repeat;
                background-size: contain;
            }
        }

        &.is-collapsed {
            h3:after {
                transform: rotate(180deg);
            }

            .product-browser__filters {
                display: none;
            }
        }
    }

    &__filters {
        padding-bottom: calc-rem(10px);

        ul {
            list-style: none;
            margin: 0;
            padding: calc-rem(0 0 10px 0);

            li {
                a {
                    display: inline-block;
                    padding: calc-rem(10px 0 3px 0);
                    margin-bottom: calc-rem(8px);
                    color: rgba(var(--color-secondary), 1);
                    font-size: calc-rem(14px);
                    text-decoration: none;
                    border-bottom: 1px solid transparent;
                    line-height: 1;

                    &:hover {
                        border-bottom: 1px solid rgba(var(--color-primary), 1);
                    }
                }
            }
        }

        .checkbox-group span {
            color: rgba(var(--color-secondary), 1) !important;
            font-size: calc-rem(14px) !important;
        }
    }

    &__header {
        position: relative;
        background: url('../images/product-browser-background.jpg') no-repeat center center;
        background-size: cover;
        padding: calc-rem(25px 15px);
        border-radius: calc-rem(10px);
        overflow: hidden;

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

        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            // Backdrop blur
            backdrop-filter: blur(10px);
        }

        h1 {
            position: relative;
            z-index: 2;
            display: inline;
            border-radius: calc-rem(5px);
            background: #FFF;
            line-height: 1;
            margin-bottom: 0;
            font-size: clamp-font(14px, 18px);
            padding: calc-rem(12px);
        }
    }

    &__mobile-filter-trigger {
        @include media-breakpoint-up(lg) {
            display: none;
        }

        button {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFF;
            background: rgba(var(--color-secondary), 1);
            height: calc-rem(40px);
            border-radius: calc-rem(5px);
            margin-top: calc-rem(10px);

            img {
                margin-right: calc-rem(10px);
            }
        }
    }

    &__active-filters {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-bottom: calc-rem(25px);
        border-bottom: 1px solid rgba(var(--color-border), 1);

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

        &--desktop {
            display: none;

            @include media-breakpoint-up(lg) {
                display: flex;
            }
        }

        p {
            margin-bottom: calc-rem(15px);
            margin-right: calc-rem(15px);

            @include media-breakpoint-up(lg) {
                margin-bottom: 0;
            }
        }

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

            li {
                a {
                    display: inline-flex;
                    align-items: center;
                    background: #FFF;
                    border: 1px solid rgba(var(--color-primary), 1);
                    padding: calc-rem(8px 12px);
                    border-radius: calc-rem(5px);

                    img {
                        width: calc-rem(8px);
                        height: calc-rem(8px);
                        margin-left: calc-rem(8px);
                    }
                }
            }
        }
    }

    &__sorting {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: calc-rem(15px 0);
        margin-bottom: calc-rem(20px);
        border-bottom: 1px solid rgba(var(--color-border), 1);

        p {
            flex-grow: 1;
            margin-bottom: 0;
            font-size: calc-rem(12px);
            color: rgba(var(--color-secondary), .7);
        }

        > div {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            label {
                width: 100%;
            }

            select {
                margin-bottom: 0;
                margin-left: calc-rem(10px);
                width: calc-rem(150px);
                height: calc-rem(45px);
                background: #FFF;
                color: rgba(var(--color-secondary), 1s);
                font-size: calc-rem(12px);
            }
        }
    }

    &__products {
        .col-12 {
            margin-bottom: calc-rem(25px);
        }
    }
}
