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

// @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

// import nuinto

@layer base {
    body {
        @apply bg-gray-800 text-gray-200 caret-primary-400;
        font-family: 'Ubuntu', sans-serif;
    }
}

@layer components {
    .btn {
        @apply flex cursor-pointer items-center justify-center gap-3 rounded-md border border-gray-600 bg-gray-700 px-6 py-1.5 font-medium shadow-lg shadow-gray-900/25 hover:brightness-125 2xl:text-lg;

        &-filled {
            @extend .btn;
            @apply border-primary-500 bg-primary-400 text-gray-900;
        }
    }

    .card {
        @apply rounded-md border border-gray-600 bg-gray-700/25 p-4 shadow-xl md:p-6 2xl:p-8;
    }
}

@layer utilities {
    .gradient {
        @apply bg-gradient-to-r from-primary-400 to-green-400;
    }

    .text-gradient {
        @extend .gradient;
        @apply bg-clip-text text-transparent;
    }
}

.tabs {
    &::after {
        content: '';
        @apply absolute bottom-0 left-0 h-2 w-full;
    }
}

::-webkit-scrollbar {

    @apply  md:size-1.5;

    &-track {
        @apply bg-gray-700 ;
    }

    &-thumb {
        @apply bg-primary-500 rounded-sm;

        &:hover{
            @apply bg-primary-500;
        }
    }


}
