@import 'tailwindcss/base';
@import 'tailwindcss/components';

@import './vendor/filepond.css';
@import './vendor/codemirror.css';
@import './vendor/easy-mde-overrides.css';
@import './vendor/choices.css';
@import './vendor/filament.css';
@import './vendor/coloris.css';

@import './utilities/button.css';
@import './utilities/card.css';
@import './utilities/chart.css';
@import './utilities/dropdown.css';
@import './utilities/form.css';
@import './utilities/input.css';
@import './utilities/label.css';
@import './utilities/link.css';
@import './utilities/markup.css';
@import './utilities/tooltip.css';
@import './utilities/table.css';

@import 'tailwindcss/utilities';

@layer base {
    @font-face {
        font-family: 'Inter Fallback';
        size-adjust: 107%;
        ascent-override: 90%;
        src: local('Arial');
    }

    @font-face {
        font-family: 'Inter Tight Fallback';
        src: local(Arial);
        size-adjust: 101%;
        ascent-override: normal;
        descent-override: normal;
        line-gap-override: normal;
    }

    :root {
        --c-50: 239, 246, 255;
        --c-100: 219, 234, 254;
        --c-200: 191, 219, 254;
        --c-300: 147, 197, 253;
        --c-400: 96, 165, 250;
        --c-500: 59, 130, 246;
        --c-600: 37, 99, 235;
        --c-700: 29, 78, 216;
        --c-800: 30, 64, 175;
        --c-900: 30, 58, 138;
        --c-950: 23, 37, 84;
        --blue-50: 239, 246, 255;
        --blue-100: 219, 234, 254;
        --blue-200: 191, 219, 254;
        --blue-300: 147, 197, 253;
        --blue-400: 96, 165, 250;
        --blue-500: 59, 130, 246;
        --blue-600: 37, 99, 235;
        --blue-700: 29, 78, 216;
        --blue-800: 30, 64, 175;
        --blue-900: 30, 58, 138;
        --blue-950: 23, 37, 84;
        --success-400: 15, 186, 158;
        --success-500: 15, 186, 158;
    }

    *,
    *:after,
    *:before {
        position: relative;
    }

    *:focus {
        outline: none !important;
    }

    strong {
        @apply font-semibold;
    }

    @keyframes alert-countdown {
        0% {
            transform: scaleX(0);
        }
        100% {
            transform: scaleX(1);
        }
    }
}

@layer utilities {
    [x-cloak] {
        display: none !important;
    }

    .bg-pattern {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADoSURBVHgB7dyxEYJAEIbRhQrsQANnLMsa7AA7sAWrMjHQDqiAkzEyRuYY2Peii/gINv4jAAAAAAAAgG1qYqL383EeSrlF0/RttN3+eLpHRfrz9NuYaIjoxvvZRYnD90cq05+nP/kAopTdz7uP2vRn6f9xAM1lvL7X+OjHr1yjNv1l+wAAAAAAAAAAAAAAAADAIuwDJO/bB0jetw+QvG8fQB8AAAAAAAAAAAAAAAAAWBH7AMn79gGS9+0DJO/bB9AHAAAAAAAAAAAAAAAAAFbEPkDyvn2A5H37AMn79gH0AQAAAAAAgE36AG8Wn6ww5wczAAAAAElFTkSuQmCC');
        background-repeat: repeat;
    }
}

/**
 * Highlighting
 */
pre,
code {
    @apply text-navy;
    background-color: #fff;
}

.hl-keyword {
    color: #d73a49;
}

.hl-property {
    color: #34a853;
}

.hl-attribute {
    font-style: italic;
}

.hl-type {
    color: #ea4334;
}

.hl-generic {
    color: #9d3af6;
}

.hl-value {
    color: #032f62;
}

.hl-variable {
    color: #e36209;
}

.hl-comment {
    color: #6a737d;
}

.hl-blur {
    filter: blur(2px);
}

.hl-strong {
    font-weight: bold;
}

.hl-em {
    font-style: italic;
}

.hl-addition {
    display: inline-block;
    min-width: 100%;
    background-color: #00ff0022;
}

.hl-deletion {
    display: inline-block;
    min-width: 100%;
    background-color: #ff000011;
}

.hl-gutter {
    display: inline-block;
    font-size: 0.9em;
    color: #555;
    padding: 0 1ch;
}

.hl-gutter-addition {
    background-color: #34a853;
    color: #fff;
}

.hl-gutter-deletion {
    background-color: #ea4334;
    color: #fff;
}

max-w-\[14rem\],
\!max-w-\[14rem\] {
    max-width: 14rem;
}
