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

@layer components {
    .search-items {
        @apply mx-auto w-full mb-2;
    }

    .btn-new {
        @apply rounded-lg shadow-lg py-2 px-5 bg-pink-600 text-sm text-white block font-medium;
    }

    .btn-save {
        @apply rounded-lg shadow-lg py-2 px-6 bg-pink-600 text-sm text-white inline-block font-medium cursor-pointer hover:bg-pink-400;
    }

    .btn-back {
        @apply ml-2 rounded-lg shadow-lg py-2 px-6 text-sm bg-gray-100 inline-block font-medium hover:bg-gray-200;
    }

    .btn-disable {
        @apply rounded-lg shadow-md py-3 px-5 bg-gray-100 inline-block font-medium hover:bg-gray-200;
    }

    .page-heading {
        @apply font-bold text-2xl uppercase text-gray-400;
    }

    .dropdown-list {
        @apply border border-gray-300 rounded shadow-lg text-gray-600 h-10 pl-5 pr-10 bg-white hover:border-gray-400 focus:outline-none appearance-none;
    }

    .grid-header-title {
        @apply text-xs font-light leading-3 text-gray-500 dark:text-gray-300 font-sans uppercase;
    }

    .grid-header-title-primary {
        @apply focus:outline-none text-lg font-bold leading-5 text-gray-800 dark:text-gray-100 uppercase;
    }

    .grid-header-title-secondary {
        @apply text-sm font-light leading-5 leading-none text-gray-600 dark:text-gray-300;
    }

    .grid-label {
        @apply text-xs font-light leading-3 text-gray-500 dark:text-gray-300 font-sans uppercase;
        /*@apply block uppercase tracking-wide text-gray-700 text-xs mb-2;*/
    }

    .form-label {
        @apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
    }

    .form-text-field {
        @apply appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500;
    }

    .form-floating-label {
        @apply absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6;
    }

    .form-floating-text-field {
        @apply block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600;
    }

    .form-group-elements-layout {
        @apply flex space-x-2;
    }

    .form-group-elements {
        @apply relative z-0 mb-6 w-full;
    }

    .form-error-notice {
        @apply bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3;
    }

    .page-layout-1 {
        @apply flex pt-1 justify-between items-center;
    }

    .page-index-layout {
        @apply w-full;
    }

    .page-item-log {
        @apply text-xs font-light leading-3 text-gray-500 dark:text-gray-300;
    }

    .page-item-title {
        @apply focus:outline-none text-lg font-bold leading-5 text-gray-800 dark:text-gray-100 mt-2 capitalize;
    }

    .page-item-description {
        @apply text-sm font-light leading-5 leading-none text-gray-600 dark:text-gray-300;
    }

    .page-item-enable {
        @apply h-6 w-6 text-green-600;
    }

    .page-item-disable {
        @apply h-6 w-6 text-red-600;
    }

    .page-item-border {
        @apply mt-6;
    }

    .page-list-layout {
        @apply min-w-full;
    }

    .page-pagination-layout {
        @apply py-2 flex items-center justify-center;
    }

    .page-notice {
        @apply py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block;
    }

    .page-header-layout-1 {
        @apply flex justify-between items-center;
    }

    .footer-layout {
        @apply text-gray-600 text-xs;
    }

    .footer-details {
        @apply text-gray-900 text-xs uppercase;
    }
}

.pagy-nav,
.pagy-nav-js {
    @apply flex space-x-2;
}

.pagy-nav .page a,
.pagy-nav .page.active,
.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page a,
.pagy-nav-js .page.active,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
    @apply block rounded-full px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-700 shadow-md hover:bg-gray-500;
&:hover{
     @apply bg-purple-500;
 }
&:active{
     @apply bg-purple-500 text-white;
 }
}

.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
    @apply text-white cursor-default;
&:hover {
     @apply text-white bg-purple-500;
 }
&:active {
     @apply text-white bg-purple-500;
 }
}

.pagy-nav .page.active,
.pagy-nav-js .page.active {
    @apply text-white cursor-pointer bg-red-600 hover:bg-red-400;
&:hover {
     @apply text-white bg-gray-400;
 }
&:active {
     @apply bg-gray-400 text-white;
 }
}


.pagy-combo-nav-js {
    @apply flex max-w-max rounded-full px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
}

.pagy-combo-nav-js .pagy-combo-input {
    @apply bg-white px-2 rounded-sm
}

.pagy-combo-nav-js .page.prev,
.pagy-combo-nav-js .page.next {
&:hover {
     @apply text-gray-800;
 }
&:active {
     @apply text-gray-800;
 }
}

.pagy-combo-nav-js .page.prev.disabled,
.pagy-combo-nav-js .page.next.disabled {
    @apply text-gray-400 cursor-default;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */