@tailwind base;

/* Recreate some normal behavior */
h1 {
    @apply text-2xl;
}
h2 {
    @apply text-xl;
}
h3 {
    @apply text-lg;
}

@tailwind components;

a {
    @apply underline;
    text-decoration-style: dotted;
}
/* Default */
body {
    @apply bg-cover;
    background-image: repeating-linear-gradient(135deg, #00000033, #00000033 63%, transparent 63%, transparent),
                      url('../background');
    @apply text-white;
    @apply min-h-screen;
}
body > * {
    @apply px-4;
}
body.rtl {
    direction: rtl;
}
/* Navbar */
.navbar {
    @apply bg-gray-800 bg-opacity-75;
    @apply w-full;
    @apply text-base uppercase;
}
.navbar .navbrand {
    @apply font-bold;
}
.navbar ul li {
    @apply px-2 py-1;
    @apply hidden;
}
.navbar ul li.navbrand {
    display: list-item;
}
.navbar ul li > *,
.dropdown.user ul li * {
    @apply align-middle;
    @apply no-underline;
    @apply border-solid border-gray-400 border-b-4;
}
.navbar ul.show-menu li {
    display: list-item;
}
.navbar ul li.navbrand * {
    @apply border-none;
    @apply inline-block;
}
.navbar .hamburger {
    @apply float-right;
}
@screen xl {
    .navbar .navbrand .hamburger {
        @apply hidden;
    }
    .navbar ul {
        @apply flex;
    }
    .navbar ul li {
        display: list-item;
    }
}
.navbar ul li.active,
.dropdown.user ul li.active {
    @apply font-bold;
}
.navbar ul li.active *,
.dropdown.active ul li.active * {
    @apply border-solid border-teal-400 border-b-4;
    @apply no-underline;
}
.navbar ul li.dropdown {
    @apply relative;
}
.navbar ul li.dropdown.lang *,
.navbar ul li.dropdown.user > a {
    @apply border-opacity-0;
}
.dropdown span,
.dropdown li {
    @apply cursor-pointer;
}
.dropdown a {
    display: ruby;
}
.navbar ul li.dropdown ul {
    @apply bg-gray-800 bg-opacity-100;
    @apply absolute;
    @apply mt-1;
    @apply block;
    white-space: nowrap;
}
.dropdown.lang ul li {
    @apply underline;
    text-decoration-style: dotted;
}
.dropdown.user ul,
.dropdown.user ul li form {
    @apply border-none;
}
.dropdown.user button {
    @apply text-base uppercase;
}
main {
    @apply mt-4 w-auto mx-auto;
    @apply grid grid-cols-1;
    @apply max-w-6xl;
}
main > * {
    @apply bg-gray-900 bg-opacity-75;
    @apply p-4;
}
main a {
    @apply text-teal-200;
}
main a:visited {
    @apply text-purple-400;
}
/* Icons */
svg {
    @apply h-4 w-4;
    @apply text-white;
}
svg.icon-hamburger {
    @apply h-8 w-8;
}
svg.icon-infos {
    @apply h-5 w-5;
    @apply text-blue-500 inline-block;
    @apply bg-white rounded-full;
}
svg.icon-upload {
    @apply mx-auto;
    @apply rounded-full border border-gray-200 border-8;
    @apply h-32 w-32;
    @apply text-gray-200;
}
/* Cards */
.card {
    @apply p-4 mt-4;
}
.card.mini {
    @apply pl-1 pr-0 py-0 my-1;
}
.card.error {
    @apply bg-orange-100;
    @apply text-orange-700;
    @apply border-l-4 border-orange-500;
}
.card.info {
    @apply bg-blue-100;
    @apply text-blue-700;
    @apply border-l-4 border-blue-500;
}
/* Buttons */
.btn,
.btn a {
    @apply text-white text-center no-underline !important;
}
.btn {
    @apply bg-teal-700;
    @apply font-bold;
    @apply py-1 px-2;
    @apply border-2 border-teal-700 rounded;
    @apply text-white text-center no-underline !important;
}
.btn:hover {
    @apply bg-teal-900;
    @apply border-teal-900;
}
.btn.disabled {
    @apply opacity-50 cursor-not-allowed;
}
.form {
    @apply mx-auto;
}
.form .input-field {
    @apply mb-4;
}
.form label {
    @apply text-sm font-bold;
    @apply mb-2;
    @apply block;
}
.form input {
    @apply pl-2 w-full;
}
.form .btn {
    @apply w-full;
}
select {
    @apply appearance-none;
    @apply block appearance-none w-full;
    @apply border border-gray-200 rounded;
}
.modale {
    @apply bg-gray-900 bg-opacity-100;
    @apply p-4 pt-8;
    @apply w-full h-full;
    @apply fixed inset-0;
    @apply overflow-y-scroll;
    @apply z-50;
}
.modale div {
    @apply mx-auto max-w-4xl;
}
.modale ul {
    @apply list-disc list-inside;
}
/* My files page */
.block-div.myfiles hr {
    @apply mb-2;
}
.block-div.myfiles {
    @apply leading-tight;
}
.files-buttons {
    @apply my-4 grid grid-cols-1 gap-2;
    @apply text-center;
}
@screen lg {
    .files-buttons {
        @apply mt-4 grid grid-cols-2;
    }
}
.files-buttons .btn {
    @apply w-full;
}
/* Index page */
.upload {
    @apply my-4 grid grid-cols-1 gap-2;
}
@screen lg {
    .upload {
        @apply mt-4 grid grid-cols-2;
    }
}
@screen xl {
    .upload {
        @apply mt-4 grid grid-cols-3;
    }
    .upload #results {
        @apply col-span-2;
    }
}
.upload .upload-form {
    @apply bg-gray-900 bg-opacity-75;
    @apply rounded-md;
    @apply p-4;
}
@screen md {
    .upload .upload-form {
        @apply leading-relaxed;
    }
}
@screen lg {
    .upload .upload-form {
        @apply leading-loose;
    }
}
.upload .upload-form select {
    @apply leading-normal;
}
.upload .upload-form input {
    @apply pl-2;
    @apply leading-relaxed;
}
.upload .upload-form select,
.upload .upload-form input,
.upload .upload-form {
    @apply bg-gray-700 bg-opacity-75;
}
.upload #results h1 {
    @apply text-xl text-center;
}
.upload .upload-form .input-field {
    @apply relative;
}
.upload .upload-form [type="checkbox"] {
    @apply w-4 h-4;
}

.upload #files {
    @apply text-center;
    @apply mt-4 p-4;
    @apply border-2 border-gray-200 border-dashed;
}

.upload #results {
    @apply bg-gray-700 bg-opacity-75;
    @apply rounded-md;
    @apply p-4 mx-10;
}
.form.invite {
    @apply max-w-2xl;
}
@tailwind utilities;