@tailwind base;

/* Recreate some normal files */

h1 {

    @apply text-2xl;

}

h2 {

    @apply text-xl;

}

h3 {

    @apply text-lg;

}

@tailwind components;

/* Default */

body {

    @apply bg-cover;

    background-image: repeating-linear-gradient(135deg, #00000033, #00000033 63%, transparent 63%, transparent),

                      url('../img/backgrounds/only-komona.jpg');

    @apply text-white;

    @apply min-h-screen;

}

body > * {

    @apply px-4;

}

body.rtl {

    direction: rtl;

}

a {

    @apply underline;

    text-decoration-style: dotted;

}

select {

    @apply appearance-none;

    @apply block appearance-none w-full;

    @apply border border-gray-200 rounded;

}

/* Navbar */

.navbar {

    @apply bg-gray-800 bg-opacity-75;

    @apply w-full;

    @apply text-base uppercase;

}

.navbar .navbrand {

    @apply font-bold;

}

.navbar ul li.navbrand * {

    @apply border-none;

}

.navbar ul li {

    @apply px-2 py-1;

}

.navbar ul li * {

    @apply align-middle;

    @apply no-underline;

    @apply border-solid border-gray-400 border-b-4;

}

.navbar ul li.active {

    @apply font-bold;

}

.navbar ul li.active * {

    @apply border-solid border-teal-400 border-b-4;

    @apply no-underline;

}

.navbar ul li.lang-dropdown {

    @apply relative;

}

.navbar ul li.lang-dropdown * {

    @apply border-opacity-0;

}

.lang-dropdown span,

.lang-dropdown li {

    @apply cursor-pointer;

}

.lang-dropdown span {

    display: ruby;

}

.navbar ul li.lang-dropdown ul {

    @apply bg-gray-800 bg-opacity-100;

    @apply absolute;

    @apply mt-1;

    white-space: nowrap;

}

/* Not index page */

.block-div {

    @apply bg-gray-900 bg-opacity-75;

    @apply mt-4 p-4 w-auto mx-auto;

    @apply grid grid-cols-1;

    max-width: 60rem;

}

.block-div a {

    @apply text-teal-200;

}

.block-div a:visited {

    @apply text-purple-400;

}

/* 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;

}

/* Buttons */

.btn,

.btn a {

    @apply text-white text-center no-underline !important;

}

.btn {

    @apply bg-transparent;

    @apply font-bold;

    @apply py-1 px-2;

    @apply border-2 border-teal-500 rounded;

    @apply text-white text-center no-underline !important;

}

.btn:hover {

    @apply bg-teal-800 bg-opacity-75;

    @apply border-teal-800;

}

.btn.disabled {

    @apply opacity-50 cursor-not-allowed;

}

/* Icons */

svg {

    @apply h-4 w-4;

    @apply text-white;

}

svg.icon-hamburger {

    @apply h-8 w-8;

}

svg.icon-infos {

    @apply text-teal-200 inline-block;

}

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;

}

@tailwind utilities;