@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import "https://www.nerdfonts.com/assets/css/webfont.css";

:root {
    --bg: light-dark(#ffffff, #121212);
    --code: light-dark(#f5f5f5, #1e1e1e);
    --fg: light-dark(#1e1e1e, #f5f5f5);
    --link: light-dark(#6200ee, #bb86fc);
    --link-hover: light-dark(#3700b3, #3700b3);
    --link-active: light-dark(#bb86fc, #6200ee);

    --warning: light-dark(#ff9800, #ffac30);
    --error: light-dark(#f44336, #f44336);
    --info: light-dark(#2196f3, #2196f3);
    --required: light-dark(#ff5722, #ff5722);
    --success: light-dark(#4caf50, #4caf50);

    --border-radius: 8px;
    --border-radius-secondary: 4px;

    --overshoot: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    color-scheme: light dark;

    :focus-visible {
        outline: 2px solid var(--link);
        outline-offset: 2px;
    }
}

body {
    font-family: "Montserrat", sans-serif;
    background-color: var(--bg);
    color: var(--fg);
    transition:
        background-color 0.3s ease-in-out,
        color 0.3s ease-in-out;

    margin: 0;
    padding: 0;
    line-height: 1.5;
}

code {
    font-family: "Fira Code", monospace;
    font-size: 0.9em;
    background-color: var(--code);
    padding: 2px 4px;
    border-radius: var(--border-radius-secondary);

    transition:
        background-color 0.3s ease-in-out,
        color 0.3s ease-in-out;

    a {
        color: var(--fg);
        text-decoration: none;

        &:hover {
            text-decoration: underline;
            transform: none;
        }

        &:after {
            content: none;
        }
    }
}

pre {
    margin: 0 1em 2em 1em;
    padding: 1em !important;

    position: relative;
    font-family: "Fira Code", monospace;
    font-size: 0.9em;
    background-color: var(--code);

    border-radius: var(--border-radius);
    overflow-x: auto;
    white-space: pre-line;
    transition:
        background-color 0.3s ease-in-out,
        color 0.3s ease-in-out;

    .copy-button {
        position: absolute;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        top: 10px;
        right: 10px;
        background-color: transparent;
        color: var(--fg);
        border: none;
        border-radius: var(--border-radius);
        cursor: pointer;
        transition:
            background-color 0.3s ease-in-out,
            opacity 0.15s ease-in-out,
            color 0.5s 2s ease-out;

        &:hover {
            background-color: var(--bg);
        }

        &:active,
        &.active {
            transition: none;
            color: var(--success);
        }

        &:focus-visible {
            opacity: 1;
        }
    }

    &:hover .copy-button {
        opacity: 1;
    }
}

a {
    text-indent: 0;
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--link);
    transition:
        transform 0.15s var(--overshoot),
        color 0.3s ease-out;

    &:after {
        opacity: 0;
        content: "";
        position: absolute;
        bottom: 2px;
        right: 50%;
        left: 50%;
        height: 2px;
        background-color: var(--link);

        transition:
            opacity 0.15s ease-out,
            left 0.15s var(--overshoot),
            right 0.15s var(--overshoot),
            bottom 0.15s var(--overshoot);
    }
}

a:hover {
    transform: translateY(-2px);
    &:after {
        opacity: 1;
        left: 0;
        right: 0;
        bottom: 0;
    }
}