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

::selection {
    background-color: #47a3f3;
    color: #fefefe;
}

html {
    min-width: 360px;
    scroll-behavior: smooth;
}

#__next {
    @apply bg-gray-50 dark:bg-gray-900;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* https://seek-oss.github.io/capsize/ */
.capsize::before {
    content: '';
    margin-bottom: -0.098em;
    display: table;
}

.capsize::after {
    content: '';
    margin-top: -0.219em;
    display: table;
}

.skip-nav {
    @apply absolute px-4 py-3 transition-transform duration-200 transform -translate-y-12 -left-1/4 focus:top-4 focus:translate-y-3 -top-8;
}

#skip {
    scroll-margin-top: 1.125rem;
}

@supports not (backdrop-filter: none) {
    .sticky-nav {
        backdrop-filter: none;
        @apply bg-opacity-100;
    }
}

.prose .anchor {
    @apply absolute invisible no-underline;

    margin-left: -1em;
    padding-right: 0.5em;
    width: 80%;
    max-width: 700px;
    cursor: pointer;
}

.anchor:hover {
    @apply visible;
}

.prose a {
    @apply transition-all;
}

.prose .anchor:after {
    @apply text-gray-300 dark:text-gray-700;
    content: '#';
}

.prose *:hover > .anchor {
    @apply visible;
}

.prose img {
    /* Don't apply styles to next/image */
    @apply m-0;
}

.prose > :first-child {
    /* Override removing top margin, causing layout shift */
    margin-top: 1.25em !important;
    margin-bottom: 1.25em !important;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    @apply text-gray-700 dark:text-gray-300;
}

.token.punctuation {
    @apply text-gray-700 dark:text-gray-300;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    @apply text-green-500;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    @apply text-purple-500;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    @apply text-yellow-500;
}

.token.atrule,
.token.attr-value,
.token.keyword {
    @apply text-blue-500;
}

.token.function,
.token.class-name {
    @apply text-pink-500;
}

.token.regex,
.token.important,
.token.variable {
    @apply text-yellow-500;
}

span[data-highlighted-line] {
    @apply block px-4 -mx-4 bg-gray-600 border-l-4 border-blue-500 dark:bg-gray-800;
}

/* Remove Safari input shadow on mobile */
input[type='text'],
input[type='email'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.metric-card > a {
    @apply no-underline;
}

.metric-card > p {
    @apply my-2;
}

.step > h3 {
    @apply my-0;
}

.prose .tweet a {
    text-decoration: inherit;
    font-weight: inherit;
}

table {
    display: block;
    max-width: fit-content;
    overflow-x: auto;
    white-space: nowrap;
}

.prose .callout > p {
    margin: 0 !important;
}

giscus-widget {
    margin-top: 40px;
}

.prose pre {
    @apply border border-[#4a4a4a];
}

code {
    counter-reset: line;
}

code > [data-line]::before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    width: 1rem;
    margin-right: 2rem;
    text-align: right;
    color: gray;
}

code[data-line-numbers-max-digits='2'] > [data-line]::before {
    width: 2rem;
}

code[data-line-numbers-max-digits='3'] > [data-line]::before {
    width: 3rem;
}
