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

@layer utilities {
    .shadow-offset-none {
        --tw-shadow-offset-x: 0 !important;
        --tw-shadow-offset-y: 0 !important;
    }
}

@layer components {
    .image-aspect-ratio {
        aspect-ratio: 1;
    }
}

@layer base {
    body {
        font-weight: 200;
        background-color: theme("colors.white");
        background-image: url(/assets/background_texture_low_trans.png) repeat;
    }

    .font-serif {
        font-weight: 300;
    }

    .bg-blue,
    .bg-grey {
        color: theme("colors.white");
    }

    body,
    .bg-white {
        color: theme("colors.blue");
    }

    body,
    .bg-yellow {
        color: theme("colors.blue");
    }

    body,
    .bg-lighter {
        color: theme("colors.blue");
    }

    a {
        text-decoration: underline;
    }

    input {
        font-weight: 400;
    }

    input::placeholder {
        font-weight: 200;
        color: theme("colors.light");
        font-style: italic;
    }

    .text-shadow {
        text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    }

    .turbo-progress-bar {
        background: #f9c916 !important;
    }

    .animate-appear-then-fade {
        animation: appear-then-fade 4s both;
    }

    .animate-spin-and-stop {
        animation: spin 1s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite,
        pause 30s linear 1s infinite;
    }

    /* Custom styles for Swiper pagination bullets */
    :root {
        --swiper-pagination-color: theme("colors.light-yellow");
        --swiper-pagination-bullet-inactive-color: theme("colors.blue");
        --swiper-pagination-bullet-inactive-opacity: 1;
    }

    @keyframes appear-then-fade {
        0%,
        100% {
            opacity: 0;
        }
        5%,
        60% {
            opacity: 1;
        }
    }
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(360deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes pause {
        0% {
            transform: rotate(360deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}

@layer components {
    .pagy {
        @apply flex space-x-4 font-bold bg-blue;
    }

    .pagy a:not(.gap) {
        @apply block rounded-lg px-3 py-1 bg-lighter;
    }

    .pagy a:hover {
        @apply bg-light;
    }

    .pagy a:not([href]) {
        @apply bg-lighter cursor-default;
    }

    .pagy a.current {
        @apply text-white bg-blue;
    }

    .pagy label {
        @apply inline-block whitespace-nowrap bg-lighter rounded-lg px-3 py-0.5;

        input {
            @apply bg-lighter border-none rounded-md;
        }
    }
}
/*
 * 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.
 *


 */