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

.product-single {
    background: #FFF;
    padding-top: calc-rem(20px);

    &__back {
        display: flex;

        svg {
            margin-right: calc-rem(5px);
            width: calc-rem(16px);
            stroke: rgba(var(--color-primary), 1);
            stroke-width: 2;
        }
    }

    &__main {
        padding-top: calc-rem(20px);
    }

    &__inner {
        border-bottom: 1px solid rgba(var(--color-border), 1);
        padding-bottom: calc-rem(50px);
    }

    &__gallery {
        position: relative;
        overflow-x: hidden;
        border-radius: calc-rem(20px);
        border: 1px solid rgba(var(--color-border), 1);

        &__video {
            position: relative;

            &:after {
                content: '';
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, .5) url('../images/icons/icon-play.svg') center no-repeat;
                background-size: calc-rem(64px);
                z-index: 1;
            }
        }

        &__arrow {
            position: absolute;
            top: 50%;
            z-index: 2;
            width: calc-rem(35px);
            height: calc-rem(35px);
            border-radius: calc-rem(35px);
            border: 1px solid rgba(var(--color-secondary), 1);
            background: #FFF;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .2s ease;

            svg {
                width: calc-rem(16px);
                transition: all .2s ease;
                stroke-width: 2;
            }

            &:hover {
                cursor: pointer;
                background: rgba(var(--color-secondary), 1);
                transition: all .2s ease;

                svg {
                    stroke: #FFF;
                    transition: all .2s ease;
                }
            }

            &--prev {
                left: calc-rem(15px);
            }

            &--next {
                right: calc-rem(15px);
            }
        }

        .swiper-slide {
            height: 100%;
            max-height: calc-rem(520px);
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                padding: calc-rem(15px);
                max-height: calc-rem(520px);
                width: 100%;

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

    &__thumbnails {
        margin-top: calc-rem(10px);
        overflow-x: hidden;
        position: relative;

        &__video {
            position: relative;

            &:after {
                content: '';
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, .5) url('../images/icons/icon-play.svg') center no-repeat;
                background-size: calc-rem(16px);
                z-index: 1;
            }
        }

        .swiper-slide {
            border: 1px solid rgba(var(--color-border), 1);
            border-radius: calc-rem(5px);
            overflow: hidden;
            width: calc-rem(70px);
            height: calc-rem(70px);
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                opacity: .4;
                aspect-ratio: 1;
                height: auto;
                width: 100%;
                object-fit: contain;
                background: #FFF;
                padding: calc-rem(5px);
            }

            &-thumb-active {
                border-color: rgba(var(--color-secondary), 1);

                img {
                    opacity: 1;
                }
            }
        }
    }

    &__nr {
        margin-top: 20px;
        font-size: clamp-font(9px, 10px);
        color: rgba(var(--color-secondary), .6);
        margin-bottom: calc-rem(10px);
        font-weight: var(--font-weight-bold);

        @include media-breakpoint-up(md) {
            margin-top: 0;
        }
    }

    &__title {
        font-size: clamp-font(18px, 26px);
        line-height: 1.2;
        margin-bottom: 0;
        text-transform: uppercase;

        @include media-breakpoint-up(xl) {
            max-width: 80%;
        }
    }

    &__meta {
        border-bottom: 1px solid rgba(var(--color-border), 1);
        padding: calc-rem(15px 0);
        margin-bottom: calc-rem(30px);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .price-label {
            .label {
                font-size: clamp-font(9px, 10px);
                color: rgba(var(--color-secondary), .6);
                font-weight: var(--font-weight-bold);
                display: block;
                margin-bottom: 0;
            }

            .price {
                font-size: clamp-font(16px, 21px);
                font-weight: var(--font-weight-bold);
                font-family: var(--font-family-headings);

                letter-spacing: 0.03125rem;
                font-family: var(--font-family-headings);
                color: rgba(var(--color-headings), 1);
                text-transform: uppercase;
                font-weight: var(--font-weight-extra-bold);
            }
        }
    }

    &__price {

    }


    &__add-to-cart {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: calc-rem(5px);
    }

    &__stock {
        margin-top: calc-rem(15px);
        display: flex;
        align-items: center;
        gap: calc-rem(5px);
        color: rgba(var(--color-info), 1);
        font-weight: var(--font-weight-bold);

        svg {
            width: calc-rem(20px);
            height: calc-rem(20px);

            path {
                stroke: rgba(var(--color-info), 1);
            }
        }

        &--out-of-stock {
            color: rgba(var(--color-danger), 1);

            svg {
                path {
                    stroke: rgba(var(--color-danger), 1);
                }
            }
        }
    }

    &__score {
        margin-top: calc-rem(30px);
        padding-top: calc-rem(30px);
        border-top: 1px solid rgba(var(--color-border), 1);

        @include media-breakpoint-up(lg) {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
        }
    }

    &__usps {
        margin-bottom: calc-rem(10px);

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

        ul {
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                background: url('../images/icons/icon-check.svg') no-repeat center left;
                padding-left: calc-rem(25px);
                margin-bottom: calc-rem(5px);
            }
        }
    }

    &__reviews {
        display: flex;
        align-items: center;
        gap: calc-rem(5px);
        margin-bottom: calc-rem(10px);

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

        @include media-breakpoint-between(sm, xl) {
            display: block;
        }

        a {
            text-decoration: underline;
        }
    }

    &__stars {
        margin-right: calc-rem(5px);
        margin-bottom: calc-rem(5px);

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

    &__content {
        padding-top: calc-rem(50px);
        padding-bottom: 100px;
        background: #FFF;

        h2 {
            font-size: clamp-font(14px, 18px);
        }

        p {
            color: rgba(var(--color-secondary), .8);
        }
    }

    &__description {
        margin-bottom: 40px;

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

    &__downloads {
        margin-bottom: 20px;

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

    &__download {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid rgba(var(--color-border), 1);
        margin-bottom: calc-rem(10px);
        border-radius: calc-rem(5px);
        flex-wrap: wrap;
        transition: border-color .2s ease;

        &-left {
            height: 100%;
            display: flex;
            align-items: center;
            gap: calc-rem(15px);
            padding: calc-rem(20px);

            h4 {
                margin-bottom: 0;
                font-variation-settings: var(--font-variation-settings-medium);
                text-transform: none;
                font-size: clamp-font(12px, 14px);
                line-height: 1;
            }

            p {
                font-size: calc-rem(10px);
                color: rgba(var(--color-secondary), .8);
                margin-bottom: 0;
            }
        }

        &-right {
            align-self: stretch;
            display: flex;
            align-items: center;
            border-left: 1px solid rgba(var(--color-border), 1);

            img {
                padding: calc-rem(0 25px);
            }
        }

        &:hover {
            border-color: rgba(var(--color-secondary), 1);
            transition: border-color .2s ease;

            .product-single__download-right {
                transition: border-color .2s ease;
                border-left-color: rgba(var(--color-secondary), 1);
            }
        }
    }

    &__attributes {
        margin-top: calc-rem(30px);

        table {
            width: 100%;

            tr {
                background: #FFF;

                &:nth-child(odd) {
                    background: rgba(var(--color-secondary), .05);
                }

                td {
                    padding: calc-rem(10px 15px);
                    font-size: clamp-font(12px, 14px);
                    color: rgba(var(--color-secondary), .8);
                    font-weight: var(--font-weight-medium);

                    &:first-child {
                       font-variation-settings: var(--font-variation-settings-bold);
                    }
                }
            }
        }
    }
}
