@layer theme, base, components, animations, utilities;

@layer base {

    *,
    *:before,
    *:after {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent
    }

    * {
        margin: 0
    }

    html {
        tab-size: 4
    }

    body,
    dialog,
    [popover] {
        font-family: var(--font-sans);
        font-size: var(--text-regular);
        line-height: var(--leading-normal);
        color: var(--foreground)
    }

    body {
        background-color: var(--background);
        color: var(--foreground);
        -webkit-font-smoothing: antialiased
    }

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

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

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: var(--font-semibold);
        line-height: 1.25;

        &:first-child {
            margin-block-start: 0
        }
    }

    h1 {
        font-size: var(--text-1);
        margin: var(--space-10) 0 var(--space-6)
    }

    h2 {
        font-size: var(--text-2);
        margin: var(--space-8) 0 var(--space-5)
    }

    h3 {
        font-size: var(--text-3);
        margin: var(--space-6) 0 var(--space-4)
    }

    h4 {
        font-size: var(--text-4);
        margin: var(--space-5) 0 var(--space-3)
    }

    h5 {
        font-size: var(--text-5);
        margin: var(--space-4) 0 var(--space-2)
    }

    h6 {
        font-size: var(--text-regular);
        margin: var(--space-4) 0 var(--space-2)
    }

    p {
        margin-block-end: var(--space-4);

        &:last-child {
            margin-block-end: 0
        }
    }

    a {
        color: var(--primary);
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color var(--transition-fast);

        &:hover {
            color: rgb(from var(--primary) r g b / .8)
        }
    }

    strong,
    b {
        font-weight: var(--font-semibold)
    }

    em,
    i {
        font-style: italic
    }

    small {
        font-size: var(--text-7)
    }

    code {
        font-family: var(--font-mono);
        font-size: .875em;
        padding: .125rem .25rem;
        background-color: var(--faint);
        border-radius: var(--radius-small)
    }

    pre {
        font-family: var(--font-mono);
        padding: var(--space-4);
        background-color: var(--faint);
        border-radius: var(--radius-medium);
        overflow-x: auto;
        margin-block-end: var(--space-4);

        code {
            padding: 0;
            background: none;
            border-radius: 0
        }
    }

    blockquote {
        border-inline-start: 4px solid var(--border);
        padding-inline-start: var(--space-4);
        margin: var(--space-4) 0;
        color: var(--muted-foreground);
        font-style: italic
    }

    hr {
        border: none;
        border-top: 1px solid var(--border);
        margin: var(--space-8) 0
    }

    ul,
    ol {
        padding-inline-start: var(--space-6);
        margin-block-end: var(--space-4)
    }

    ul {
        list-style-type: disc
    }

    ol {
        list-style-type: decimal
    }

    li {
        margin-block-end: var(--space-1)
    }

    mark {
        background-color: rgb(from var(--warning) r g b / .3);
        padding: .125rem .25rem;
        border-radius: var(--radius-small)
    }

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

    :disabled {
        opacity: .5;
        cursor: not-allowed
    }
}

@layer theme {
    :root {
        --background: #fff;
        --foreground: #09090b;
        --card: #fff;
        --card-foreground: #09090b;
        --primary: #574747;
        --primary-foreground: #fafafa;
        --secondary: #f4f4f5;
        --secondary-foreground: #574747;
        --muted: #f4f4f5;
        --muted-foreground: #71717a;
        --faint: #fafafa;
        --accent: #f4f4f5;
        --danger: #d32f2f;
        --danger-foreground: #fafafa;
        --success: #008032;
        --success-foreground: #fafafa;
        --warning: #a65b00;
        --warning-foreground: #09090b;
        --border: #d4d4d8;
        --input: #d4d4d8;
        --ring: #574747;
        --space-1: .25rem;
        --space-2: .5rem;
        --space-3: .75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-14: 3.5rem;
        --space-16: 4rem;
        --space-18: 4.5rem;
        --radius-small: .125rem;
        --radius-medium: .375rem;
        --radius-large: .75rem;
        --radius-full: 9999px;
        --bar-height: .5rem;
        --font-sans: system-ui, sans-serif;
        --font-mono: ui-monospace, Consolas, monospace;
        --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
        --text-2: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
        --text-3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
        --text-4: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
        --text-5: 1.125rem;
        --text-6: 1rem;
        --text-7: .875rem;
        --text-8: .75rem;
        --text-regular: var(--text-6);
        --leading-normal: 1.5;
        --font-normal: 400;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 600;
        --shadow-small: 0 1px 2px 0 rgb(0 0 0 / .05);
        --shadow-medium: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        --shadow-large: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --transition-fast: .12s cubic-bezier(.4, 0, .2, 1);
        --transition: .2s cubic-bezier(.4, 0, .2, 1);
        --z-dropdown: 50;
        --z-modal: 200
    }

    [data-theme=dark] {
        color-scheme: dark;
        --background: #09090b;
        --foreground: #fafafa;
        --card: #18181b;
        --card-foreground: #fafafa;
        --primary: #fafafa;
        --primary-foreground: #18181b;
        --secondary: #27272a;
        --secondary-foreground: #fafafa;
        --muted: #27272a;
        --muted-foreground: #a1a1aa;
        --faint: #1e1e21;
        --accent: #27272a;
        --danger: #f4807b;
        --danger-foreground: #18181b;
        --success: #6cc070;
        --success-foreground: #18181b;
        --warning: #f0a030;
        --warning-foreground: #09090b;
        --border: #52525b;
        --input: #52525b;
        --ring: #d4d4d8
    }
}

@layer animations {
    .animate-pop-in {
        opacity: 1;
        transform: perspective(1000px) rotateX(0) translateZ(0);
        transition: opacity .15s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1), overlay .15s cubic-bezier(.4, 0, .2, 1) allow-discrete, display .15s cubic-bezier(.4, 0, .2, 1) allow-discrete;

        @starting-style {
            opacity: 0;
            transform: perspective(1000px) rotateX(-15deg) translateZ(-80px)
        }

        &[data-state=closing] {
            opacity: 0;
            transform: perspective(1000px) rotateX(-15deg) translateZ(-80px)
        }

        &[data-state=closing]::backdrop {
            opacity: 0
        }
    }

    dialog::backdrop {
        opacity: 1;
        transition: opacity .15s cubic-bezier(.4, 0, .2, 1);

        @starting-style {
            opacity: 0
        }
    }

    .animate-slide-in {
        opacity: 1;
        transform: translate(0);
        transition: opacity .15s cubic-bezier(.16, 1, .3, 1), transform .15s cubic-bezier(.16, 1, .3, 1);

        @starting-style {
            opacity: 0;
            transform: translate(100%)
        }

        &[data-state=closing] {
            opacity: 0;
            transform: translate(100%)
        }
    }
}

@layer base {

    :is(button, [type=submit], [type=reset], [type=button], a.button),
    ::file-selector-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-7);
        font-weight: var(--font-medium);
        line-height: var(--leading-normal);
        white-space: nowrap;
        text-decoration: none;
        background-color: var(--primary);
        color: var(--primary-foreground);
        border-radius: var(--radius-medium);
        border: 1px solid;
        border-color: rgb(from #fff r g b / .15) rgb(from #000 r g b / .2) rgb(from #000 r g b / .2) rgb(from #fff r g b / .15);
        transition: background-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
        cursor: pointer;

        &:hover:not(:disabled) {
            background-color: color-mix(in srgb, var(--primary), white 25%)
        }

        &:active:not(:disabled) {
            transform: translate(1px, 1px)
        }

        &[data-variant=secondary] {
            background-color: var(--secondary);
            color: var(--secondary-foreground);
            border-color: rgb(from #fff r g b / .5) rgb(from #000 r g b / .1) rgb(from #000 r g b / .1) rgb(from #fff r g b / .5);

            &:hover:not(:disabled) {
                background-color: color-mix(in srgb, var(--secondary), black 10%)
            }
        }

        &[data-variant=danger] {
            background-color: var(--danger);
            color: var(--danger-foreground);

            &:hover:not(:disabled) {
                background-color: color-mix(in srgb, var(--danger), black 15%)
            }
        }

        &.outline {
            background-color: transparent;
            border-color: var(--border);

            &:not([data-variant]) {
                color: var(--foreground)
            }

            &[data-variant=danger] {
                color: var(--danger);
                border-color: var(--danger);

                &:hover:not(:disabled) {
                    background-color: color-mix(in srgb, var(--danger), transparent 90%)
                }
            }

            &[data-variant=secondary] {
                color: var(--secondary-foreground);
                border-color: var(--secondary);

                &:hover:not(:disabled) {
                    background-color: color-mix(in srgb, var(--secondary), transparent 80%)
                }
            }

            &:hover:not(:disabled):not([data-variant]) {
                background-color: var(--accent)
            }
        }

        &.ghost {
            background-color: transparent;
            border-color: transparent;

            &:not([data-variant]) {
                color: var(--foreground)
            }

            &[data-variant=danger] {
                color: var(--danger);

                &:hover:not(:disabled) {
                    background-color: color-mix(in srgb, var(--danger), transparent 90%)
                }
            }

            &[data-variant=secondary] {
                color: var(--secondary-foreground);

                &:hover:not(:disabled) {
                    background-color: color-mix(in srgb, var(--secondary), transparent 80%)
                }
            }

            &:hover:not(:disabled):not([data-variant]) {
                background-color: var(--accent)
            }
        }

        &.small {
            padding: var(--space-1) var(--space-3);
            font-size: var(--text-8)
        }

        &.large {
            height: 3rem;
            padding: 0 var(--space-6);
            font-size: var(--text-regular)
        }

        &.icon {
            width: 2.5rem;
            padding: 0;

            &.small {
                width: 2rem
            }

            &.large {
                width: 3rem
            }
        }
    }

    ::file-selector-button {
        background-color: transparent;
        color: var(--foreground);
        border: 1px solid var(--border)
    }

    ::file-selector-button:hover {
        background-color: var(--accent)
    }
}

@layer components {
    menu.buttons {
        padding-inline-start: 0;
        display: inline-flex;

        >:is(button, [type=button], [type=submit], [type=reset], a.button) {
            border-radius: 0;

            &:first-child {
                border-start-start-radius: var(--radius-medium);
                border-end-start-radius: var(--radius-medium)
            }

            &:last-child {
                border-start-end-radius: var(--radius-medium);
                border-end-end-radius: var(--radius-medium)
            }

            &:not(:last-child) {
                border-inline-end: 1px solid rgb(from var(--primary-foreground) r g b / .2)
            }
        }
    }
}

@layer base {
    label {
        display: block;
        font-size: var(--text-7);
        font-weight: var(--font-medium);

        &:has(input:where([type=checkbox], [type=radio])) {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            font-weight: var(--font-normal)
        }
    }

    :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), textarea, select) {
        width: 100%;
        margin-block-start: var(--space-1);
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-7);
        line-height: var(--leading-normal);
        background-color: var(--background);
        color: var(--foreground);
        border: 1px solid var(--input);
        border-radius: var(--radius-medium);
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

        &::placeholder {
            color: var(--muted-foreground)
        }

        &:focus {
            outline: none;
            border-color: var(--ring);
            box-shadow: 0 0 0 2px rgb(from var(--ring) r g b / .2)
        }

        &:disabled {
            background-color: var(--muted)
        }

        &:is([aria-invalid=true], :user-invalid) {
            border-color: var(--danger);

            &:focus {
                box-shadow: 0 0 0 2px rgb(from var(--danger) r g b / .2)
            }
        }
    }

    textarea {
        height: auto;
        min-height: 5rem;
        padding: var(--space-3);
        resize: vertical
    }

    select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-2) center;
        padding-inline-end: var(--space-6)
    }

    input:where([type=checkbox], [type=radio]) {
        appearance: none;
        width: 1rem;
        height: 1rem;
        margin: 0;
        background-color: var(--background);
        border: 1px solid var(--input);
        transition: background-color var(--transition-fast), border-color var(--transition-fast);

        &:checked {
            background-color: var(--primary);
            border-color: var(--primary)
        }
    }

    input[type=checkbox] {
        border-radius: var(--radius-small);
        position: relative;

        &:checked:after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: var(--primary-foreground);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
            mask-size: 90%;
            mask-position: center;
            mask-repeat: no-repeat
        }

        &[role=switch] {
            --switch-height: calc(var(--bar-height) * 3);
            --switch-inset: 2px;
            --switch-thumb: calc(var(--switch-height) - var(--switch-inset) * 3);
            width: calc(var(--switch-height) * 2);
            height: var(--switch-height);
            border-radius: var(--radius-full);
            background-color: var(--input);
            position: relative;

            &:before {
                content: "";
                position: absolute;
                top: 50%;
                left: var(--switch-inset);
                transform: translateY(-50%);
                width: var(--switch-thumb);
                height: var(--switch-thumb);
                background-color: var(--background);
                border-radius: var(--radius-full);
                transition: transform var(--transition);
                box-shadow: var(--shadow-small)
            }

            &:checked {
                background-color: var(--primary);

                &:after {
                    content: none
                }

                &:before {
                    transform: translateY(-50%) translate(var(--switch-height))
                }
            }
        }
    }

    input[type=radio] {
        border-radius: var(--radius-full);
        position: relative;

        &:checked:after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: var(--primary-foreground);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");
            mask-size: 100%;
            mask-position: center;
            mask-repeat: no-repeat
        }
    }

    :where(input:where([type=checkbox], [type=radio], [type=range]), select):not(:disabled),
    label:has(input:where([type=checkbox], [type=radio]):not(:disabled)) {
        cursor: pointer
    }

    input[type=range] {
        width: 100%;
        height: var(--bar-height);
        appearance: none;
        background: var(--muted);
        border-radius: var(--radius-full);

        &::-webkit-slider-thumb {
            appearance: none;
            width: 1.25rem;
            height: 1.25rem;
            background: var(--primary);
            border-radius: var(--radius-full);
            transition: transform var(--transition-fast);

            &:hover {
                transform: scale(1.1)
            }
        }

        &::-moz-range-thumb {
            width: 1.25rem;
            height: 1.25rem;
            background: var(--primary);
            border: none;
            border-radius: var(--radius-full)
        }
    }

    fieldset {
        border: 1px solid var(--border);
        border-radius: var(--radius-medium);
        padding: var(--space-4);
        margin-block-end: var(--space-4)
    }

    legend {
        font-size: var(--text-7);
        font-weight: var(--font-medium);
        padding: 0 var(--space-2)
    }
}

@layer components {
    fieldset.group {
        display: flex;
        align-items: stretch;
        border: none;
        padding: 0;
        margin: 0;

        >:is(input, textarea, select) {
            flex: 1;
            margin-block-start: 0;
            border-inline-end: 0
        }

        >:is(input, textarea, select, button) {
            border-radius: 0;

            &:first-child {
                border-radius: var(--radius-medium) 0 0 var(--radius-medium)
            }

            &:last-child {
                border-radius: 0 var(--radius-medium) var(--radius-medium) 0
            }
        }

        >legend {
            float: inline-start;
            display: inline-flex;
            align-items: center;
            padding: 0 var(--space-3);
            line-height: var(--leading-normal);
            font-weight: var(--font-normal);
            color: var(--muted-foreground);
            background-color: var(--muted);
            border: 1px solid var(--input);
            border-inline-end: none;
            border-radius: var(--radius-medium) 0 0 var(--radius-medium)
        }
    }

    [data-field] {
        margin-block-end: var(--space-4);

        [data-hint],
        .error {
            font-size: var(--text-8);
            font-weight: var(--font-normal);
            color: var(--muted-foreground);
            margin-block-start: var(--space-1)
        }

        .error {
            display: none
        }

        &[data-field=error] .error {
            display: block;
            color: var(--danger)
        }
    }
}

@layer base {
    table {
        border-collapse: collapse;
        table-layout: fixed;
        width: 100%;
        font-size: var(--text-7)
    }

    thead {
        border-bottom: 1px solid var(--border)
    }

    th,
    td {
        overflow-wrap: break-word
    }

    th {
        padding: var(--space-3) var(--space-2);
        text-align: start;
        font-weight: var(--font-medium);
        color: var(--muted-foreground)
    }

    td {
        padding: var(--space-3) var(--space-2)
    }

    tbody tr {
        border-bottom: 1px solid var(--border);
        transition: background-color var(--transition-fast);

        &:last-child {
            border-bottom: none
        }

        &:hover {
            background-color: rgb(from var(--muted) r g b / .5)
        }
    }
}

@layer base {
    progress {
        appearance: none;
        width: 100%;
        height: var(--bar-height);
        border: none;
        border-radius: var(--radius-full);
        overflow: hidden;
        background-color: var(--muted);

        &::-webkit-progress-bar {
            background-color: var(--muted);
            border-radius: var(--radius-full)
        }

        &::-webkit-progress-value {
            background-color: var(--primary);
            border-radius: var(--radius-full);
            transition: width var(--transition)
        }

        &::-moz-progress-bar {
            background-color: var(--primary);
            border-radius: var(--radius-full)
        }
    }

    meter {
        appearance: none;
        width: 100%;
        height: var(--bar-height);
        border: none;
        border-radius: var(--radius-full);
        overflow: hidden;
        background: var(--muted);

        &::-webkit-meter-bar {
            background: var(--muted);
            border: none;
            border-radius: var(--radius-full);
            height: var(--bar-height)
        }

        &::-webkit-meter-optimum-value,
        &::-webkit-meter-suboptimum-value,
        &::-webkit-meter-even-less-good-value {
            border-radius: var(--radius-full)
        }

        &::-webkit-meter-optimum-value {
            background: var(--success)
        }

        &::-webkit-meter-suboptimum-value {
            background: var(--warning)
        }

        &::-webkit-meter-even-less-good-value {
            background: var(--danger)
        }

        &::-moz-meter-bar {
            background: var(--success);
            border-radius: var(--radius-full)
        }

        &:-moz-meter-sub-optimum::-moz-meter-bar {
            background: var(--warning)
        }

        &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
            background: var(--danger)
        }
    }
}

@layer components {
    .spinner {
        width: 1.5rem;
        height: 1.5rem;
        border: 2px solid var(--muted);
        border-top-color: var(--primary);
        border-radius: var(--radius-full);
        animation: spin 1s linear infinite;

        &.small {
            width: 1rem;
            height: 1rem
        }

        &.large {
            width: 2rem;
            height: 2rem;
            border-width: 3px
        }
    }

    @keyframes spin {
        to {
            transform: rotate(360deg)
        }
    }
}

@layer components {
    :root {
        --grid-cols: 12;
        --grid-gap: 1.5rem;
        --container-max: 1280px;
        --container-pad: 1rem
    }

    .container {
        width: 100%;
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--container-pad)
    }

    .row {
        display: grid;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
        gap: var(--grid-gap);
        width: 100%
    }

    .col,
    [class*=col-] {
        grid-column-end: span var(--span, var(--grid-cols))
    }

    .col-1 {
        --span: 1
    }

    .col-2 {
        --span: 2
    }

    .col-3 {
        --span: 3
    }

    .col-4 {
        --span: 4
    }

    .col-5 {
        --span: 5
    }

    .col-6 {
        --span: 6
    }

    .col-7 {
        --span: 7
    }

    .col-8 {
        --span: 8
    }

    .col-9 {
        --span: 9
    }

    .col-10 {
        --span: 10
    }

    .col-11 {
        --span: 11
    }

    .col-12 {
        --span: 12
    }

    .offset-1 {
        grid-column-start: 2
    }

    .offset-2 {
        grid-column-start: 3
    }

    .offset-3 {
        grid-column-start: 4
    }

    .offset-4 {
        grid-column-start: 5
    }

    .offset-5 {
        grid-column-start: 6
    }

    .offset-6 {
        grid-column-start: 7
    }

    .col-end {
        grid-column-start: span var(--span, 1);
        grid-column-end: -1
    }

    @media(max-width:768px) {
        .row {
            --grid-cols: 4;
            --grid-gap: 1rem
        }

        .col,
        [class*=col-] {
            --span: 4
        }

        [class*=offset-] {
            grid-column-start: auto
        }
    }
}

@layer components {
    .card {
        background-color: var(--card);
        color: var(--card-foreground);
        border: 1px solid var(--border);
        border-radius: var(--radius-medium);
        box-shadow: var(--shadow-small);
        padding: var(--space-6);
        overflow: hidden
    }
}

@layer components {
    [role=alert] {
        --bg-amount: 8%;
        position: relative;
        display: flex;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-6);
        background-color: var(--background);
        border: 1px solid var(--border);
        border-radius: var(--radius-medium);
        font-size: var(--text-7);

        [data-theme=dark] & {
            --bg-amount: 20%
        }

        &[data-variant] {
            border: none
        }

        &[data-variant=error],
        &[data-variant=danger] {
            color: var(--danger);
            background-color: color-mix(in srgb, var(--danger) var(--bg-amount), transparent);

            & a {
                color: var(--danger)
            }
        }

        &[data-variant=success] {
            color: var(--success);
            background-color: color-mix(in srgb, var(--success) var(--bg-amount), transparent);

            & a {
                color: var(--success)
            }
        }

        &[data-variant=warning] {
            color: var(--warning);
            background-color: color-mix(in srgb, var(--warning) var(--bg-amount), transparent);

            & a {
                color: var(--warning)
            }
        }
    }
}

@layer components {
    .badge {
        --bg-amount: 10%;
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-1) var(--space-4);
        font-size: var(--text-8);
        font-weight: var(--font-medium);
        line-height: var(--leading-normal);
        background-color: var(--primary);
        color: var(--primary-foreground);
        border-radius: var(--radius-full);

        [data-theme=dark] & {
            --bg-amount: 30%
        }

        &.secondary {
            background-color: var(--secondary);
            color: var(--secondary-foreground)
        }

        &.outline {
            background-color: transparent;
            color: var(--foreground);
            border: 1px solid var(--border)
        }

        &.success {
            color: var(--success);
            background-color: color-mix(in srgb, var(--success) var(--bg-amount), transparent)
        }

        &.warning {
            color: var(--warning);
            background-color: color-mix(in srgb, var(--warning) var(--bg-amount), transparent)
        }

        &.danger {
            color: var(--danger);
            background-color: color-mix(in srgb, var(--danger) var(--bg-amount), transparent)
        }
    }
}

@layer components {
    details {
        border: 1px solid var(--border);
        border-radius: var(--radius-medium);
        overflow: hidden;

        +details {
            margin-top: -1px;
            border-start-start-radius: 0;
            border-start-end-radius: 0
        }

        &:has(+details) {
            border-end-start-radius: 0;
            border-end-end-radius: 0
        }

        &[open] summary {
            border-bottom: 1px solid var(--border)
        }
    }

    summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        padding: var(--space-4);
        font-weight: var(--font-medium);
        cursor: pointer;
        user-select: none;
        transition: background-color var(--transition-fast);

        &:hover {
            background-color: var(--muted)
        }

        &::-webkit-details-marker,
        &::marker {
            display: none
        }

        &:after {
            content: "";
            width: 1em;
            height: 1em;
            flex-shrink: 0;
            background-color: currentColor;
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            mask-size: contain;
            mask-repeat: no-repeat;
            transition: transform var(--transition-fast)
        }

        details[open] &:after {
            transform: rotate(180deg)
        }
    }

    details>*:not(summary) {
        padding: var(--space-4)
    }
}

@layer components {
    [role=tablist] {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-1);
        background-color: var(--muted);
        border-radius: var(--radius-medium)
    }

    [role=tab] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-7);
        font-weight: var(--font-medium);
        white-space: nowrap;
        background-color: transparent;
        color: var(--foreground);
        border: none;
        border-radius: calc(var(--radius-medium) - 2px);
        cursor: pointer;
        transition: background-color var(--transition-fast), color var(--transition-fast);

        &:hover {
            color: var(--muted-foreground)
        }

        &[aria-selected=true] {
            background-color: var(--background);
            box-shadow: var(--shadow-small)
        }
    }

    [role=tabpanel] {
        padding: var(--space-4) 0;

        &:focus-visible {
            outline: none
        }
    }
}

@layer components {
    dialog {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        width: 100%;
        max-width: 32rem;
        max-height: 85vh;
        margin: auto;
        padding: 0;
        background-color: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-large);
        box-shadow: var(--shadow-large);
        overflow: hidden;
        opacity: 0;
        transform: scale(.95);
        transition: opacity .15s ease, transform .15s ease, overlay .15s ease allow-discrete, display .15s ease allow-discrete;

        &[open] {
            opacity: 1;
            transform: scale(1)
        }

        @starting-style {
            &[open] {
                opacity: 0;
                transform: scale(.95)
            }
        }

        &::backdrop {
            background-color: #0000;
            transition: background-color .15s ease, overlay .15s ease allow-discrete, display .15s ease allow-discrete
        }

        &[open]::backdrop {
            background-color: #00000080
        }

        @starting-style {
            &[open]::backdrop {
                background-color: #0000
            }
        }

        >header,
        >form>header {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            padding: var(--space-6);
            padding-block-end: 0;

            >h1,
            >h2,
            >h3,
            >h4,
            >h5,
            >h6 {
                margin-block-end: 0
            }

            >p {
                font-size: var(--text-7);
                color: var(--muted-foreground);
                margin-block-end: 0
            }
        }

        >p,
        >div,
        >section,
        >form>p,
        >form>div,
        >form>section {
            padding: var(--space-6);
            overflow-y: auto
        }

        >footer,
        >form>footer {
            display: flex;
            justify-content: flex-end;
            gap: var(--space-2);
            padding: var(--space-6);
            padding-block-start: 0
        }
    }
}

@layer components {
    ot-dropdown {
        [popover] {
            position: fixed;
            margin: 0;
            min-width: 12rem;
            background-color: var(--background);
            border: 1px solid var(--border);
            border-radius: var(--radius-medium);
            box-shadow: var(--shadow-medium);
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity .15s ease-out, transform .15s ease-out, display .15s allow-discrete, overlay .15s allow-discrete;

            &:popover-open {
                opacity: 1;
                transform: translateY(0)
            }

            @starting-style {
                &:popover-open {
                    opacity: 0;
                    transform: translateY(-4px)
                }
            }

            hr {
                margin: var(--space-1) 0
            }
        }

        [role=menuitem] {
            display: flex;
            align-items: center;
            justify-content: start;
            gap: var(--space-2);
            width: 100%;
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-7);
            text-align: start;
            color: var(--foreground);
            background: none;
            border: none;
            border-radius: var(--radius-small);
            cursor: pointer;

            &:hover,
            &:focus {
                background-color: var(--accent);
                outline: none
            }
        }
    }
}

@layer components {
    .toast-container {
        position: fixed;
        display: flex;
        flex-direction: column;
        pointer-events: none;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
        overflow: visible;

        &::backdrop {
            display: none
        }

        &[data-placement=top-left] {
            inset: var(--space-4) auto auto var(--space-4)
        }

        &[data-placement=top-center] {
            inset: var(--space-4) auto auto 50%;
            transform: translate(-50%)
        }

        &[data-placement=top-right] {
            inset: var(--space-4) var(--space-4) auto auto
        }

        &[data-placement=bottom-left] {
            inset: auto auto var(--space-4) var(--space-4);
            flex-direction: column-reverse
        }

        &[data-placement=bottom-center] {
            inset: auto auto var(--space-4) 50%;
            transform: translate(-50%);
            flex-direction: column-reverse
        }

        &[data-placement=bottom-right] {
            inset: auto var(--space-4) var(--space-4) auto;
            flex-direction: column-reverse
        }
    }

    .toast {
        padding: var(--space-5) var(--space-4);
        max-width: 28rem;
        min-width: 20rem;
        pointer-events: auto;
        background-color: var(--card);
        border: 1px solid var(--border);
        border-inline-start-width: var(--space-1);
        border-inline-start-style: solid;
        border-radius: var(--radius-medium);
        box-shadow: var(--shadow-small);
        transition: opacity .15s, transform .15s, margin .15s;
        line-height: 1;

        .toast-title {
            font-weight: 600;
            margin: 0 0 var(--space-3) 0
        }

        .toast-message {
            color: var(--muted-foreground)
        }

        &[data-variant=success] {
            border-inline-start-color: var(--success)
        }

        &[data-variant=danger] {
            border-inline-start-color: var(--danger)
        }

        &[data-variant=warning] {
            border-inline-start-color: var(--warning)
        }

        &[data-variant=info] {
            border-inline-start-color: var(--secondary)
        }

        >[data-close] {
            margin-inline-start: auto;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            opacity: .5;

            &:hover {
                opacity: 1
            }
        }

        margin:var(--space-2) 0;

        &[data-entering] {
            opacity: 0;
            transform: translateY(-1rem)
        }

        &[data-exiting] {
            opacity: 0;
            margin: 0;
            padding-block: 0;
            max-height: 0;
            overflow: hidden;
            transition: opacity .2s, margin .2s, padding .2s, max-height .2s
        }
    }
}

@layer components {
    :root {
        --topnav-height: var(--space-12);
        --sidebar-width: 14rem
    }

    [data-sidebar-layout] {
        --topnav-offset: 0px;
        --topnav-scroll-offset: 0px;
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        min-height: 100dvh;
        gap: var(--space-4);

        &:has(nav[data-topnav]) {
            --topnav-offset: var(--topnav-height);
            --topnav-scroll-offset: calc(var(--topnav-height) + var(--space-6))
        }

        >main {
            min-width: 0;
            margin-block-start: var(--topnav-offset);

            [id] {
                scroll-margin-block-start: var(--topnav-scroll-offset)
            }
        }

        >aside[data-sidebar] {
            position: sticky;
            top: var(--topnav-offset);
            z-index: 1;
            height: calc(100dvh - var(--topnav-offset));
            align-self: start;
            background-color: var(--background);
            border-inline-end: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            width: var(--sidebar-width);

            >:is(header, footer) {
                flex-shrink: 0;
                padding: var(--space-3)
            }

            >footer {
                margin-block-start: auto
            }

            >nav {
                flex: 1;
                min-height: 0;
                overflow-y: auto;
                padding: var(--space-3) var(--space-2);

                ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    display: flex;
                    flex-direction: column;
                    gap: var(--space-1);

                    li {
                        margin: 0
                    }
                }

                a {
                    display: flex;
                    gap: var(--space-2);
                    padding: var(--space-1) var(--space-3);
                    font-size: var(--text-7);
                    color: var(--foreground);
                    text-decoration: none;
                    border-radius: var(--radius-small);
                    transition: background-color var(--transition-fast);

                    &:is(:hover, [aria-current]) {
                        background-color: var(--accent)
                    }
                }

                details {
                    border: none;
                    overflow: visible;

                    +details {
                        margin-top: 0
                    }

                    &[open] summary {
                        border-bottom: none
                    }

                    >ul {
                        margin-inline-start: var(--space-4);
                        padding: var(--space-1) 0
                    }
                }

                summary {
                    justify-content: flex-start;
                    gap: var(--space-2);
                    padding: var(--space-2) var(--space-3);
                    font-size: var(--text-7);
                    font-weight: var(--font-medium);
                    color: var(--foreground);
                    border-radius: var(--radius-small);

                    &:after {
                        width: .75rem;
                        height: .75rem;
                        margin-inline-start: auto
                    }
                }
            }
        }
    }

    nav[data-topnav] {
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        z-index: 5;
        min-height: var(--topnav-height);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-4);
        background-color: var(--background);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-small)
    }

    :is([data-sidebar-toggle], [data-sidebar-header]) {
        display: none
    }

    [data-sidebar-toggle] {
        padding: 0 var(--space-1);
        background: none;
        border: 1px solid var(--border);
        border-radius: var(--radius-small);
        cursor: pointer
    }

    [data-sidebar-layout=always] [data-sidebar-toggle] {
        display: inline-block
    }

    [data-sidebar-layout=always] {
        transition: grid-template-columns var(--transition);

        >aside[data-sidebar] {
            transform: translate(0);
            opacity: 1;
            transition: transform var(--transition), opacity var(--transition), visibility var(--transition)
        }
    }

    [data-sidebar-layout=always][data-sidebar-open] {
        grid-template-columns: 0px 1fr;
        gap: 0;

        >aside[data-sidebar] {
            overflow: hidden;
            min-width: 0;
            transform: translate(-100%);
            opacity: 0;
            visibility: hidden;
            border-inline-end: none
        }
    }

    @media(max-width:768px) {
        [data-sidebar-layout] {
            grid-template-columns: 1fr;

            >aside[data-sidebar] {
                position: fixed;
                top: var(--topnav-offset);
                left: 0;
                height: calc(100dvh - var(--topnav-offset));
                width: 16rem;
                transform: translate(-100%);
                transition: transform var(--transition);
                box-shadow: var(--shadow-large)
            }

            &[data-sidebar-open]>aside[data-sidebar] {
                transform: translate(0)
            }
        }

        [data-sidebar-layout=always][data-sidebar-open] {
            grid-template-columns: 1fr;
            gap: var(--space-4);

            >aside[data-sidebar] {
                opacity: 1;
                visibility: visible;
                transform: translate(0)
            }
        }

        [data-sidebar-toggle] {
            display: inline-block
        }

        [data-sidebar-header] {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--border)
        }
    }
}

@layer components {
    [role=status].skeleton {
        margin-block-end: var(--space-3);
        background: var(--muted);
        border-radius: var(--radius-medium);
        animation: shimmer 2s infinite;
        background-size: 200% 100%;
        background-image: linear-gradient(90deg, var(--muted) 0%, color-mix(in srgb, var(--muted) 30%, white) 30%, var(--muted) 100%);

        [data-theme=dark] & {
            background-image: linear-gradient(90deg, var(--muted) 0%, color-mix(in srgb, var(--muted) 90%, var(--foreground)) 90%, var(--muted) 100%)
        }

        &.box {
            width: 4rem;
            height: 4rem
        }

        &.line {
            height: 1rem;
            width: 100%
        }
    }

    [role=status].skeleton:last-child {
        margin-block-end: 0
    }

    @keyframes shimmer {
        0% {
            background-position: 200% 0
        }

        to {
            background-position: -200% 0
        }
    }
}

@layer components {
    [data-tooltip] {
        position: relative
    }

    [data-tooltip]:before,
    [data-tooltip]:after {
        position: absolute;
        inset-inline-start: 50%;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
        pointer-events: none;
        z-index: 1000
    }

    [data-tooltip]:after {
        content: attr(data-tooltip);
        inset-block-end: calc(100% + 10px);
        transform: translate(-50%) translateY(4px);
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-7);
        line-height: 1;
        white-space: nowrap;
        background: var(--foreground);
        color: var(--background);
        border-radius: var(--radius-medium)
    }

    [data-tooltip]:before {
        content: "";
        inset-block-end: calc(100% - 5px);
        transform: translate(-50%) translateY(4px);
        border: 8px solid transparent;
        border-top-color: var(--foreground)
    }

    [data-tooltip]:is(:hover, :focus-visible):before,
    [data-tooltip]:is(:hover, :focus-visible):after {
        opacity: 1;
        visibility: visible;
        transition-delay: .7s;
        transform: translate(-50%) translateY(0)
    }
}

@layer utilities {
    [hidden] {
        display: none !important
    }

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

    .text-left {
        text-align: start
    }

    .text-center {
        text-align: center
    }

    .text-right {
        text-align: end
    }

    .text-light,
    .text-lighter {
        color: var(--muted-foreground)
    }

    .flex {
        display: flex
    }

    .flex-col {
        flex-direction: column
    }

    .items-center {
        align-items: center
    }

    .justify-center {
        justify-content: center
    }

    .justify-between {
        justify-content: space-between
    }

    .hstack {
        display: flex;
        align-items: center;
        gap: var(--space-3)
    }

    .vstack {
        display: flex;
        flex-direction: column;
        gap: var(--space-3)
    }

    .gap-1 {
        gap: var(--space-1)
    }

    .gap-2 {
        gap: var(--space-2)
    }

    .gap-4 {
        gap: var(--space-4)
    }

    .mt-2 {
        margin-block-start: var(--space-2)
    }

    .mt-4 {
        margin-block-start: var(--space-4)
    }

    .mt-6 {
        margin-block-start: var(--space-6)
    }

    .mb-2 {
        margin-block-end: var(--space-2)
    }

    .mb-4 {
        margin-block-end: var(--space-4)
    }

    .mb-6 {
        margin-block-end: var(--space-6)
    }

    .p-4 {
        padding: var(--space-4)
    }

    .w-100 {
        width: 100%
    }
}

ul,
ol {
    &.unstyled {
        list-style: none;
        padding-inline-start: 0;
        margin-inline-start: 0
    }
}