@import "headings";
@import "button";
@import "navbar";
@import "form";
@import "switch";
@import "flip_card";
@import "colors";

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

@layer components {
    .container {
        @apply mx-auto mt-6;
    }

    a {
        @apply text-blue-600 transition-colors hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400;
    }

    hr {
        @apply dark:border-gray-800;
    }
}
@layer components {
    .btn-primary {
        @apply cursor-pointer rounded-lg bg-blue-700 px-4 py-2 text-center text-sm font-medium leading-6 text-white transition-colors duration-150 hover:bg-blue-800 hover:text-white focus:outline-none dark:bg-blue-600 dark:hover:bg-blue-700;
    }

    .btn-primary-sleek {
        @apply btn-primary py-1;
    }

    .btn-success {
        @apply btn-primary bg-green-700 hover:bg-green-900;
    }

    .btn-success-sleek {
        @apply btn-success py-1;
    }

    .btn-danger {
        @apply btn-primary bg-red-700 hover:bg-red-800;
    }

    .btn-danger-sleek {
        @apply btn-danger py-1;
    }

    .btn-primary-empty {
        @apply btn-primary cursor-pointer bg-white text-black ring-1 ring-blue-600 hover:text-white dark:bg-transparent dark:text-white;
    }

    .btn-secondary {
        @apply btn-primary bg-gray-50 text-black outline outline-1 -outline-offset-1 outline-gray-300 hover:bg-gray-100 hover:text-black dark:bg-gray-900 dark:text-white dark:outline-gray-700 dark:hover:bg-gray-800 dark:hover:text-white;
    }

    .btn-secondary-sleek {
        @apply btn-secondary py-1;
    }
}
@layer components {
    .normal-border {
        @apply border border-gray-300 dark:border-gray-700;
    }

    .normal-background {
        @apply bg-white dark:bg-gray-900;
    }

    .bg-gray {
        @apply bg-gray-300 dark:bg-gray-700;
    }

    .text-gray {
        @apply text-gray-600 dark:text-gray-500;
    }
}
@layer components {
    .flip-card {
        transform-style: preserve-3d;
        transition: transform 0.5s;
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
    }

    .flipped {
        transform: rotateY(180deg);
    }

    .flip-card-container {
        @apply mt-5;
        width: 800px;
        height: 400px;
        perspective: 10000px;
        cursor: pointer;
    }

    .flip-card-side {
        @apply select-none rounded-xl bg-blue-600 text-xl sm:text-5xl dark:bg-blue-800;
        width: 100%;
        height: 100%;
        color: white;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        backface-visibility: hidden;
    }

    .flip-card-back {
        @apply bg-green-700 dark:bg-teal-700;
        transform: rotateY(180deg);
    }

    .cards-progress-bar {
        transition: width 0.2s ease-in-out;
        -moz-transition: width 0.2s ease-in-out;
        -webkit-transition: width 0.2s ease-in-out;
    }
}
@layer components {
    form.old {
        @apply my-2 flex flex-col items-center;
    }

    input[type="number"].no-number-input-controls::-webkit-inner-spin-button,
    input[type="number"].no-number-input-controls::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .text-field-container {
        @apply flex w-full max-w-96 border-b border-teal-700;
    }

    .text-field {
        @apply w-full border-none before:border-b focus:ring-0 dark:bg-transparent;
    }

    .form-submit {
        @apply m-1 cursor-pointer rounded bg-teal-700 px-2 text-white hover:bg-teal-800;
    }
}
@layer components {
    h1 {
        @apply py-2 text-center text-4xl font-medium;
    }

    h2 {
        @apply py-2 text-center text-3xl font-medium;
    }

    h3 {
        @apply py-1 text-center text-2xl;
    }

    h4 {
        @apply py-1 text-center text-xl;
    }

    h5 {
        @apply text-center text-lg;
    }

    h6 {
        @apply text-center;
    }
}
@layer components {
    .nav {
        @apply sticky start-0 top-0 z-20 w-full border-b border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900;
    }

    .nav-dropdown-current {
        @apply block rounded bg-blue-700 px-3 py-2 text-white no-underline hover:text-white md:bg-transparent md:p-0 md:text-blue-700 md:underline md:hover:text-blue-700 md:dark:text-blue-500;
    }

    .nav-dropdown {
        @apply block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-blue-500;
    }

    .nav-link {
        @apply cursor-pointer rounded px-2 py-1 text-black hover:bg-blue-700 hover:text-white dark:text-white dark:hover:bg-gray-800 dark:hover:text-white;
    }
}
@layer components {
    .switch {
        @apply relative h-6 w-11 cursor-pointer rounded-full border-transparent bg-gray-600 p-px text-transparent transition-colors duration-150 ease-in-out before:mb-1.5 before:inline-block before:size-5 before:translate-x-0 before:rounded-full before:bg-gray-100 before:shadow before:transition checked:bg-none checked:text-blue-600 checked:before:translate-x-full focus:outline-0 focus:ring-0 focus:ring-offset-0;
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */