@layer reset, props, layout, components;

/* CSS reset based on https://www.joshwcomeau.com/css/custom-css-reset/ */
@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    body {
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        font-family: var(--font-serif);
        height: 100%;
    }

    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
    }

    input, button, textarea, select {
        font: inherit;
    }

    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }

    p {
        text-wrap: pretty;
    }

    h1, h2, h3, h4, h5, h6 {
        text-wrap: balance;
        font-family: var(--font-sans);
    }

}

@layer props {
    /*
     * CSS props based on MIT licensed https://open-props.style/ Copyright (c) 2021 Adam Argyle
     */
    :where(html) {
        /* spacing */
        --size-1: .25rem;
        --size-2: .5rem;
        --size-3: 1rem;
        --size-4: 1.25rem;
        --size-5: 1.5rem;
        --size-6: 1.75rem;
        --size-7: 2rem;
        --size-8: 3rem;
        --size-9: 4rem;
        --size-10: 5rem;
        --size-11: 7.5rem;
        --size-12: 10rem;
        --size-13: 15rem;
        --size-14: 20rem;
        --size-15: 30rem;

        /* Borders */
        --border-size-1: 1px;
        --border-size-2: 2px;
        --border-size-3: 5px;
        --border-size-4: 10px;
        --border-size-5: 25px;
        --radius-1: 2px;
        --radius-2: 5px;
        --radius-3: 1rem;
        --radius-4: 2rem;
        --radius-5: 4rem;
        --radius-6: 8rem;
        --radius-round: 9999px;

        /* Fonts */
        --font-system-ui: system-ui, sans-serif;
        --font-monospace-code: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
        --font-sans: var(--font-system-ui);
        --font-serif: ui-serif, serif;
        --font-mono: var(--font-monospace-code);
        --font-weight-1: 100;
        --font-weight-2: 200;
        --font-weight-3: 300;
        --font-weight-4: 400;
        --font-weight-5: 500;
        --font-weight-6: 600;
        --font-weight-7: 700;
        --font-weight-8: 800;
        --font-weight-9: 900;
        --font-lineheight-00: .95;
        --font-lineheight-0: 1.1;
        --font-lineheight-1: 1.25;
        --font-lineheight-2: 1.375;
        --font-lineheight-3: 1.5;
        --font-lineheight-4: 1.75;
        --font-lineheight-5: 2;
        --font-letterspacing-0: -.05em;
        --font-letterspacing-1: .025em;
        --font-letterspacing-2: .050em;
        --font-letterspacing-3: .075em;
        --font-letterspacing-4: .150em;
        --font-letterspacing-5: .500em;
        --font-letterspacing-6: .750em;
        --font-letterspacing-7: 1em;
        --font-size-00: .5rem;
        --font-size-0: .75rem;
        --font-size-1: 1rem;
        --font-size-2: 1.1rem;
        --font-size-3: 1.25rem;
        --font-size-4: 1.5rem;
        --font-size-5: 2rem;
        --font-size-6: 2.5rem;
        --font-size-7: 3rem;
        --font-size-8: 3.5rem;
        --font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
        --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
        --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
        --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);

        /* Colors */
        --white: #fff;
        --black: #000;
        --gray-0: #f9fafb;
        --gray-1: #f3f4f6;
        --gray-2: #e5e7eb;
        --gray-3: #d1d5db;
        --gray-4: #9ca3af;
        --gray-5: #6b7280;
        --gray-6: #4b5563;
        --gray-7: #374151;
        --gray-8: #1f2937;
        --gray-9: #111827;
        --gray-10: #030712;
        --sky-0: #f0f9ff;
        --sky-1: #e0f2fe;
        --sky-2: #bae6fd;
        --sky-3: #7dd3fc;
        --sky-4: #38bdf8;
        --sky-5: #0ea5e9;
        --sky-6: #0284c7;
        --sky-7: #0369a1;
        --sky-8: #075985;
        --sky-9: #0c4a6e;
        --sky-10: #082f49;
        --lime-0: #f7fee7;
        --lime-1: #ecfccb;
        --lime-2: #d9f99d;
        --lime-3: #bef264;
        --lime-4: #a3e635;
        --lime-5: #84cc16;
        --lime-6: #65a30d;
        --lime-7: #4d7c0f;
        --lime-8: #3f6212;
        --lime-9: #365314;
        --lime-10: #1a2e05;
        --red-0: #fff5f5;
        --red-1: #ffe3e3;
        --red-2: #ffc9c9;
        --red-3: #ffa8a8;
        --red-4: #ff8787;
        --red-5: #ff6b6b;
        --red-6: #fa5252;
        --red-7: #f03e3e;
        --red-8: #e03131;
        --red-9: #c92a2a;
        --red-10: #b02525;
        --red-11: #962020;
        --red-12: #7d1a1a;
        --yellow-0: #fff9db;
        --yellow-1: #fff3bf;
        --yellow-2: #ffec99;
        --yellow-3: #ffe066;
        --yellow-4: #ffd43b;
        --yellow-5: #fcc419;
        --yellow-6: #fab005;
        --yellow-7: #f59f00;
        --yellow-8: #f08c00;
        --yellow-9: #e67700;
        --yellow-10: #b35c00;
        --yellow-11: #804200;
        --yellow-12: #663500;

        /* Semantic colors for exercise sets */
        --color-surface: var(--gray-0);
        --color-surface-elevated: var(--white);
        --color-surface-active: var(--sky-0);
        --color-surface-completed: var(--lime-0);
        --color-border: var(--gray-3);
        --color-border-focus: var(--sky-4);
        --color-text-primary: var(--gray-9);
        --color-text-secondary: var(--gray-6);
        --color-text-muted: var(--gray-5);
        --color-success: var(--lime-7);
        --color-success-bg: var(--lime-0);
        --color-info: var(--sky-7);
        --color-info-bg: var(--sky-0);
    }
}

@layer layout {
    html {
        height: 100%;
        color: var(--gray-9);
    }
}

@layer components {
    button, .btn {
        position: relative;
        display: inline-flex;
        border-radius: var(--radius-2);
        background-color: var(--sky-10);
        color: var(--white);
        font-family: var(--font-sans);
        font-size: var(--font-size-1);
        font-weight: var(--font-weight-7);
        letter-spacing: var(--font-letterspacing-3);
        --vertical-padding: 2.5em;
        padding: var(--size-2) var(--vertical-padding);
        border: none;
        white-space: nowrap;
        text-decoration: none;

        &:hover {
            cursor: pointer;
            background-color: var(--sky-7);
        }

        &:focus-visible {
            outline: var(--sky-4) solid 2px;
        }

        /* Add a spinner to a button when submitting */

        form.submitting &[type=submit] {
            cursor: wait;

            &::before {
                content: "";
                position: absolute;
                left: 0.8em;
                top: 50%;
                transform: translateY(-50%);
                --spinner-size: calc(var(--vertical-padding) / 2);
                width: var(--spinner-size);
                height: var(--spinner-size);
                border-radius: 50%;
                border: 3px solid transparent;
                border-top-color: var(--sky-5);
                border-right-color: var(--sky-5);
                animation: button-spinner 0.8s linear infinite;
            }
        }
    }


    /* Screen reader only content */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/*noinspection CssInvalidAtRule*/
@view-transition {
    navigation: auto;
}

/*noinspection CssInvalidPseudoSelector*/
[data-direction="forward"]::view-transition-old(root) {
    animation: slide-out-left .3s ease-in-out;
}

/*noinspection CssInvalidPseudoSelector*/
[data-direction="forward"]::view-transition-new(root) {
    animation: slide-in-right .3s ease-in-out;
}

/*noinspection CssInvalidPseudoSelector*/
[data-direction="backward"]::view-transition-old(root) {
    animation: slide-out-right .3s ease-in-out;
}

/*noinspection CssInvalidPseudoSelector*/
[data-direction="backward"]::view-transition-new(root) {
    animation: slide-in-left .3s ease-in-out;
}

@keyframes scale-in {
    from {
        transform: scale(0);
    }
}

@keyframes scale-out {
    to {
        transform: scale(0);
    }
}

@keyframes slide-out-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes slide-in-right {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slide-out-right {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes button-spinner {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}