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

@layer components {
    .flex-c {
        @apply flex justify-center items-center;
    }

    .flex-sc {
        @apply flex justify-start items-center;
    }

    .flex-ec {
        @apply flex justify-end items-center;
    }

    .flex-ac {
        @apply flex justify-around items-center;
    }

    .flex-bc {
        @apply flex justify-between items-center;
    }

    .flex-row-c {
        @apply flex flex-row justify-center items-center;
    }

    .flex-row-sc {
        @apply flex flex-row justify-start items-center;
    }

    .flex-row-ec {
        @apply flex flex-row justify-end items-center;
    }

    .flex-row-ac {
        @apply flex flex-row justify-around items-center;
    }

    .flex-row-bc {
        @apply flex flex-row justify-between items-center;
    }

    .flex-col-c {
        @apply flex flex-col justify-center items-center;
    }

    .flex-col-sc {
        @apply flex flex-col justify-start items-center;
    }

    .flex-col-ec {
        @apply flex flex-col justify-end items-center;
    }

    .flex-col-ac {
        @apply flex flex-col justify-around items-center;
    }

    .flex-col-bc {
        @apply flex flex-col justify-between items-center;
    }

    .navbar-bg-hover {
        @apply dark:text-white dark:hover:!bg-[#242424];
    }
}

@layer utilities {
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .abs-c {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .abs-tc {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .abs-lc {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    .abs-bc {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .abs-rc {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
}
