/*
  ----------------------------------------
  UI Components
  ----------------------------------------
*/

@layer styles {
    /* Buttons
  ---------------------------------- */
    .ui-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 var(--space-sm);
        line-height: 2.2;
        border-radius: var(--rounded);
        border: var(--border) solid var(--white);
        box-shadow: var(--shadow-sm);
        background: var(--white);
        font-weight: 600;
        color: var(--darker);
        transition: all 70ms ease;
        cursor: pointer;
        background: var(--lighter);
        text-decoration: none;
        transition: all 200ms ease;
        margin: 0;

        &:hover {
            filter: brightness(1.1);
            box-shadow: var(--shadow);
        }

        &:active {
            transform: translateY(0.5px);
            box-shadow: none;
        }

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        &.ui-brand-1 {
            background: var(--brand-1);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-brand-2 {
            background: var(--brand-2);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-brand-3 {
            background: var(--brand-3);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-brand-4 {
            background: var(--brand-4);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-neutral {
            background: var(--midtone);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-info {
            background: var(--info);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-success {
            background: var(--success);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-warning {
            background: var(--warning);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-error {
            background: var(--error);
            color: var(--white);
            border-color: var(--white);
        }
    }

    /* Buttons mini-round */
    .ui-button-mini-round {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 9999px;
        background: var(--lighter);
        color: var(--brand-1);
        box-shadow: var(--shadow-sm);
        transition: all 250ms ease;

        &:hover {
            background: var(--brand-1);
            color: var(--lighter);
        }
    }

    /* Hamburger Button
  ---------------------------------- */
    .ui-hamburger-button {
        --button-width: 30px;
        --button-height: 24px;
        --line-thickness: 3px;
        --line-color: var(--darker);
        --line-radius: 2px;
        --number-of-spins: 5;
        --duration: 0.15s;
        --focus-color: rgba(0, 0, 0, 0.2);

        position: relative;
        display: block;
        width: var(--button-width);
        height: var(--button-height);
        cursor: pointer;
        outline: none;

        .line-1,
        .line-2,
        .line-3 {
            position: absolute;
            display: block;
            width: 100%;
            height: var(--line-thickness);
            background-color: var(--line-color);
            border-radius: var(--line-radius);
            transition: all var(--duration) ease-in-out;
        }

        .line-2 {
            top: calc(50% - var(--line-thickness) / 2);
        }

        .line-3 {
            bottom: 0;
        }

        /* Hamburger animate */
        [data-ui-hamburger-open-value="true"] & {
            .line-1 {
                transform: translateY(
                        calc(
                            var(--button-height) / 2 - var(--line-thickness) / 2
                        )
                    )
                    rotate(calc(-1 * 45deg * var(--number-of-spins)));
            }
            .line-2 {
                opacity: 0;
            }
            .line-3 {
                transform: translateY(
                        calc(
                            -1 *
                                (
                                    var(--button-height) / 2 -
                                        var(--line-thickness) / 2
                                )
                        )
                    )
                    rotate(calc(45deg * var(--number-of-spins)));
            }
        }
    }

    /* Hamburger Menu
    ---------------------------------- */
    .ui-hamburger-menu {
        position: fixed;
        right: 0;
        top: 4rem;
        bottom: 0;
        z-index: 90;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        transition:
            transform 120ms ease-in-out,
            visibility 0s 120ms;
        transform: translateX(100%);
        overflow-y: auto;
        visibility: hidden;

        /* Show menu when hamburger is open */
        [data-ui-hamburger-open-value="true"] & {
            visibility: visible;
            transform: translateX(0);
            transition:
                transform 120ms ease-in-out,
                visibility 0s 0s;
        }
    }

    /* Avatar
  ---------------------------------- */
    .ui-avatar {
        &[data-size="sm"] {
            --avatar-size: 1.5rem;
            --initials-font-size: 0.7rem;
        }

        /* Medium is the default */
        &[data-size="md"] {
            --avatar-size: 2.5rem;
            --initials-font-size: 1rem;
        }

        &[data-size="lg"] {
            --avatar-size: 7.5rem;
            --initials-font-size: 3rem;
        }

        width: var(--avatar-size);
        height: var(--avatar-size);
        border-radius: 9999px;
        outline: var(--border-lg) solid var(--white);
        background: var(--brand-1);
        color: var(--white);
        overflow: hidden;
        box-shadow: var(--shadow);

        .initials {
            font-size: var(--initials-font-size);
            line-height: 1;
        }
    }

    /* Toast
  ---------------------------------- */
    .ui-toast {
        position: fixed;
        display: flex;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        align-items: center;
        gap: var(--space-xs);
        min-width: min(24rem, calc(100vw - 32px));
        padding: var(--space-sm) var(--space-sm);
        border-radius: var(--rounded);
        box-shadow: var(--shadow);
        background: var(--darker);
        color: var(--light);
        animation: ephemeral 8s both;

        svg {
            flex-shrink: 0;
            border-radius: 50%;
        }

        span {
            flex: 1;
        }

        .ui-toast-close {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 100%;
            width: 1.6rem;
            height: 1.6rem;

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

        &.ui-toast-success {
            border-left-color: var(--success);

            svg.icon {
                color: var(--success);
            }
        }

        &.ui-toast-error {
            border-left-color: var(--error);

            svg.icon {
                color: var(--error);
            }
        }
    }

    /* Dropdown
  ---------------------------------- */
    .ui-dropdown {
        position: relative;
        display: inline-block;

        menu,
        ul {
            position: absolute;
            top: 100%;
            right: 0;
            z-index: 100;
            min-width: 12rem;
            margin-top: var(--space-2xs);
            padding: var(--space-2xs);
            background: var(--white);
            border-radius: var(--rounded);
            box-shadow: var(--shadow);
            list-style: none;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition:
                opacity 150ms ease-in-out,
                transform 150ms ease-in-out,
                visibility 0s 150ms;

            li {
                margin: 0;
            }

            a,
            button {
                display: flex;
                align-items: center;
                gap: var(--space-2xs);
                width: 100%;
                padding: var(--space-2xs) var(--space-xs);
                border-radius: var(--rounded-sm);
                text-decoration: none;
                color: var(--darker);
                background: transparent;
                border: none;
                cursor: pointer;
                transition: background-color 100ms ease;

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

        /* Show menu when dropdown is open */
        &.is-open menu,
        &.is-open ul {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition:
                opacity 150ms ease-in-out,
                transform 150ms ease-in-out,
                visibility 0s 0s;
        }
    }

    /* Auth Verify OTP Input
  ---------------------------------- */
    .ui-auth-verify {
        display: flex;
        justify-content: center;

        .ui-auth-verify-digits {
            display: flex;
            gap: var(--space-xs);

            input {
                width: 3rem;
                height: 3.5rem;
                padding: 0;
                font-size: 1.5rem;
                font-weight: 700;
                text-align: center;
                border: var(--border-lg) solid var(--light);
                border-radius: var(--rounded);
                background: var(--white);
                color: var(--darker);
                transition:
                    border-color 150ms ease,
                    box-shadow 150ms ease;

                &:focus {
                    outline: none;
                    border-color: var(--brand-1);
                    box-shadow: 0 0 0 3px
                        color-mix(in srgb, var(--brand-1) 20%, transparent);
                }

                &::placeholder {
                    color: var(--midtone);
                }
            }
        }
    }
}
/* DROPR's file and document components extend the starter's ui_* family. */
@layer styles {
  ::selection { background: var(--brand-accent); color: var(--ink); }
  :focus-visible { outline: 3px solid var(--brand-1); outline-offset: 4px; }
  [hidden] { display: none !important; }
  html { scrollbar-color: var(--muted) var(--surface); }
  body { caret-color: var(--brand-1); }
  .ui-muted { color: var(--muted); font-size: .875rem; line-height: 1.65; }
  .ui-wordmark { width: 132px; display: inline-flex; color: var(--ink); }
  .ui-wordmark svg { display: block; width: 100%; height: auto; }
  .ui-public { background: var(--surface); color: var(--ink); }
  .ui-public .container { max-width: 1240px; }
  .ui-public-header { min-height: 100px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--edge); }
  .ui-public-footer { display: flex; justify-content: space-between; gap: 16px; padding-block: 26px; font-size: .75rem; color: var(--muted); }
  .ui-file-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 32px; }
  .ui-file-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .ui-file-heading > div:last-child { min-width: 0; }
  .ui-file-heading h1 { font-size: clamp(1.1rem, 1rem + .35vw, 1.4rem); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; margin: 0; letter-spacing: -.025em; }
  .ui-file-heading p { margin: 4px 0 0; }
  .ui-file-type { width: 44px; height: 48px; flex: 0 0 44px; display: grid; place-items: center; background: var(--brand-1-light); color: var(--ink); border-radius: 10px; }
  .ui-file-actions { display: flex; align-items: center; flex-shrink: 0; gap: 8px; }
  .ui-file-actions .ui-button { font-size: .8125rem; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 13px; border-radius: 8px; white-space: nowrap; box-shadow: none; line-height: 1.4; }
  .ui-file-actions .ui-button.ui-neutral { color: var(--ink); background: white; border: 1px solid var(--edge); }
  .ui-file-actions .ui-button.ui-neutral:hover { background: var(--neutral-hover); }
  .ui-file-actions form { margin: 0; }
  .ui-neutral { background: white; color: var(--ink); border: 1px solid var(--edge); }
  .ui-neutral:hover { background: var(--neutral-hover); }
  .ui-danger-quiet { color: #984437; background: transparent; }
  .ui-danger-quiet:hover { background: #f9e9e5; }
  .ui-preview { background: #fff; border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; }
  .ui-image-stage { min-height: 400px; display: flex; justify-content: center; align-items: center; padding: 36px; background: var(--brand-1-light); }
  .ui-image-stage img { display: block; object-fit: contain; height: auto; max-width: 100%; max-height: 72vh; }
  .ui-document-controls { padding: 12px 20px; border-bottom: 1px solid var(--edge); background: var(--surface); display: flex; gap: 4px; }
  .ui-segment { padding: 7px 15px; border-radius: 6px; font-size: .8125rem; color: var(--muted); }
  .ui-segment[aria-pressed="true"] { color: var(--ink); background: var(--brand-1-light); font-weight: 600; }
  .ui-segment:hover { background: var(--navigation-wash); }
  .ui-document { max-width: 74ch; padding: 48px 44px 64px; margin-inline: auto; line-height: 1.8; font-size: .9375rem; }
  .ui-document h1 { font-size: 2rem; line-height: 1.3; letter-spacing: -.025em; margin: 0 0 20px; }
  .ui-document h2 { font-size: 1.35rem; margin: 32px 0 12px; line-height: 1.4; }
  .ui-document h3 { font-size: 1.1rem; margin: 28px 0 10px; line-height: 1.4; }
  .ui-document p, .ui-document ul, .ui-document ol { margin: 0 0 18px; }
  .ui-document ul, .ui-document ol { padding-left: 24px; }
  .ui-document ul { list-style: disc; }
  .ui-document ol { list-style: decimal; }
  .ui-document ul:not(.list-none), .ui-document ol:not(.list-none) { display: block; padding: 0 0 0 24px; }
  .ui-document ul:not(.list-none) li, .ui-document ol:not(.list-none) li { padding: 0; font-size: inherit; line-height: 1.8; margin-block: 5px; }
  .ui-document li::before { display: none !important; }
  .ui-document p { font-size: inherit; line-height: 1.8; }
  .ui-document a { color: var(--brand-1); text-decoration: underline; text-underline-offset: 3px; }
  .ui-document pre, .ui-source { background: var(--surface); padding: 20px; overflow-x: auto; font-size: .8125rem; line-height: 1.75; font-family: ui-monospace, SFMono-Regular, monospace; }
  .ui-source { margin: 0; min-height: 400px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .ui-document code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: .85em; }
  .ui-document blockquote { margin: 24px 0; padding: 16px 24px; background: var(--brand-1-light); border-radius: 8px; border: 0; }
  .ui-document blockquote p:last-child { margin-bottom: 0; }
  .ui-document :not(pre) > code { white-space: normal; background: var(--navigation-wash); color: var(--ink); }
  .ui-source code { background: transparent; padding: 0; white-space: pre-wrap; }
  .ui-document-note { border-top: 1px solid var(--edge); color: var(--muted); font-size: .75rem; padding: 14px 20px; margin: 0; }
  .ui-video-stage { background: var(--video-stage); display: grid; place-items: center; }
  .ui-video-stage video { display: block; width: 100%; max-height: 75vh; }
  .ui-download-stage { padding: 80px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .ui-download-stage > svg { color: var(--muted); }
  .ui-download-stage h2 { font-size: 1.6rem; margin: 4px 0 0; }
  .ui-download-stage p { max-width: 60ch; overflow-wrap: anywhere; }
  .ui-copy-status { min-height: 24px; margin: 12px 0 0; color: var(--brand-1); font-size: .875rem; overflow-wrap: anywhere; }
  .ui-skip-link { position: absolute; left: -10000px; }
  .ui-skip-link:focus { left: 20px; top: 12px; padding: 8px 14px; background: white; z-index: 100; }
  .ui-file-list { background: white; border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; }
  .ui-file-row { display: flex; align-items: center; gap: 16px; padding: 20px 24px; }
  .ui-file-row + .ui-file-row { border-top: 1px solid var(--edge); }
  .ui-file-row-name { flex: 1; min-width: 0; font-size: .875rem; overflow-wrap: anywhere; }
  .ui-file-row-name p { margin-top: 4px; }
  .ui-namespace { font-size: .875rem; color: var(--brand-1); background: var(--brand-1-light); padding: 7px 12px; border-radius: 6px; }
  .ui-empty-state { padding: 64px 20px; max-width: 60ch; margin: auto; text-align: center; }
  .ui-empty-state svg { margin: 0 auto 20px; color: var(--brand-1); }
  .ui-empty-state h2 { font-size: 1.5rem; margin-bottom: 12px; }
  .ui-token-form { max-width: 64ch; padding-block: 24px; }
  .ui-token-form h2 { font-size: 1.25rem; margin-bottom: 12px; }
  .ui-token-form p { margin-block: 12px; }
  .ui-secret { white-space: pre-wrap; overflow-wrap: anywhere; background: white; border: 1px solid var(--edge); padding: 20px; border-radius: 8px; font-size: .85rem; }
  .ui-app-body { background: var(--lighter); color: var(--ink); display: flex; flex-direction: column; min-height: 100svh; }
  .ui-app-header { background: var(--brand-1-light); border-bottom: 1px solid var(--edge); }
  .ui-app-header .container { display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: var(--workspace-header-height); gap: var(--space-lg); }
  .ui-app-shell { display: flex; flex: 1; }
  .ui-app-nav { align-self: stretch; display: flex; align-items: stretch; gap: var(--space-md); }
  .ui-app-nav a { display: flex; align-items: center; position: relative; min-height: 44px; color: var(--darker); font-size: .875rem; font-weight: var(--font-semibold); text-decoration: none; }
  .ui-app-nav a:hover { color: var(--brand-1); }
  .ui-app-nav a[aria-current="page"]::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--brand-1); }
  .ui-app-account { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); }
  .ui-app-account > form .ui-button, .ui-app-account .ui-dropdown menu :is(a, button) { min-height: 44px; }
  .ui-account-trigger { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: var(--space-2xs) 0; font-size: .875rem; color: var(--darker); }
  .ui-account-trigger:hover { color: var(--brand-1); }
  .ui-account-trigger > span { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ui-app-main { flex: 1; min-width: 0; padding-block: var(--space-md) var(--space-xl); }
  .ui-app-main .crud-header { min-height: auto; padding-block: var(--space-sm) var(--space-md); gap: var(--space-md); }
  .ui-app-main .crud-header :is(h1, h3) { font-size: 1.25rem; font-weight: var(--font-semibold); letter-spacing: -.015em; margin: 0; line-height: 1.4; }
  .ui-app-main .crud-header p { margin: var(--space-3xs) 0 0; font-size: .875rem; }
  @media (max-width: 760px) {
    .ui-public-header { min-height: 76px; }
    .ui-file-toolbar { flex-direction: column; align-items: stretch; padding-block: 24px; gap: 18px; }
    .ui-file-actions { flex-wrap: wrap; }
    .ui-document { padding: 28px 22px 40px; }
    .ui-document h1 { font-size: 1.65rem; }
    .ui-image-stage { min-height: 240px; padding: 18px; }
    .ui-public-footer { flex-direction: column; gap: 5px; }
    .ui-app-header .container { grid-template-columns: auto 1fr; gap: 0 var(--space-sm); padding-inline: var(--space-sm); }
    .ui-app-header .ui-wordmark { grid-column: 1; grid-row: 1; width: 120px; }
    .ui-app-account { grid-column: 2; grid-row: 1; flex-wrap: wrap; padding-block: var(--space-xs); }
    .ui-account-trigger > span { max-width: 12ch; }
    .ui-app-nav { grid-column: 1 / -1; grid-row: 2; gap: var(--space-md); }
    .ui-app-main { padding: var(--space-sm) var(--space-sm) var(--space-lg); }
    .ui-file-row { padding: 18px 14px; flex-wrap: wrap; gap: 12px; }
    .ui-file-row-name { flex-basis: calc(100% - 60px); }
    .ui-file-row .ui-file-actions { margin-left: 56px; }
    .ui-app-main .crud-header { flex-wrap: wrap; }
  }
}
@layer styles {
  .ui-onboarding { width:min(30rem,100%); margin:3rem auto; padding-block:1rem; }
  .ui-onboarding h1 { font-size:2rem; line-height:1.2; letter-spacing:-.025em; }
  .ui-onboarding-logo { display:block; color:var(--brand-1); width:12rem; margin-bottom:2rem; }
  .ui-settings-section { max-width:58rem; padding-block:var(--space-md); }
  .ui-settings-section h2 { margin-top:0; font-size:1.35rem; line-height:1.35; }
  .ui-settings-section p { line-height:1.65; }
  .ui-token-value { padding:1.25rem; background:var(--white); border:1px solid var(--light); border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere; user-select:all; }
  #embedded-checkout { min-height:16rem; margin-block:var(--space-lg); }
}