@import "../front/variables.scss";

.header {
    // position: fixed;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    transition: all .5s ease-in-out;
    z-index: 1;

    @media (max-width: 991px) {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    // &.fixed {
    //     background-color: $white;
    //     box-shadow: 0px 3px 10px 0px rgb(38 107 193 / 8%);
    // }

    .navbar-logo {
        width: auto;
        height: 60px;
        max-height: 60px;
        @media (max-width: 1000px){
            height: 50px;
            max-height: 50px;
        }
        @media (max-width: 750px){
            height: 45px;
            max-height: 45px;
        }
        @media (max-width: 425px){
            height: 40px;
            max-height: 40px;
        }
    }

    .dropdown {
        .dropdown-menu {
            li {
                .nav-link {
                    color: $black !important;

                    img {
                        width: 18px;
                        height: 18px;
                    }
                }
            }
        }

        .dropdown-toggle {
            color: $white;
            font-size: 1rem;
            padding: 0.5rem 0;
            box-shadow: none;

            &:after {
                border: 0;
                margin-left: 10px;
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                -webkit-font-smoothing: antialiased;
                display: var(--fa-display, inline-block);
                content: "\f107";
                vertical-align: middle;
            }
        }

        .dropdown-item {
            // color: $gray-100;
            padding: 8px 25px;

            &:hover,
            &:focus {
                // color: $primary;
                background-color: transparent;
            }
        }
    }
}

.navbar {
    @media (max-width: 991px) {
        position: static;
        padding: 0;
    }

    .navbar-nav {
        .nav-link {
            color: $white;

        }
    }

    .navbar-toggler {
        @media (max-width: 991px) {
            box-shadow: none;
        }
    }

    .navbar-collapse {
        @media (max-width: 991px) {
            position: absolute;
            width: 100%;
            top: calc(100% - 10px);
            background: $blue;
            left: 0px;
            right: 0px;
            margin: auto;
            max-width: 720px;
            border-radius: $border-radius;
            box-shadow: 0px 0px 20px rgb(173 181 189 / 10%);
        }

        @media (max-width: 767px) and (min-width: 576px) {
            max-width: 516px;
        }

        @media (max-width: 575px) {
            width: calc(100% - 24px);
        }

        .navbar-nav {
            @media (max-width: 991px) {
                padding: 10px;

            }

            .nav-item {
                .nav-link {
                    color: $white;
                }
            }
        }
    }
}


.navbar-toggler {
    padding: 0;
    height: 26px;
    width: 26px;
    position: relative;
    margin: auto;
    cursor: pointer;
    border: none;

    .navbar-toggler-icon {
        position: absolute;
        height: 2px;
        background-color: $white;
        width: 26px;
        display: block;
        border-radius: 2px;
        transition: 0.35s ease all;
        background-image: none !important;
    }

    .top-bar {
        top: 0px;
    }

    .middle-bar {
        top: 7px;
        opacity: 1;
    }

    .bottom-bar {
        top: 14px;
    }

    &.open {
        .top-bar {
            top: 7px;
            transform: rotate(225deg);

        }

        .middle-bar {
            opacity: 0;
            width: 0%;
            transform-origin: left center;
            transition: 0.175s ease all
        }

        .bottom-bar {
            top: 7px;
            transform: rotate(-225deg);
        }
    }
}


// #toogler-icon .navbar-toggler.open .top-bar {
//     top:7px;
//     transform:rotate(225deg);

//   }
//   #toogler-icon.navbar-toggler.open .middle-bar {
//     opacity:0;
//     width:0%;
//     transform-origin: left center;
//     transition: 0.175s ease all
//   }
//   #toogler-icon.navbar-toggler.open .bottom-bar {
//     top:7px;
//     transform:rotate(-225deg);
//   }