@tailwind base;
@tailwind components;
@tailwind utilities;

/*
    Contains all repeatedly used TW classes
 */

/* GENERAL */
.background-standard {
    @apply bg-amber-50;
}
.a-main {
    @apply underline text-blue-600;
}

/* TEST PAGES */
.instruct-image {
    @apply border-8 border-gray-700 rounded-xl mx-auto mb-4 mt-3;
}

.img-main {
    @apply border-8 border-transparent rounded-2xl bg-gradient-to-r from-zinc-600 to-black;
}
.test-button {
    @apply bg-stone-200 size-5 rounded-full border-4 border-white cursor-pointer relative;
}
.finInstructions {
    @apply text-xl text-center text-amber-500 font-bold my-2 tracking-[3px];
}

/* FORMS */
.input-style {
    @apply rounded-3xl text-xl bg-gradient-to-tr from-[#f0f0f0] via-[#d3d3d3] to-[#a9a9a9];
}
.input-style-main {
    @apply rounded-3xl h-10 w-[300px] lg:w-[460px] text-xl bg-gradient-to-tr from-zinc-100 via-neutral-300 to-neutral-400 px-2.5;
}
.input-style-print {
    @apply rounded-3xl h-10 w-[300px] lg:w-[460px] text-xl bg-gradient-to-tr from-[#f0f0f0] via-[#d3d3d3] to-[#a9a9a9] px-2.5 mb-1;
}
.label-bold {
    @apply text-lg font-extrabold tracking-[5px];
}

.input-fx {
    @apply focus:shadow-input-focus transition-shadow-transform
    duration-300 ease-in-out focus:scale-105;
}
.select-style {
    @apply bg-gray-800 text-base text-white font-extrabold rounded-md px-2 tracking-widest py-0.5
}

.option-style-1 {
    @apply bg-gray-800 text-base text-white font-bold px-2 tracking-wide py-0.5;
}

/* BUTTONS */
.button-style-logout {
    @apply text-xl text-white font-extrabold tracking-[3px] w-[160px] min-w-fit h-[30px] pl-2 rounded-[18px] backdrop-blur-[10px] bg-gradient-to-tr from-[#333333] via-[#666666] to-[#000000];
}

.button-style-round {
    @apply text-white text-center pl-2 font-extrabold tracking-[8px] lg:tracking-[4px]
    size-fit rounded-full lg:size-36 md:size-32 bg-gradient-to-br from-[#333333] via-[#666666] to-[#000000];
}

.admin-button {
    @apply text-[20px] font-extrabold tracking-[3px]
    pl-[5px] w-[160px] h-[30px]
    rounded-[18px] text-white
    bg-gradient-to-tr from-[#333333]
    via-[#666666]
    to-[#000000];
}
.return-button {
    @apply absolute top-6 right-8 text-gray-500 hover:text-gray-800 text-2xl font-bold;
}
/* HEADINGS */
.h6-main {
    @apply text-sm text-sky-500 tracking-[4px] font-extrabold;
}
.h6-black {
    @apply text-base text-black font-bold tracking-[4px];
}
.h5-main {
    @apply text-center font-bold text-2xl;
}
.h4-standard {
    @apply text-3xl font-medium;
}

.h2-main {
    @apply text-center font-bold tracking-[4px] text-[22px];
}

/* TABLES */
.table-main {
    @apply w-96 text-center text-xs whitespace-nowrap;
}
.table-head-main {
    @apply uppercase tracking-wider sticky top-0 bg-stone-500 border-b-4 border-b-white;
}

.th-main {
    @apply py-3 px-4 text-white text-base tracking-[5px];
}

.th-main-stone {
    @apply py-3 px-4 bg-stone-500 text-white text-base tracking-[5px]
}
.td-main {
    @apply py-3 px-4 text-xs text-white font-extrabold tracking-[2px];
}

.td-green {
    @apply py-3 px-4 text-xs text-green-500 font-extrabold tracking-[2px];
}
.span-main {
    @apply font-bold tracking-[4px] text-[22px];
}
.thead-print {
    @apply text-center text-2xl font-bold mb-4
}
.th-print {
    @apply border border-gray-400 px-4 py-2 text-center;
}
.td-print {
    @apply border border-gray-400 p-2 text-center;
}

/* MODAL */
.modal-heading {
    @apply text-2xl text-center font-bold mb-4 underline italic;
}
.modal-small-head {
    @apply text-xl text-left font-bold mb-1 underline italic ps-2;
}

.modal-paragraph {
    @apply text-base text-gray-700;
}
.modal-button {
    @apply text-lg text-gray-900 font-bold underline italic;
}