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

.header {
    @apply h-14 grid grid-cols-3 dark:bg-900 px-4 
}

.flat-btn {
    @apply dark:hover:bg-600 active:dark:bg-700
}

.outline-btn {
    @apply dark:border-400 border-2 dark:text-400 hover:dark:text-500 hover:dark:border-500  active:dark:text-600 active:dark:border-600
}

.nav {
    @apply p-4 dark:bg-900/80
}

.nav .activated {
    @apply dark:bg-700
}

.nav ul li {
    @apply p-3 rounded-xl flat-btn select-none cursor-pointer flex gap-5 text-nowrap
}

.card {
    @apply p-5 rounded-xl dark:bg-900
}

.card-label {
    @apply px-5 py-3 border-2 dark:border-800 dark:bg-700 rounded-2xl min-w-[230px] text-end
}

.crypto {
    background: left / contain no-repeat url("../img/Cryptocurrency_Logo.svg");
}

.euro {
    background: left / contain no-repeat url("../img/Euro_symbol_black.svg");
}

.hide {
    display: none;
}

.gradient-label {
    
}