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

.c-usps {
    padding: calc-rem(6px 0);
    color: #FFF;
    background: rgba(var(--color-secondary), 1);

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

    &__inner {
        display: flex;
        align-items: center;
        justify-content: center;

        @include media-breakpoint-up(lg) {
            justify-content: space-between;
        }
    }

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

        a {
            color: #FFF;
            text-decoration: underline;
        }
    }

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

    &__navigation {
        display: none;
        align-items: center;
        justify-content: flex-end;
        margin: 0;
        padding: 0;
        list-style: none;

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

        > li {
            position: relative;

            > a {
                padding: calc-rem(5px 15px);
                color: #FFF;
                text-decoration: none;
                display: flex;
                align-items: center;
                justify-content: flex-start;

                img {
                    width: 14px;
                    height: auto;
                    object-fit: contain;
                    margin-left: 5px;
                    border-radius: 9999px;
                    border: 1px solid #FFF;
                }
            }

            > ul {
                visibility: hidden;
                clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
                transition: clip-path 0.2s ease-in-out, visibility 0s 0.2s;
                margin-left: calc-rem(-20px);
                position: absolute;
                right: 0;
                background: #FFF;
                overflow: hidden;
                border-radius: calc-rem(10px);
                border: 1px solid rgba(var(--color-border), 1);
                z-index: 100;

                li {
                    a {
                        //min-width: calc-rem(220px);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #FFF;
                        padding: calc-rem(8px 20px);
                        color: rgba(var(--color-secondary), 1);

                        img {
                            width: calc-rem(16px);
                            height: auto;
                            object-fit: contain;
                            margin-right: calc-rem(10px);
                            border-radius: 9999px;
                        }

                        &:hover {
                            color: rgba(var(--color-primary), 1);
                            background: rgba(var(--color-background));
                        }
                    }
                }
            }

            &:hover > ul {
                visibility: visible;
                clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
                transition: visibility 0s, clip-path 0.2s ease-in-out;
            }

            //&:hover > ul {
            //    display: block;
            //}
            //
            //> ul {
            //    //display: none;
            //    display: block;
            //
            //    position: absolute;
            //    list-style: none;
            //    margin: 0;
            //    padding: 0;
            //}

            &:after {
                content: '';
                position: absolute;
                top: 3px;
                right: 0;
                width: 1px;
                height: calc-rem(15px);
                background: rgba(255, 255, 255, .4);
            }

            &:last-child {
                > a {
                    padding-right: 0;
                }

                &:after {
                    content: none;
                }
            }
        }
    }
}
