.sxs-header {
    position: fixed;
    z-index: 80;
    top: 0;
    left: 0;
    width: 100%;
    // height: var(--headerHeight);
    min-height: 70px;

    @media print {
        display: none;
    }

    &.open {
        // &::before {
        //     opacity: 0;
        // }

        // .sxs-header {

        //     &__logo,
        //     &__menu {
        //         opacity: 0;
        //         visibility: hidden;
        //     }
        // }

        // &.scrolled {
        //     &::before {
        //         opacity: 0;
        //     }

        //     .sxs-header__nav-button div {
        //         background-color: $secondaryClear;
        //     }
        // }
    }

    &.scrolled {
        &::before {
            opacity: 1;
        }
    }

    &::before {
        z-index: -1;
        background: $secondaryClear;
        transition-property: opacity;
        transition-duration: $transitionDuration;

        @include lg-wmin {
            opacity: 0;
        }
    }

    &__con0 {
        padding-top: 1rem;
        padding-bottom: 1rem;

        @include xxxl-wmin {
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
        }
    }

    &__con1 {
        align-items: center;
        height: 100%;

        & > .col {
            flex: 0 0 auto;
            width: auto;
        }

        &,
        & > .col {
            --sus-f-gtt: 0.5rem;
        }
    }

    &__logo,
    &__menu {
        opacity: 1;
        visibility: visible;
        transition: opacity $transitionDuration, visibility $transitionDuration;
    }

    &__logo {
        .figure {
            display: block;
            $sizeUn: clamp(30px, calc(0.8rem + 2vw), 60px);
            width: calc($sizeUn * 3);
            height: calc($sizeUn);
        }

        img {
            object-fit: contain;
        }
    }

    &__menu {
        height: 100%;

        &.col {
            flex: 1 1 0;
        }

        &-liswrp0 {
            justify-content: flex-end;

            &,
            & > .col {
                --sus-f-gtt: 0.5rem;
            }

            & > .col {
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
                width: auto;

                &:first-child {
                    margin-right: 1.5rem;
                }
            }
        }

        &-col:not(.sxs-header__menu-col--cart) {
        }

        &-col {
            &--search {
                .icon {
                    transition: transform 400ms;

                    &:first-child {
                        transform: scale(1);
                    }

                    &:last-child {
                        position: absolute;
                        font-size: $text-17;
                        transform: scale(0);
                    }
                }

                &.active {
                    .icon {
                        &:first-child {
                            transform: scale(0);
                        }

                        &:last-child {
                            transform: scale(1);
                        }
                    }
                }
            }

            @include xl-wmax {
                &--lis,
                &--search {
                    display: none !important;
                }
            }
            // @include lg-wmax {
            //     &--lis,
            //     &--search {
            //         display: none !important;
            //     }
            // }
        }

        &-lis {
            align-items: center;
            justify-content: flex-end;
            // height: 100%;
        }

        &-ite {
            flex: 0 0 auto;
            width: auto;
        }

        &-lin {
            font-size: $text-14;
            color: #fff;
            transition: color $transitionDuration;
            text-transform: uppercase;

            &::before,
            &::after {
                content: "";
                position: absolute;
                z-index: -1;
                pointer-events: none;
                opacity: 0;
            }

            &::before {
                top: 50%;
                left: 0;
                width: var(--_size);
                height: var(--_size);
                border-radius: 50%;
                border: calc(var(--_size) * 0.3) solid rgba($primaryClear, 0.25);
                transform: translate3d(-100%, -50%, 1px);
                transition: transform $transitionDuration, opacity $transitionDuration;
                --_size: 2em;
            }

            &::after {
                inset: -0.5rem;
                transform: translate3d(50%, 0, 1px);
                background-color: $primaryClear;
                transition: transform 600ms, opacity $transitionDuration;
                border-radius: 9999px;
            }

            // &>span {
            //     position: absolute;
            //     z-index: -1;
            //     top: 50%;
            //     left: 50%;
            //     display: block;
            //     width: var(--_size);
            //     height: var(--_size);
            //     transform: translate3d(-50%, -50%, 1px) rotate(180deg);
            //     transition: transform $transitionDuration, background-color;
            //     --_size: 2em;

            //     &::before,
            //     &::after {
            //         content: "";
            //         z-index: -1;
            //         display: block;
            //         width: 100%;
            //         height: 50%;
            //         opacity: 0;
            //         pointer-events: none;
            //         transition: opacity $transitionDuration, transform $transitionDuration;
            //     }

            //     &::before {
            //         border-top-left-radius: 9999px;
            //         border-top-right-radius: 9999px;
            //         border: calc(var(--_size) * .3) solid rgba($primaryClear, .25);
            //         border-bottom: 0;
            //         transform: translate3d(0, -100%, 1px);
            //     }

            //     &::after {
            //         border-bottom-left-radius: 9999px;
            //         border-bottom-right-radius: 9999px;
            //         border: calc(var(--_size) * .3) solid rgba($primaryClear, .25);
            //         border-top: 0;
            //         transform: translate3d(0, 100%, 1px);
            //     }
            // }

            @include xl-wmin {
                font-size: $text-15;
            }

            @include xxl-wmin {
                font-size: $text-17;
            }

            &.active,
            &:hover {
                color: $duller;
                transition-delay: 300ms;

                &::before {
                    opacity: 1;
                    transform: translate3d(-50%, -50%, 1px);
                }

                &::after {
                    opacity: 1;
                    transform: translate3d(0%, 0, 1px);
                    transition: transform 1200ms cubic-bezier(0.2, 0.76, 0, 1), opacity $transitionDuration;
                    transition-delay: 200ms;
                }
            }

            // &:hover {
            //     &>span {
            //         transform: translate3d(-50%, -50%, 1px) rotate(0deg);

            //         &::before,
            //         &::after {
            //             opacity: 1;
            //             transform: translate3d(0, 0%, 1px);
            //         }
            //     }
            // }
        }
    }

    &__actions {
        margin-left: auto;

        & > .row {
            align-items: center;

            & > .col {
                flex: 0 0 auto;
                width: auto;
            }
        }

        @include xl-wmin {
            display: none;
        }
        // @include lg-wmin {
        //     display: none;
        // }
    }

    &.open {
        // .sxs-header__nav-button {
        //     div {
        //         &:first-child {
        //             transform: rotate(45deg);
        //         }

        //         &:nth-child(2) {
        //             transform: scaleX(0);
        //         }

        //         &:last-child {
        //             transform: rotate(-45deg);
        //         }
        //     }
        // }
    }

    &__nav-button {
        display: flex;
        align-items: center;
        width: 1.25em;
        height: 1em;
        font-size: calc(2rem);

        span {
            flex: 0 0 100%;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            max-width: 100%;
            height: 1px;
        }

        div {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: #fff;
            transition: transform $transitionDuration;

            &:first-child {
                transform: translateY(-0.27em);
                transform-origin: center;
            }

            &:nth-child(2) {
                transform: scaleX(1);
                transform-origin: center;
            }

            &:last-child {
                transform: translateY(0.27em);
                transform-origin: center;
            }
        }
    }
}

.sxs-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
    pointer-events: none;

    &.open {
        pointer-events: initial;

        .sxs-nav {
            &__bg {
                opacity: 1;
            }

            &__con0 {
                transform: translate3d(0px, 0px, 0px);
            }

            &__con1 {
                &::before,
                &::after {
                    transition: transform 1200ms cubic-bezier(0.75, 0.2, 0, 1);
                }

                &::before {
                    transform: translate3d(-50%, 50%, 1px) scale(1);
                }

                &::after {
                    transform: translate3d(50%, -25%, 1px) scale(1);
                }
            }

            &__lin {
                opacity: 1;
                transform: translate3d(0, 0, 1px);
                transition: transform calc(700ms + var(--_idx) * 100ms) calc(var(--_idx) * 100ms) cubic-bezier(0.16, 1, 0.33, 1),
                    opacity calc(700ms + var(--_idx) * 100ms) calc(var(--_idx) * 100ms) cubic-bezier(0.16, 1, 0.33, 1);
            }
            &__ite {
                .sxs-nav__icon {
                    opacity: 1;
                    transform: translate3d(0, 0, 1px);
                    transition: transform calc(700ms + var(--_idx) * 100ms) calc(var(--_idx) * 100ms) cubic-bezier(0.16, 1, 0.33, 1),
                        opacity calc(700ms + var(--_idx) * 100ms) calc(var(--_idx) * 100ms) cubic-bezier(0.16, 1, 0.33, 1);
                }
            }
        }
    }

    &__bg {
        opacity: 0;
        transition: opacity 700ms cubic-bezier(0.16, 1.08, 0.38, 0.98);
    }

    &__con0 {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        margin-left: auto;
        background-color: #fff;
        transition: transform 700ms cubic-bezier(0.16, 1.08, 0.38, 0.98);
        transform: translate3d(100%, 0px, 0px);

        @include sm-wmin {
            width: calc(350px + 10vw);
        }
    }

    &__con1 {
        overflow: hidden;
        flex: 1 1 0;
        width: 100%;

        &::before,
        &::after {
            width: var(--sbw-s-2);
            height: var(--sbw-s-2);
            border-width: var(--sbw-t-2);
            transition: transform 400ms;
        }

        &::before {
            bottom: 0;
            left: 0;
            transform: translate3d(-50%, 50%, 1px) scale(0);
        }

        &::after {
            right: 0;
            top: 0;
            transform: translate3d(50%, -25%, 1px) scale(0);
        }
    }

    &__con2 {
        overflow-y: auto;
        overflow-x: hidden;
        min-width: initial;
        padding: $spacing2 $commonSp;
    }

    &__hdr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: $spacing2 * 1.5 $commonSp;
        font-size: $text-22;
        font-weight: 700;
        text-transform: uppercase;
        background-color: $accentClear3;
        border-bottom: 1px solid $secondaryClear;
    }
    &__ite {
        // &.submenu-open {
        //     .sxs-nav__submenu {
        //         // display: block;
        //         max-height: 100vh;
        //         opacity: 1;
        //         visibility: visible;
        //     }
        // }
        &.submenu-open {
            .icon.icon-flecha1.abajo {
                transform: rotate(180deg);
            }
        }
        &-wrapper {
            // display: flex;
            // align-items: center;
            // justify-content: space-between;
            position: relative;
            cursor: pointer;
        }
    }

    &__lin {
        display: flex;
        align-items: center;
        font-size: $text-18;
        padding: 0.75em 0;
        opacity: 0;
        transform: translate3d(0, 100%, 1px);
        transition: transform 800ms cubic-bezier(0.2, 0.7, 0, 1), opacity 800ms cubic-bezier(0.2, 0.7, 0, 1);
        --idx: 0;

        &::before {
            content: "";
            left: 0;
            display: block;
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            background-color: $primaryClear;
            outline: 2px solid $primaryClear;
            outline-offset: 2px;
            margin-left: 3px;
            margin-right: 0.5em;
        }

        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: rgba($duller, 0.25);
        }
    }
    &__submenu {
        // background-color: red;
        padding-top: 0.5rem;
        padding-left: 2rem;
        // display: none;
        // opacity: 0;
        // visibility: hidden;
        // max-height: 0;
        // overflow: hidden;
        // transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;

        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease;

        &-ite {
        }
        &-link {
            padding: 0.75em 0;
            display: flex;
            align-items: center;
            font-size: 0.95rem;
            &::before {
                content: "";
                left: 0;
                display: block;
                width: 0.3rem;
                height: 0.3rem;
                border-radius: 50%;
                background-color: $primaryClear;
                outline: 2px solid $primaryClear;
                outline-offset: 2px;
                margin-left: 3px;
                margin-right: 0.8em;
            }
        }
    }
    &__icon {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        display: flex;
        align-items: center;
        padding-right: 0.5rem;
        opacity: 0;
        transform: translate3d(0, 100%, 1px);
        transition: transform 800ms cubic-bezier(0.2, 0.7, 0, 1), opacity 800ms cubic-bezier(0.2, 0.7, 0, 1);
        cursor: pointer;
        .icon {
            transition: all 0.5s;
        }
    }
}

.sxs-sbtn {
    display: flex;
    align-items: center;
    justify-content: center;

    .icon {
        font-size: 1.5rem;
        color: #fff;
    }

    &.disabled {
        pointer-events: none;
    }
}

.sxs-sbar {
    width: 100%;
    padding: 0.5rem 0;
    background-color: #fff;
    box-shadow: 0px 1px 7px rgba($secondaryClear, 0.5);

    @include lg-wmin {
        position: absolute;
        z-index: -2;
        left: 0;
        opacity: 0;
        transform: translate3d(0, -100%, 1px);
        transition: opacity 800ms cubic-bezier(0.16, 1, 0.33, 1), transform 800ms cubic-bezier(0.16, 1, 0.33, 1);
        pointer-events: none;
    }

    &.visible {
        opacity: 1;
        transform: translate3d(0, 0, 1px);
        pointer-events: initial;
    }

    &__con1,
    &__con1 > .col {
        --sus-f-gtt: 0.25rem;
    }

    &__col--btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sxs-fcon.frame {
        height: 100%;
        --frameHeight: 100%;
        // --frameHeight: calc(20px + 1rem);
    }

    &__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.75rem 0.5rem 0.5rem;
        height: 100%;
        width: 100%;
        border-radius: 0 9999px 9999px 0;
        background-color: $primaryClear;
        transition: background-color $transitionDuration;

        .icon {
            color: $duller;
            transition: background-color $transitionDuration;
        }

        &.disabled,
        &:not([aria-disabled="false"]) {
            background-color: $secondaryClear;

            .icon {
                color: #fff;
            }
        }
    }
}

.sxs-header__submenu,
.sxs-header__submenu-ite {
    --sus-f-gtt: 0.3rem;
}
