@layer hubleto-framework {

  /* HTML tags */
  html { @apply !font-sans text-gray-800 dark:bg-gray-950; }

  a { @apply hover:underline }
  a[role=button] { @apply text-primary bg-white cursor-pointer m-2 inline-block font-bold text-sm p-2 border border-gray-50 hover:no-underline hover:bg-gray-50; }

  h1 { @apply mt-4 text-primary text-2xl; }
  h2 { @apply mb-2 text-primary text-xl; }

  /* table { @apply border border-slate-50; }
  table tr { @apply odd:bg-slate-50; }
  table tr td { @apply p-1; } */

  input, select, textarea { @apply bg-white/20 border-slate-500 border rounded p-1; }
  code { @apply bg-slate-100 p-1; }

  /* SPECIAL components, idetified by # id */
  aside#default-sidebar { @apply flex fixed top-0 left-0 z-10 pt-12 h-full transition-transform -translate-x-[110%] md:translate-x-0; }
  aside#default-sidebar.visible { @apply translate-x-0; }
  aside#default-sidebar > nav { @apply bg-primary p-1 flex gap-0.5 flex-col w-36 dark:bg-slate-900 dark:border-r dark:border-r-slate-800; }
  aside#default-sidebar > nav .btn { @apply w-full rounded bg-transparent hover:bg-white/20 dark:bg-transparent dark:hover:bg-primary; }
  aside#default-sidebar > nav .btn .icon { @apply w-6 text-sm text-left flex justify-center content-center flex-wrap border-none bg-transparent; }
  aside#default-sidebar > nav .btn .text { @apply border-none text-base; }
  aside#default-sidebar > nav .btn.btn-active { @apply bg-white text-gray-800 dark:bg-primary dark:text-white dark:hover:bg-primary/80; }
  aside#default-sidebar > div.second-sidebar { @apply bg-white h-full w-48 px-2 mt-12 overflow-y-auto border-r border-r-gray-100; }

  nav#default-navbar { @apply bg-white fixed w-full z-20 top-0 start-0; }
  nav#default-navbar > div { @apply flex flex-wrap items-center w-[100vw] justify-between m-0 p-2 dark:bg-gray-900 dark:border-b dark:border-b-slate-700; }
  nav#default-navbar .btn { @apply !shadow-none; }

  div#sign-in-screen { @apply w-full pt-4 bg-primary/10 md:pt-0 md:h-screen flex flex-col items-center justify-center; }
  div#sign-in-screen > .languages { @apply w-full sm:w-5/6 md:w-1/2 text-right; }
  div#sign-in-screen > .inner { @apply bg-white sm:shadow-lg rounded-lg sm:border border-slate-200 w-full sm:w-5/6 md:w-1/2 flex flex-col items-center p-10; }
  div#sign-in-screen > .inner > .logo { @apply flex-1 flex items-center justify-center; }
  div#sign-in-screen > .inner > .form { @apply flex-1 w-full max-w-[400px] border-none shadow-none; }
  div#sign-in-screen > .inner > .form > .title { @apply text-center; }
  div#sign-in-screen > .inner > .form > .content > input { @apply border border-gray-300 rounded-sm w-full p-4 mb-1; }

  div#app-main-content { @apply sm:ml-0 md:ml-64 mt-12 px-3 dark:bg-gray-950; }
  div#app-main-content.sidebar-only-nav { @apply md:ml-36; }
}

/* BODY */

body.react-elements-rendering #app-main-content { display: none; }
body.react-elements-rendered #app-main-content { display: block; }

body #logo { transition: 250ms; transition-delay: 300ms; }
body.ajax-loading #logo { transform: rotate(25deg); }

/* SWAL */

.swal2-html-title { text-align: left; }
.swal2-html-container { text-align: left; }