@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;