@import "tailwindcss";

@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

@theme {
    --breakpoint-*: initial;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1440px;

    --font-sans:
        Outfit, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@utility container {
    margin-inline: auto;
    padding-inline: 1rem;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    @apply appearance-none;
}

.prose pre,
.prose code {
    color: #24292e !important;
    background-color: white !important;
}

.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-literal {
    color: #032f62;
}

.hl-number {
    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;
    margin-right: 1ch;
    user-select: none;
}

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

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