@layer hubleto-framework {

  app-dialog { display: none; }

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

  .alert-primary { @apply p-4 mb-4 text-primary rounded-lg bg-primary/20; }
  .alert-secondary { @apply p-4 mb-4 text-secondary rounded-lg bg-secondary/20; }
  .alert-info { @apply p-4 mb-4 text-blue-800 rounded-lg bg-blue-50; }
  .alert-danger { @apply p-4 mb-4 text-red-800 rounded-lg bg-red-50; }
  .alert-success { @apply p-4 mb-4 text-green-800 rounded-lg bg-green-50; }
  .alert-warning { @apply p-4 mb-4 text-yellow-800 rounded-lg bg-yellow-50; }
  .alert-danger { @apply p-4 mb-4 text-red-800 rounded-lg bg-red-50; }

  .badge { @apply text-sm p-1 bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-100 rounded inline m-0.5; }
  .badge.badge-large { @apply text-lg m-1 py-1 px-2; }
  .badge.badge-extra-large { @apply text-2xl m-1 py-1 px-2; }
  .badge.badge-small { @apply text-xs py-0.5 px-0.5 m-0; }
  .badge-info { @apply text-blue-800 dark:text-blue-100 bg-blue-50 dark:bg-blue-800; }
  .badge-danger { @apply text-red-800 dark:text-red-100 bg-red-50 dark:bg-red-800; }
  .badge-success { @apply text-green-800 dark:text-green-100 bg-green-50 dark:bg-green-800; }
  .badge-warning { @apply text-yellow-800 dark:text-yellow-100 bg-yellow-50 dark:bg-yellow-800; }
  .badge-danger { @apply text-red-800 dark:text-red-100 bg-red-50 dark:bg-red-800; }
  .badge-primary { @apply text-primary dark:text-primary; }
  .badge-secondary { @apply text-secondary dark:text-secondary; }
  .badge-blue { @apply text-blue-800 dark:text-blue-100 bg-blue-100 dark:bg-blue-800; }
  .badge-green { @apply text-green-800 dark:text-green-100 bg-green-100 dark:bg-green-800; }
  .badge-red { @apply text-red-800 dark:text-red-100 bg-red-100 dark:bg-red-800; }
  .badge-yellow { @apply text-yellow-800 dark:text-yellow-100 bg-yellow-100 dark:bg-yellow-800; }
  .badge-lime { @apply text-lime-800 dark:text-lime-100 bg-lime-100 dark:bg-lime-800; }
  .badge-violet { @apply text-violet-800 dark:text-violet-100 bg-violet-100 dark:bg-violet-800; }

  .btn { @apply relative rounded inline-flex text-left p-0 m-0 min-h-4 items-center bg-primary text-white cursor-pointer border-slate-200 hover:bg-secondary hover:text-white hover:no-underline; box-sizing: border-box; }
  .btn.btn-small { @apply h-auto; }
  .btn .icon { @apply h-full items-center px-2 py-1 justify-center border-slate-200; }
  .btn .text { @apply h-full items-center px-2 py-1 break-words; max-height: 3.5rem; overflow: hidden; }
  .btn .shortcut { @apply flex-1 text-right mr-1 text-xs text-gray-400; max-height: 3.5rem; overflow: hidden; }
  .btn .hover { @apply hidden absolute text-nowrap text-gray-800 top-10 left-2 p-2 border border-gray-200 bg-gray-50 shadow-lg rounded-lg; z-index: 999999; }
  .btn:hover .hover { @apply block; }

  .btn.btn-no-border { @apply !border-none; }

  .btn.btn-extra-small .icon { @apply px-1 py-0.5; font-size: 0.3rem; }
  .btn.btn-extra-small .text { @apply px-1 py-0.5; font-size: 0.3rem; }
  .btn.btn-small .icon { @apply text-sm py-0; }
  .btn.btn-small .text { @apply text-sm py-0; }
  .btn.btn-large .icon { @apply text-lg px-2.5 py-1.5; }
  .btn.btn-large .text { @apply text-lg px-2.5 py-1.5; }
  .btn.btn-extra-large .icon { @apply text-2xl px-3.5 py-2; }
  .btn.btn-extra-large .text { @apply text-2xl px-3.5 py-2; }

  .btn-bold { @apply font-bold; }

  .btn.btn-transparent { @apply text-gray-800 bg-transparent border border-gray-100 hover:border-gray-200 dark:hover:border-gray-600 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-800 dark:border-gray-800; }
  .btn.btn-primary { @apply text-white bg-primary border border-primary hover:border-primary/80 hover:bg-primary/80; }
  .btn.btn-primary-outline { @apply text-primary bg-white border border-dotted border-primary hover:border-solid; }
  .btn.btn-secondary { @apply text-white bg-secondary border border-secondary hover:border-secondary/80 hover:bg-secondary/80; }
  .btn.btn-white { @apply text-gray-800 bg-white border border-gray-100 hover:bg-gray-100; }
  .btn.btn-light { @apply text-primary bg-primary/10 hover:bg-secondary/10; }
  .btn.btn-danger { @apply text-red-600 bg-red-200 hover:bg-red-400 hover:text-white; }
  .btn.btn-success { @apply text-white bg-green-700 hover:bg-green-900 hover:text-white; }
  .btn.btn-success-outline { @apply text-green-700 bg-white border border-dotted border-green-700 hover:border-solid; }
  .btn.btn-add { @apply text-white bg-secondary hover:bg-secondary/80 hover:text-white; }
  .btn.btn-add-outline { @apply text-secondary bg-white border border-dotted border-secondary hover:border-solid; }
  .btn.btn-edit { @apply text-white bg-secondary hover:bg-secondary/80 hover:text-white; }
  .btn.btn-edit-outline { @apply text-secondary bg-white border border-dotted border-secondary hover:border-solid; }
  .btn.btn-save { @apply text-white bg-secondary hover:bg-green-900 hover:text-white; }
  .btn.btn-save-outline { @apply text-secondary bg-white border border-dotted border-secondary hover:border-solid; }
  .btn.btn-delete { @apply text-red-800 bg-red-100 border border-red-100 hover:border-red-200; }
  .btn.btn-delete-outline { @apply text-red-800 bg-transparent border border-red-100 hover:border-red-200; }
  .btn.btn-cancel { @apply text-gray-600 bg-gray-200 hover:bg-gray-400 hover:text-white; }
  .btn.btn-cancel-outline { @apply text-gray-600 bg-white border border-dotted border-gray-200 hover:border-solid; }
  .btn.btn-close { @apply text-red-600 bg-red-200 hover:bg-red-400 hover:text-white; }
  .btn.btn-close-outline { @apply text-gray-600 bg-white border border-dotted border-gray-200 hover:border-solid; }

  .btn.btn-info { @apply text-blue-800 bg-blue-50 border border-blue-50 hover:bg-blue-200 hover:text-blue-800; }
  .btn.btn-danger { @apply text-red-800 bg-red-50 border border-red-50 hover:bg-red-200 hover:text-red-800; }
  .btn.btn-success { @apply text-green-800 bg-green-50 border border-green-50 hover:bg-green-200 hover:text-green-800; }
  .btn.btn-warning { @apply text-yellow-800 bg-yellow-50 border border-yellow-50 hover:bg-yellow-200 hover:text-yellow-800; }

  .btn.btn-blue { @apply text-blue-800 bg-blue-100 border border-blue-100 hover:border-blue-200; }
  .btn.btn-blue-outline { @apply text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-200; }
  .btn.btn-blue-outline .text { @apply !border-blue-800; }
  .btn.btn-green { @apply text-green-800 bg-green-100 border border-green-100 hover:border-green-200; }
  .btn.btn-green-outline { @apply text-green-800 bg-transparent border border-green-100 hover:bg-green-200; }
  .btn.btn-green-outline .text { @apply !border-green-800; }
  .btn.btn-red { @apply text-red-800 bg-red-100 border border-red-100 hover:border-red-200; }
  .btn.btn-red-outline { @apply text-red-800 bg-transparent border border-red-100 hover:bg-red-200; }
  .btn.btn-red-outline .text { @apply !border-red-800; }
  .btn.btn-yellow { @apply text-yellow-800 bg-yellow-100 border border-yellow-100 hover:border-yellow-200; }
  .btn.btn-yellow-outline { @apply text-yellow-800 bg-transparent border !border-yellow-800 hover:bg-yellow-50; }
  .btn.btn-yellow-outline .text { @apply !border-yellow-800; }
  .btn.btn-lime { @apply text-lime-800 bg-lime-100 border border-lime-100 hover:border-lime-200; }
  .btn.btn-lime-outline { @apply text-lime-800 bg-transparent border border-lime-100 hover:bg-lime-200; }
  .btn.btn-lime-outline .text { @apply !border-lime-800; }
  .btn.btn-violet { @apply text-violet-800 bg-violet-100 border border-violet-100 hover:border-violet-200; }
  .btn.btn-violet-outline { @apply text-violet-800 bg-transparent border border-violet-100 hover:bg-violet-200; }
  .btn.btn-violet-outline .text { @apply !border-violet-800; }

  .btn-list-item { @apply flex rounded-none shadow-none p-1 border-none w-full items-center; }
  .list > .btn-list-item:not(:first-child) { border-top: 1px solid var(--color-slate-200); @apply dark:border-t-gray-800; }
  .btn-list-item .text { @apply flex-1; }
  .btn-list-item .icon { @apply self-center flex items-center; }

  .btn.btn-disabled { @apply text-gray-200; opacity: 0.5 }
  
  .btn.btn-dropdown { @apply items-baseline relative; }
  .btn.btn-dropdown > .menu { @apply cursor-default invisible absolute bg-white shadow-lg; left: 0%; top: 110%; z-index: 1; }
  .btn.btn-dropdown > .menu > .list { @apply divide-none mt-1 bg-white shadow-xl rounded absolute; }
  .btn.btn-dropdown.open { @apply !bg-gray-100 !text-gray-800 !border-gray-100; }
  .btn.btn-dropdown.open > .menu { @apply !visible; }
  .btn.btn-dropdown.open > .menu > .list .btn { @apply !text-nowrap; }

  .btn-group { @apply flex divide-x rounded border border-gray-100 dark:border-gray-600; }
  .btn-group.vertical { @apply flex-col divide-y; }
  .btn-group .btn { @apply border-none rounded-none shadow-none; }

  .breadcrumbs { @apply flex ml-2; }
  .breadcrumbs ol li:nth-child(n+2) { @apply hidden sm:block md:block ;}
  .breadcrumbs ol > li > div { @apply flex items-center; }
  .breadcrumbs ol > li > div > a { @apply ms-1 text-sm font-medium text-gray-500 hover:text-primary md:ms-2; }
  .breadcrumbs ol > li > div > span { @apply ms-1 text-sm font-medium text-gray-800; }

  .card { @apply flex flex-col border border-solid border-slate-200 rounded shadow hover:shadow-lg dark:bg-gray-900 dark:border-gray-800 dark:text-white; }
  .card.card-horizontal { @apply flex flex-row; }
  .card-header { @apply flex justify-between items-center font-bold p-2 text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white; }
  .card.card-horizontal .card-header { @apply border-none; }
  .card-header-buttons { @apply -m-4; }
  .card-header-buttons .btn { @apply font-normal p-4 border-none rounded-none; }
  .card-header-buttons .btn .icon { @apply my-0 py-0; }
  .card-header-buttons .btn .text { @apply my-0 py-0; }
  .card-header small { @apply font-normal; }
  .card-body { @apply p-2 flex-1; }
  .card-footer { @apply flex justify-between border-t border-slate-200 p-4 gap-2; }

  .card.card-info .card-header { @apply text-blue-800 bg-blue-50; }
  .card.card-danger .card-header { @apply text-red-800 bg-red-50; }
  .card.card-success .card-header { @apply text-green-800 bg-green-50; }
  .card.card-warning .card-header { @apply text-yellow-800 bg-yellow-50; }
  .card.card-danger .card-header { @apply text-red-800 bg-red-50; }
  .card.card-primary .card-header { @apply text-primary bg-primary/20; }
  .card.card-secondary .card-header { @apply text-secondary bg-secondary/20; }
  .card.card-blue .card-header { @apply text-blue-800 bg-blue-100; }
  .card.card-green .card-header { @apply text-green-800 bg-green-100; }
  .card.card-red .card-header { @apply text-red-800 bg-red-100; }
  .card.card-yellow .card-header { @apply text-yellow-800 bg-yellow-100; }
  .card.card-lime .card-header { @apply text-lime-800 bg-lime-100; }
  .card.card-violet .card-header { @apply text-violet-800 bg-violet-100; }

  .dialog { @apply rounded bg-white; }
  .dialog-header { @apply !p-4 !text-base; }
  .dialog-content { @apply !p-4 !text-base; }
  .dialog-footer { @apply p-4 border-t border-slate-200 bg-gray-50; }

  .dialog-danger-header { @apply bg-red-600 text-white hover:bg-red-400; }
  .dialog-warning-header { @apply bg-yellow-300 text-gray-800 hover:bg-yellow-200; }
  .dialog-confirm-header { @apply bg-blue-300 text-gray-800 hover:bg-yellow-200; }

  .divider { @apply px-1 pt-4 pb-2; }
  .divider.dense { @apply px-1 py-2; }
  .divider > div { @apply relative; }
  .divider > div > div { @apply flex relative justify-start; }
  .divider > div > div:nth-child(1) { @apply flex items-center absolute inset-0; }
  .divider > div > div:nth-child(1) > div { @apply border-t w-full border-gray-200; }
  .divider > div > div:nth-child(2) > span { @apply flex justify-between items-center text-gray-600 font-semibold leading-6 ml-3 px-3 bg-white dark:bg-slate-600 dark:text-white; }

  .list { @apply list-none border border-slate-200 dark:border-slate-700 rounded; }
  .list > *:not(:first-child) { @apply border-t border-slate-200; }
  .list.bordered .list-item { @apply border-b-slate-100; }

  .form { @apply shadow-sm rounded-sm border border-slate-200; }
  .form .form-header { @apply flex border-b border-b-slate-200 text-primary items-baseline w-full justify-between shadow-sm p-2 bg-gray-50; }
  .form .form-header .modal-header-left { @apply flex flex-1 gap-1; }
  .form .form-header .modal-header-title { @apply flex-1 text-center; }
  .form .form-header .modal-header-right { @apply flex flex-1 gap-1 justify-end; }
  .form .form-body { @apply p-2 flex-1 overflow-y-auto; }
  .form .form-body .form-content.not-initialized { opacity: 0.5; }
  .form .form-body .form-top-menu { @apply flex gap-2 p-2 mb-2 border-b border-b-gray-700; }
  .form .form-footer { @apply p-2 border-t border-t-slate-200 bg-gray-50; }

  .input-icon { @apply text-lg min-w-8; }

  .input-wrapper { @apply grow relative justify-between items-center border border-transparent rounded-sm p-1 hover:bg-gray-50 dark:hover:bg-white/10; box-sizing: border-box; }
  .input-wrapper .input-label { @apply block text-sm text-gray-400; }
  .input-wrapper.modified .input-label { @apply text-yellow-600; }
  .input-wrapper.required { @apply before:absolute before:content-['*'] before:text-red-600; }
  .input-wrapper.required .input-label { @apply pl-3; }
  .input-wrapper .input-body { @apply flex items-center flex-[2]; overflow-wrap: anywhere; }
  .input-wrapper .input-info { @apply text-sm text-gray-500 pr-1; }
  .input-wrapper .input-description { @apply text-sm text-primary pr-1; }

  .input-highlighted { @apply bg-primary/20; }

  .key-value-table { @apply leading-8 divide-y border border-slate-200; }
  .key-value-table.dense { @apply leading-4 border border-slate-200; }
  .key-value-table > div { @apply flex justify-between p-1 border-b border-slate-200 hover:bg-gray-100; }
  .key-value-table > div div:nth-child(2) { @apply font-bold; }

  .modal { @apply flex flex-col h-screen w-full overflow-auto bg-white dark:bg-gray-950; }
  .modal.fullscreen { @apply !w-full !h-full !left-0 !top-0; }
  .modal.right { @apply max-w-[100vw] max-h-[100%] fixed left-0 top-0 md:left-auto md:right-0 md:w-1/2 z-50 shadow-2xl border-l border-primary dark:border-slate-800 dark:shadow-black; }
  .modal.right.wide { @apply md:w-[80%]; }
  .modal.right.wider { @apply md:w-[93%]; }

  .modal.right .modal.right { @apply border-t border-t-primary; height: calc(100vh - 4em); top: 4em; }
  .modal.right .modal.right .modal.right { @apply border-t border-t-primary; height: calc(100vh - 6em); top: 6em; }
  .modal.right .modal.right .modal.right .modal.right { @apply border-t border-t-primary; height: calc(100vh - 8em); top: 8em; }
  .modal.right .modal.right .modal.right .modal.right .modal.right { @apply border-t border-t-primary; height: calc(100vh - 10em); top: 10em; }
  .modal.right .modal.right .modal.right .modal.right .modal.right .modal.right { @apply border-t border-t-primary; height: calc(100vh - 12em); top: 12em; }

  .modal.right.wide .modal.right.wide { @apply !shadow-2xl md:w-[76%]; }
  
  .modal.right .modal.right .modal-header { @apply bg-primary/10; }

  .modal.centered { @apply fixed mx-auto md:my-4 md:w-2/3 md:h-[calc(100vh-theme(space.8))] z-50 shadow-2xl rounded border border-primary dark:border-slate-800; top: 0; left: 50%; transform: translate(-50%, 0%);}
  .modal.centered.large { @apply md:w-[90vw] md:h-[90vh];}
  .modal.centered.small { @apply fixed mx-auto mt-1 md:w-1/2 md:h-2/3 z-50 shadow-xl; top: 50%; left: 50%; transform: translate(-50%, -50%);}
  .modal.centered.tiny { @apply fixed mx-auto mt-1 md:w-1/3 md:h-1/3 z-50 shadow-xl; top: 50%; left: 50%; transform: translate(-50%, -50%);}

  .modal.inside-parent { @apply absolute top-0 left-0 bg-white mb-2 h-full; z-index: 10; background: #00000020; }
  .modal.inside-parent > .modal-inner { @apply border border-primary shadow; width: calc(100% - 2em); margin: 1em; background: white; }

  .modal > .modal-inner { @apply flex flex-col w-full h-full; }
  .modal > .modal-inner > .modal-header { @apply flex items-center border-b border-b-primary/20 text-primary dark:text-white dark:bg-slate-900 dark:border-slate-800 items-baseline w-full justify-between p-2 bg-primary/5; }
  .modal > .modal-inner > .modal-header > .modal-header-left { @apply flex grow-1 gap-1; }
  .modal > .modal-inner > .modal-header > .modal-header-title { @apply grow-1 text-center text-sm md:text-xl; }
  .modal > .modal-inner > .modal-header > .modal-header-title h2 { @apply m-0 p-0 text-sm md:text-xl text-primary; }
  .modal > .modal-inner > .modal-header > .modal-header-right { @apply flex grow-1 gap-1 justify-end; }
  .modal > .modal-inner > .modal-header .btn { @apply flex-nowrap }
  .modal > .modal-inner > .modal-header .btn .text { @apply hidden md:flex }
  .modal > .modal-inner > .modal-top-menu { @apply flex w-full justify-between border-gray-100 mb-2 bg-white border-b border-b-primary/20; }
  .modal > .modal-inner > .modal-top-menu > div > .btn { @apply p-1 border-none rounded-none shadow-none; }
  .modal > .modal-inner > .modal-body { @apply p-2 flex-1 overflow-y-auto relative; }
  .modal > .modal-inner > .modal-footer { @apply flex gap-2 p-2 border-t border-t-gray-200 bg-gray-50 dark:bg-slate-900 dark:border-slate-800; }

  .modal.theme-secondary { @apply border-secondary; }
  .modal.theme-secondary > .modal-inner { @apply border-secondary; }
  .modal.theme-secondary > .modal-inner > .modal-header { @apply border-b-secondary/20 bg-secondary/5 text-secondary; }
  .modal.theme-secondary > .modal-inner > .modal-header > .modal-header-title h2 { @apply text-secondary; }

  /* .modal.right .modal.right { @apply w-[95%] margin-right: 0.5em; margin-top: 2em; height: calc(100% - 2.5em); } */

  .table-header-search::placeholder { filter: grayscale(1); }

  .table-default { @apply w-full text-left border border-gray-200 rtl:text-right text-gray-500 dark:text-gray-400; }
  .table-default > thead { @apply text-gray-700 bg-gray-50 dark:bg-gray-900 dark:text-gray-400; }
  .table-default > thead > tr > th { @apply px-6 py-3; }
  .table-default > tbody > tr { @apply bg-white border dark:bg-gray-900 border-gray-200 hover:bg-gray-50 odd:bg-slate-100 dark:border-slate-700 dark:hover:bg-slate-700 dark:text-white odd:dark:bg-slate-800; }
  .table-default > tbody > tr > th { @apply px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white; }
  .table-default > tbody > tr > td { @apply px-6 py-4; }
  .table-default > thead { @apply text-gray-700 bg-gray-50 dark:bg-gray-900 dark:text-gray-400; }

  .table-default.dense > thead > tr > th { @apply px-1 py-1; }
  .table-default.dense > tbody > tr > th { @apply px-1 py-1; }
  .table-default.dense > tbody > tr > td { @apply px-1 py-1; }

  .table-default.not-striped > tbody > tr { @apply !bg-white; }

  .hubleto-lookup[class*='-container'] { width: 100%; }
  .hubleto-lookup *[class*='-indicator'] { padding: 0px !important; }
  .hubleto-lookup *[class*='-control'] { @apply !w-full rounded-sm !bg-white dark:!bg-slate-500 dark:!text-white; min-height: auto !important; }
  .hubleto-lookup *[class*='-control'] > div { padding-bottom: 0px !important; padding-top: 0px !important; }
  .hubleto-lookup *[class*='-input-container'] { @apply !p-0.5 !m-0; min-width: 2em; }
  .hubleto-lookup *[class*='-ValueContainer'] { @apply !p-0; }
  .hubleto-lookup *[class*='-singleValue'] { @apply dark:!text-white; }
  .hubleto-lookup *[class*='-Input'] { @apply !text-sm; }
  .hubleto-lookup *[class*='-menu'] * { @apply !text-sm; }
  .hubleto-lookup > div > div { @apply p-0; }
  .hubleto-lookup > div > div > div { @apply p-0; }

}