/* @import "@loadingio/transition.css"; */

/**
 * Shared styles between all components
 */
.hidden {
    display: none;
}

/* flex utilities */
.flex-x {
    display: flex;
    gap: var(--space-sm);
    flex-direction: row;
    align-items: center;
}

.flex-y {
    display: flex;
    gap: var(--space-sm);
    flex-direction: column;
}

.ai-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.ml-auto {
    margin-left: auto;
}

.full-w {
    width: 100%;
}

.font-display {
    font-family: var(--font-display);
    font-size-adjust: 0.52;
}

.gap-sm {
    gap: var(--space-sm);
}

.gap-md {
    gap: var(--space-md);
}

.text-center {
    text-align: center;
}

/** Component utilities */
.card {
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-sm);

    --bg-color: var(--color-bg-light);
    background-color: var(--bg-color);

    &[variant="primary"] {
        --bg-color: var(--color-primary);
    }

    &[border] {
        --color: oklch(from var(--bg-color) calc(l - 0.2) calc(c + 0.1) h);
        /* border: 1px solid color-mix(in oklch, var(--color-primary), black 20%); */
        border: 1px solid var(--color);
    }
}

.window {
    gap: 0.5em;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        padding: var(--space-sm);
        margin: 0;
    }

    pre,
    syntax-highlight {
        border: 1px solid var(--color-bg-dark);
        border-radius: var(--radius-sm);
        margin: 0;

        overflow: clip;
        overflow-clip-margin: 4em;

        box-shadow: var(--shadow-md);

    }
}


/* Shimmer/skeleton */
@keyframes shimmer {
    to {
        transform: translateX(100%);
    }
}

@keyframes line-shadow {
    0% {
        background-position: 0;
    }

    100% {
        background-position: 100% 100%;
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
    }

    70% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.95);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}