/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Practice component */
@layer components {
    .practice {
        /*min-height: 100svh;*/
        display: grid;
        place-items: start center;
        padding: var(--space-l) var(--space-s);
        background: var(--color-surface);
        color: var(--color-text);
        text-align: center;

        & [hidden] {
            display: none !important;
        }

        @media (min-width: 48rem) {
            padding: var(--space-xl) var(--space-m);
        }

        & .practice__activate {
            display: grid;
            gap: var(--space-m);
            justify-items: center;
            max-width: var(--max-content);
            padding-block: var(--space-2xl);
        }

        & .practice__start-overlay {
            display: grid;
            gap: var(--space-m);
            justify-items: center;
            max-width: var(--max-content);
            padding-block: var(--space-2xl);
            text-align: center;
        }

        & .practice__eyebrow {
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 500;
            font-size: var(--size-step-0);
            color: color-mix(in oklab, var(--color-text) 60%, transparent);
        }

        & .practice__title {
            font-family: var(--font-serif);
            font-size: var(--size-step-3);
            font-weight: 600;
            line-height: 1.1;
            margin: 0;
        }

        & .practice__subline {
            font-size: var(--size-step-1);
            color: color-mix(in oklab, var(--color-text) 80%, transparent);
            max-width: 45ch;
            margin-bottom: var(--space-l);
        }

        & .practice__setup {
            width: min(100%, 600px);
            padding-block: var(--space-xl);
        }

        & .practice__error {
            color: var(--color-error);
            font-weight: 500;
            margin-block: var(--space-m);
            padding: var(--space-s);
            border: 1px solid var(--color-error);
            border-radius: var(--radius-s);
        }

        & .practice__body {
            position: relative;
            width: min(100%, 1200px);
            display: grid;
            gap: var(--space-xl);
            text-align: center;

            &:fullscreen {
                width: 100vw !important;
                height: 100vh !important;
                max-width: none !important;
                background: var(--color-surface);
                padding: var(--space-xl);
                display: flex;
                flex-direction: column;
                gap: var(--space-m);

                & > .l-stack {
                    flex: 1;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                }

                & .scrolling-notes {
                    flex: 1;
                    min-height: 0;
                }

                & .practice__controls {
                    top: var(--space-m);
                    right: var(--space-m);
                }
            }
        }

        & .practice__controls {
            position: absolute;
            top: calc(var(--space-m) * -1);
            right: 0;
            display: flex;
            gap: var(--space-xs);
            z-index: 100;

            @media (min-width: 48rem) {
                top: 0;
            }
        }

        & .practice__control-btn {
            background: var(--color-surface-dim);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-m);
            padding: var(--space-xs);
            color: var(--color-text);
            cursor: pointer;
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.75rem;
            height: 2.75rem;
            opacity: 0.6;

            & svg {
                width: 1.25rem;
                height: 1.25rem;
            }

            &:hover {
                background: var(--color-surface-hover);
                opacity: 1;
            }

            &.is-active {
                background: var(--color-primary);
                color: var(--color-white);
                border-color: var(--color-primary);
                opacity: 1;
            }
        }

        & .practice__footer-actions {
            display: flex;
            justify-content: center;
            padding-block: var(--space-m);
            opacity: 0.5;
            transition: opacity var(--transition-base);

            &:hover {
                opacity: 1;
            }
        }

        & .practice__results-overlay {
            position: fixed;
            inset: 0;
            background: color-mix(in oklab, var(--color-surface) 90%, transparent);
            backdrop-filter: blur(8px);
            display: grid;
            place-items: center;
            z-index: 2000;
            padding: var(--space-m);
        }

        & .practice__results-card {
            background: var(--color-surface-dim);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-l);
            padding: var(--space-xl);
            max-width: 400px;
            width: 100%;
            box-shadow: var(--shadow-l);
            text-align: center;
        }

        & .practice__results-title {
            font-family: var(--font-serif);
            font-size: var(--size-step-2);
            margin: 0;
        }

        & .practice__results-stats {
            justify-content: center;
            --gap: var(--space-xl);
            margin-block: var(--space-l);
        }

        & .practice__results-stat {
            display: flex;
            flex-direction: column;
            gap: var(--space-3xs);
        }

        & .practice__results-label {
            font-size: var(--size-step--1);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            opacity: 0.7;
        }

        & .practice__results-value {
            font-size: var(--size-step-3);
            color: var(--color-primary);
        }
    }

    body.is-practice-active .practice__header {
        display: none;
    }
}