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

@font-face {
    font-family: "nexa";
    src: url("/assets/NexaBold-a8444174.otf");
}

@font-face {
    font-family: "nexa";
    font-weight: bold;
    src: url("/assets/NexaBlack-4d5b8752.otf");
}

@font-face {
    font-family: "tommy";
    src: url("/assets/TommySoftBlack-615bc0a5.otf");
}

/* Notification animations */
@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0.1;
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.95);
        transform: scale(1.08);
    }
}

.notification-blink {
    animation: blink 1.5s infinite;
}

.notification-pulse {
    animation: pulse-glow 2s infinite;
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #ef4444;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    animation: pulse-glow 2s infinite;
}

html {
    /* font-family: "nexa", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    scroll-behavior: smooth;
}

.text-nexa {
    font-family: "nexa", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

* {
    scroll-margin-top: 200px;
}


.inline-field {
    display: none;
}

.inline-edit .inline-field {
    display: initial;
}

trix-toolbar {
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    padding: 0.5rem;
    position: sticky;
    top: 40px;
    z-index: 30;
}


.overflow-y-auto::-webkit-scrollbar {
    width: 8px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
    margin: 10px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 10px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #909090;
}


@keyframes blink {
    50% {
        opacity: 0;
    }
}

.cursor {
    display: inline-block;
    width: 10px;
    height: 22px;
    margin-bottom: -4px;
    background-color: white;
    margin-left: 4px;
    animation: blink 0.8s infinite;
}

.text-inconsolata {
    font-family: "Inconsolata", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

.text-inconsolata-bold {
    font-family: "Inconsolata", serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: bold;
    font-variation-settings:
        "wdth" 100;
}