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

@layer base {
    html {
        font-family: "Isidora Sans", system-ui, sans-serif;
    }
}

@layer components {
    nav.pagy {
        @apply relative z-0 inline-flex rounded-md shadow-sm -space-x-px ml-2;
    }

    nav.pagy a:first-child {
        @apply relative inline-flex items-center px-2 py-2 rounded-l-md border border-stefi-gold bg-white text-sm font-medium text-stefi-gray hover:bg-gray-50;
        &:not([href]) {
            &:hover {
                @apply bg-white;
            }
        }
    }

    nav.pagy a:last-child {
        @apply relative inline-flex items-center px-2 py-2 rounded-r-md border border-stefi-gold bg-white text-sm font-medium text-stefi-gray hover:bg-gray-50;
        &:not([href]) {
            &:hover {
                @apply bg-white;
            }
        }
    }

    nav.pagy a {
        @apply relative inline-flex items-center px-4 py-2 bg-white border-stefi-gold text-stefi-gray hover:bg-gray-50 border text-sm font-medium;
        &[aria-current] {
            @apply z-10 bg-stefi-gold border-stefi-gold text-stefi-gray relative inline-flex items-center px-4 py-2 border text-sm font-medium;
        }
        &[role="separator"] {
            @apply relative inline-flex items-center px-4 py-2 border border-stefi-gold bg-white text-sm font-medium text-gray-700;
        }
    }

    @font-face {
        font-family: "Isidora Sans";
        src: url("/assets/IsidoraSans-Medium-d592f7db.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Isidora Sans";
        src: url("/assets/IsidoraSans-MediumItalic-8c5f6352.ttf") format("truetype");
        font-weight: normal;
        font-style: italic;
    }

    @font-face {
        font-family: "Isidora Sans";
        src: url("/assets/IsidoraSans-Bold-cd743f68.ttf") format("truetype");
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: "Isidora Sans";
        src: url("/assets/IsidoraSans-BoldItalic-9309b1bb.ttf") format("truetype");
        font-weight: bold;
        font-style: italic;
    }

    @font-face {
        font-family: "Barlow";
        src: url("/assets/Barlow-Medium-58f74d63.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Barlow";
        src: url("/assets/Barlow-MediumItalic-fb701b58.ttf") format("truetype");
        font-weight: normal;
        font-style: italic;
    }

    @font-face {
        font-family: "Barlow";
        src: url("/assets/Barlow-Bold-03dcd99f.ttf") format("truetype");
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: "Barlow";
        src: url("/assets/Barlow-BoldItalic-3a85f88d.ttf") format("truetype");
        font-weight: bold;
        font-style: italic;
    }

    details > summary {
        list-style: none;
    }

    ::-webkit-details-marker {
        display: none;
    }

    .tooltip {
        @apply relative
    }

    .tooltip::before {
        content: attr(data-tooltip);
        @apply absolute top-4 sm:left-2 right-0 text-xs pt-px px-1 hidden text-white bg-slate-800 rounded z-50 text-left
    }

    .tooltip:hover::before {
        @apply block w-max
    }

    .w-192 {
        width: 48rem;
    }

    .aspect-ratio--16x9 {
        padding-bottom: 56.25%
    }

    .centering-both {
        @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
    }

    .simple_form abbr[title="Povinná položka"] {
        text-decoration: none;
    }
}