@layer components {
    .is-invalid {
        @apply bg-primary-50 border border-primary-500 text-primary-900 placeholder-primary-700 dark:placeholder-primary-400 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-primary-200 dark:border-primary-400 !important;
    }

    .is-invalid-label {
        @apply text-primary-700 dark:text-primary-400 !important;
    }

    .invalid-feedback,
    .invalid-msg {
        @apply mt-2 text-sm text-primary-700 dark:text-primary-400;
    }

    .text {
        @apply text-sm font-medium text-gray-900;
    }

    .text-link {
        @apply font-medium text-primary-600 dark:text-primary-500 hover:underline;
    }

    .btn {
        @apply text-center inline-flex justify-center items-center text-gray-500 bg-gray-50 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600;
    }

    .btn:disabled {
        @apply text-gray-500 focus:outline-none bg-white rounded-lg border border-gray-200 dark:bg-gray-800 dark:text-gray-500 dark:border-gray-700 cursor-not-allowed;
    }

    .btn-xs {
        @apply px-12 py-2 text-xs font-medium !important;
    }

    .btn-sm {
        @apply px-2.5 py-1 sm:py-2.5 text-xs font-medium !important;
    }

    .btn-lg {
        @apply px-5 py-1 sm:py-2 text-lg font-medium !important;
    }

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

    .btn-primary:disabled {
        @apply text-white dark:text-gray-400 bg-primary-400 dark:bg-primary-700 cursor-not-allowed;
    }

    .btn-secondary {
        @apply text-white bg-secondary-700 hover:bg-secondary-800 focus:ring-4 focus:ring-secondary-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-secondary-600 dark:hover:bg-secondary-700 focus:outline-none dark:focus:ring-secondary-800;
    }

    .btn-secondary:disabled {
        @apply text-white bg-secondary-400 dark:bg-secondary-400;
    }

    .btn-dark {
        @apply inline-flex justify-center items-center font-medium rounded-lg text-sm px-5 py-2.5 text-center text-gray-600 hover:text-white border border-gray-500 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:border-gray-500 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800;
    }

    .btn-danger {
        @apply text-red-600 inline-flex justify-center items-center hover:text-white border border-red-600 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900;
    }

    .btn-info {
        @apply inline-flex justify-center items-center font-medium rounded-lg text-sm px-5 py-2.5 text-center text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800;
    }

    .btn-warning {
        @apply inline-flex justify-center items-center focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900;
    }

    .form-help-text {
        @apply mt-2 text-sm text-gray-500 dark:text-gray-400;
    }

    .input-label {
        @apply inline-flex items-center mb-2 text-sm font-medium text-gray-900 dark:text-white;
    }

    .input-icon {
        @apply w-5 h-5 text-gray-500 dark:text-gray-400;
    }

    .input-btn-right {
        @apply text-center items-center absolute top-0 right-0 p-2.5 text-sm font-medium border rounded-r-lg text-gray-900 focus:outline-none bg-gray-50 border-gray-300 focus:ring-primary-600 focus:border-primary-600 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-text {
        @apply bg-gray-50 border border-gray-300 text-gray-900 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-select {
        @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 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;
    }

    .input-checkbox {
        @apply w-4 h-4 bg-gray-100 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600;
    }

    .tabs {
        @apply text-sm font-medium text-center text-gray-500 sm:divide-x divide-y sm:divide-y-0 divide-gray-200 rounded-lg shadow sm:flex dark:divide-gray-500 dark:text-gray-600;

        li {
            @apply w-full;

            a {
                @apply relative inline-block w-full p-4 /*focus:ring-4 focus:ring-primary-300 focus:dark:ring-primary-800 focus:outline-none*/ 
                bg-white hover:text-gray-800 hover:bg-gray-50 dark:bg-gray-600 dark:hover:bg-[#434c59] dark:text-gray-300 dark:hover:text-white;

                &.active {
                    @apply z-10 bg-primary-600 hover:bg-primary-500 dark:hover:bg-primary-700 hover:text-white text-white;
                }
            }
        }

        li:first-child a {
            @apply sm:rounded-l-lg sm:rounded-tr-none rounded-t-lg;
        }

        li:last-child a {
            @apply sm:rounded-r-lg sm:rounded-l-none rounded-b-lg;
        }
    }

    .tabs-underline {
        @apply text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700 flex flex-wrap -mb-px;

        li {
            @apply mr-2;

            a {
                @apply inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300;

                &.active {
                    @apply z-10 text-primary-600 border-primary-600 dark:text-primary-500 dark:border-primary-500;
                }
            }
        }
    }

    .tabs-underline-full-width {
        @apply text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700 flex -mb-px;

        li {
            @apply w-full;

            a {
                @apply inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300;

                &.active {
                    @apply z-10 text-primary-600 border-primary-600 dark:text-primary-500 dark:border-primary-500;
                }
            }
        }
    }

    .alert-danger {
        @apply p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400;
    }

    .alert-info {
        @apply p-4 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg dark:bg-blue-200 dark:text-blue-800;
    }

    .alert-success {
        @apply p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800;
    }
    
    .site-drawer-nav {
        a {
            @apply flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700;
        }
        svg {
            @apply flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white;
        }
        span {
            @apply flex-1 ml-3 whitespace-nowrap;
        }
        .active {
            a {
                @apply bg-gray-100 dark:bg-gray-700;
            }
        }
    }
}