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

@layer base {
    .page-enter {
        opacity: 0;
    }
    
    .page-enter-active {
        opacity: 1;
        transition: opacity 150ms ease-out;
    }
    
    .page-leave {
        opacity: 1;
    }
    
    .page-leave-active {
        opacity: 1;
        transition: opacity 150ms ease-in;
    }
}

.page-instant {
    opacity: 1 !important;
}

body {
    background-color: #f6f7f8;
}

body.dark {
    background-color: #111821;
}

.state-list::-webkit-scrollbar {
    width: 4px;
}

.state-list::-webkit-scrollbar-track {
    background: transparent;
}

.state-list::-webkit-scrollbar-thumb {
    background: #E2E8F0;
    border-radius: 10px;
}