@import "toolkit.css";
@import "auth.css";
@import "analyzes.css";
@import "price.css";
@import "scenarios.css";
@import "account.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* BURGER BUTTON */
.burger-btn > span,
.burger-btn::before,
.burger-btn::after {
    @apply w-[18px] h-0.5 absolute bg-c-black duration-300;
}
.burger-btn::before,
.burger-btn::after {
    content: "";
}
.burger-btn {
    @apply
    before:translate-y-[-5px]
    after:translate-y-[5px]
}
.app-container.open-menu .burger-btn > span {
    @apply opacity-0;
}
.app-container.open-menu .burger-btn {
    @apply
    before:opacity-100 before:translate-y-0 before:rotate-45
    after:opacity-100 after:translate-y-0 after:-rotate-45
}

/* HOME PAGE */
.nav-menu.open-menu {
    @apply translate-y-0;
}

@keyframes motion {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-688px);
    }
}

/* PROJECT SELECTOR */
.project-selector .project-selector-list {
    @apply h-0;
}

.project-selector:focus-within {
    @apply shadow-none;
}
.project-selector:focus-within .btn-icon {
    transform: rotateX(180deg)
}
.project-selector:focus-within .project-selector-list {
    @apply h-auto py-4 shadow-[0px_1px_3px_0px_#0000004D,_0px_4px_8px_3px_#00000026];
}


/* APP CONTAINER */
.main {
    @apply h-[calc(100vh-5rem)] overflow-y-auto [scroll-behavior:smooth];
}

.app-container.open-menu {
    @apply overflow-hidden;
}

.app-container.open-menu .app-lang {
    @apply hidden;
}

.app-container.open-menu .sidebar {
    @apply h-[calc(100vh-5rem)] right-0 overflow-y-auto;
}

.app-container.open-menu .main {
    @apply overflow-hidden;
}

@media screen(lg) {
    .app-container {
        @apply grid grid-cols-[23%_77%] grid-rows-[83px_calc(100vh-83px)];
        grid-template-areas:
            "header main"
            "sidebar main"
        ;
    }
    
    .header {
        grid-area: header;
    }

    .sidebar {
        @apply h-full block relative right-0 overflow-y-auto;
        grid-area: sidebar;
    }
    .sidebar::-webkit-scrollbar {
        @apply hidden;
    }
    
    .main {
        @apply min-h-screen overflow-y-auto;
        grid-area: main;
    }

    .footer {
        grid-area: footer;
    }
}

@keyframes notification-animation {
    0% {
        transform: translateX(150%);
    }
    10% {
        transform: translateX(0);
    }
    90% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(150%);
    }
}

.notification-appear {
    animation: 5s notification-animation linear;
    transform: translateX(150%);
}
.notification-appear.hide {
    display: none;
}