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

:root {
    --foreground-rgb: 0, 0, 0;
    --background-rgb: 214, 219, 220;
}

body {
    color: rgb(var(--foreground-rgb));
    background: rgb(var(--background-rgb));
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}

/* HTML: <div class="loader"></div> */
.loader-cube {
    --s: 14px;

    --_d: calc(0.353 * var(--s));
    width: calc(var(--s) + var(--_d));
    aspect-ratio: 1;
    clip-path: polygon(
        var(--_d) 0,
        100% 0,
        100% calc(100% - var(--_d)),
        calc(100% - var(--_d)) 100%,
        0 100%,
        0 var(--_d)
    );
    background: conic-gradient(from -90deg at var(--s) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
    animation: l1 1s infinite cubic-bezier(0.5, 300, 0.5, -300);
}
@keyframes l1 {
    50%,
    100% {
        transform: translateY(0.05px);
    }
}

/* HTML: <div class="loader"></div> */
.loader-text {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 16px;
    clip-path: inset(0 3ch 0 0);
    animation: l4 1s steps(4) infinite;
}
.loader-text:before {
    content: "Loading...";
}
.loader-text.extrapolating:before {
    content: "Extrapolating ABI...";
}
@keyframes l4 {
    to {
        clip-path: inset(0 -1ch 0 0);
    }
}
