"use client"
import { styled } from "styled-components";
import { Colors, Gradient } from '@/app/components/common/variable';
import { device } from "@/app/components/common/Devices";

export const HeaderRow = styled.header`
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 6px 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.30);
    background: ${Colors.white};
    z-index: 9;
    &.sticky{
        border-color: transparent;
        box-shadow: 0px 4px 21px 0px rgba(0, 0, 0, 0.10);
        background: ${Colors.white};
    }
    .heder-body{
        justify-content: space-between;
        .logo{
            max-height: 88px;
        }
        .header-right{
            grid-gap: 60px;
        }
    }  
    .mobile-toggle{
        display: none;
    }
    .nav-lint{
        li{
            margin-right: 46px;
            &:last-child{
                margin: 0;
            }
            .link{
                font-size: 20px;
                color: ${Colors.body};
                position: relative;
                &:hover,&.active{
                    color: ${Colors.primary};
                    &::before{
                        width: 60%;
                        transition: all 0.4s;
                    }
                }
                &.active{
                    font-weight: 600;
                }
                &::before{
                    content: '';
                    position: absolute;
                    bottom: -6px;
                    left: 0;
                    right: 0;
                    margin: auto;
                    background: ${Colors.primary};
                    width: 0;
                    height: 2px;
                    transition: all 0.4s;
                }
            }
        }
    }

    @media  ${device.tablet}{
        .heder-body {
            .header-right{
                grid-gap: 26px;
            }
        }
        .nav-lint{
            li {
                margin-right: 26px;
                .link{
                    font-size: 16px;
                }
            }
        }
    }
    @media  ${device.mobile}{
        .heder-body{
            .header-right{
                grid-gap: 0;
                .logo{
                    display: none;
                }
            }
        }
        .mobile-toggle{
            display: block;
            cursor: pointer;
        }
        .mobile-toggle{
            width: 25px;
            height: 15px;
            position: relative;
            i{
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                height: 2px;
                background:  ${Colors.primary};
                transition: all .2s linear;
                &::after,&:before{
                    content: "";
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    background: ${Colors.primary};
                    left: 0;
                    transition: transform .2s linear,top .2s linear .2s;
                }
                &::after{
                    top: 7px;
                }
                &::before{
                    top: 14px;  
                }
            }
            &.active{
                i{
                    background: transparent;
                    &:after, &:before{
                        top: 7px;
                        transition: all .2s linear,transform .2s linear .2s;
                    }
                    &:before{
                        transform: rotate(-45deg);
                    }
                    &:after{
                        transform: rotate(45deg);
                    }
                }
            }
        }
        .menu-wraper{
            position: fixed;
            text-align: right;
            top: 68px;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0;
            background: ${Colors.white};
            transition: all 0.4s;
            z-index: 99;
            overflow-y: auto;
        }
        .menu-wraper{
            &.active{
                height: calc(100vh - 68px);
                transition: all 0.4s;
            }
        }
        .nav-lint{
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            li{
                width: 100%;
                margin: 0;
                .link{
                    width: 100%;
                    padding: 8px 20px;
                    border-bottom: 1px solid #dfdfdf;
                    text-align: start;
                    &::before{
                        display: none;
                    }
                    &.active{
                        background: ${Gradient.DarkPinkGradient};
                    }
                }
                &:first-child{
                    .link{
                        border-top: 1px solid #dfdfdf;
                    }
                }
            }
        }
        img{
            max-height: 56px;
        }
    }
`;