.dashboard__header {
     padding: 12px 24px;
        position: relative;
    .dashboard__nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .dashboard__logo {
            cursor: pointer;
            inline-size: 80px;
            border-radius: 12px;
        }

        .dashboard__cart {
            color: var(--color-purple);
            padding: 8px;
            border-radius: 50%;
            border: 1px solid var(--color-purple);
            display: grid; place-items: center;
            cursor: pointer;
            transition: all 200ms ease;
            animation: pulse 8s linear 0s infinite alternate;
            &:hover {
                background-color: var(--color-purple);
                color:white;
            }
        }
        .dashboard__links {
            list-style: none;
            display: flex;
            gap:8px;
            .dashboard__link {
                color: var(--color-link);
                text-decoration: none;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .dashboard__cart {
            position: relative;
            .dashboard__cart-count {
                position: absolute;
                background-color: var(--color-title);
                width: 20px; height: 20px;
                display: grid; place-items: center;
                border-radius: 50%;
                top: -6px; 
                right: -6px;
                color: white;
            }
        }
        .dashboard__cart--active {
                scale: 1.2;
                background-color: var(--color-purple);
                color: white !important;
        }


        .dashboard__login-or-signup {
            display: flex;
            gap: 20px;

            .dashboard__login {
                color: var(--color-purple);
                &:hover {
                    text-decoration: underline;
                }
            }
             .dashboard__signup {
                        padding: 12px;
                        border: 1px solid transparent;
                        background-color: var(--color-purple);
                        border-radius: 12px;
                        color: white;
                        transition: all 200ms ease;
                        &:hover {
                            color: var(--color-purple);
                            background-color: transparent;
                            border-color: var(--color-purple);
        
                        }
                    }


        }

         .dashboard__information {
                    display: none;
                    gap: 8px;
                    align-items: center;
                    .dashboard__user {
                        display: grid; place-items: center;
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        border: 1px dashed var(--color-purple);
                        cursor: pointer;
                        font-size: 20px;
                        color: var(--color-user-text);
                        transition: all ease 100ms;
                        &:hover {
                            transform: scale(1.01);
                            background-color: var(--color-purple);
                            border-style: solid;
                            color: white;
                        }

                    }

                    .dashboard__signout {
                        font-size: 18px;
                        padding: 8px;
                       color: var(--color-user-text);
                        border: 1px solid var(--color-purple);
                        border-radius: 12px;
                        cursor: pointer;
                        transition: all 100ms ease;
                        &:is(:hover, :focus) {
                            background-color: var(--color-purple);
                            color: white;

                        }
                    }
                   
                }


    }

    .dashboard__line {
        margin-top: 12px;
        width: 100%;
        height: 1px;
        background-color: black;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }


    90% {
        transform: scale(1);
    }
    95% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

@media (width < 425px) {
    .dashboard__logo {
            display: none !important;
        }
}


@media (width >= 768px) {
    .dashboard__header-mobile, .dashboard__aside-mobile {
        display: none;
    }
}