@layer components {
    .card {
        @apply rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800;
    }

    .link {
        @apply text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white;
    }

    .product-grid {
        @apply mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5;
    }

    .button-gray {
        @apply rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
        hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
        focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
        dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer;
    }

    .page {
        @apply flex justify-center items-center text-lg text-gray-900 dark:text-gray-400 mt-4;
    }

    .navbar-bg {
        @apply bg-white dark:bg-gray-800 antialiased;
    }

    .navbar-content {
        @apply max-w-screen-xl px-4 mx-auto 2xl:px-0 py-4;
    }

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

    .navbar-categories {
        @apply hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center;
    }

    .navbar-web-title {
        @apply text-xl font-semibold text-gray-900 dark:text-white;
    }

    .navbar-title {
        @apply flex items-center space-x-8;
    }

    .navbar-category-link {
        @apply flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500;
    }

    .navbar-dropdown-menu {
        @apply bg-gray-50 dark:bg-gray-700 dark:border-gray-600 border border-gray-200 rounded-lg py-3  px-4 mt-4;
    }

    .navbar-dropdown-menu-list {
        @apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
    }

    .navbar-dropdown-menu-list-items {
        @apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
    }

    .navbar-dropdown-menu-title {
        @apply hover:text-primary-700 dark:hover:text-primary-500;
    }

    .icon-button {
        @apply flex text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-4 cursor-pointer;
    }

    .link-button {
        @apply inline-flex items-center rounded-lg justify-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white;
    }

    .cart-navbar-floating {
        @apply absolute top-12 z-10 w-75 divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700 right-0 p-4;
    }

    .button-primary {
        @apply w-full flex justify-center rounded-lg bg-primary-700 px-5 py-2.5
                 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4
                 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800
                 content-center items-center cursor-pointer;
    }

    .input-number {
        @apply bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600
                focus:border-primary-600 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
                dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 mr-4;
    }

    .input-text {
        @apply my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600
                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500;
    }

    .input-checkbox {
        @apply my-2 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300
                dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800;
    }

    .search-input {
        @apply block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500;
    }

    .txt-2xl {
        @apply text-2xl font-extrabold leading-tight text-gray-900 dark:text-white;
    }
}