@layer kora.components {
    .kora-handle-indicator {
        position: relative;
        display: inline-block;
        width: 100%;
        padding: 6px var(--kora-space-4);
        background: var(--kora-surface-1);
        border: none;
        border-radius: var(--kora-radius-pill);
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
        transition: background-color var(--kora-duration-base) var(--kora-ease),
            box-shadow var(--kora-duration-base) var(--kora-ease);
    }

    .kora-handle-indicator:hover {
        background: var(--kora-color-surface-raised);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    }

    .kora-handle-indicator__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .kora-handle-indicator__symbol {
        font-family: var(--kora-font-mono);
        font-size: var(--kora-text-lg);
        color: var(--kora-green-400);
        margin-right: 2px;
        transition: transform var(--kora-duration-base) var(--kora-ease);
    }

    .kora-handle-indicator:hover .kora-handle-indicator__symbol {
        transform: scale(1.1);
    }

    .kora-handle-indicator__handle {
        font-family: var(--kora-font-mono);
        color: var(--kora-color-text);
        letter-spacing: -0.01em;
        margin-right: auto;
    }

    .kora-handle-indicator__divider {
        width: 1px;
        height: 1rem;
        background: var(--kora-slate-600);
        margin: 0 var(--kora-space-3);
    }

    .kora-handle-indicator__wallet {
        width: 1rem;
        height: 1rem;
        color: var(--kora-color-text-muted);
        transition: color var(--kora-duration-base) var(--kora-ease);
    }

    .kora-handle-indicator:hover .kora-handle-indicator__wallet {
        color: var(--kora-blue-600);
    }

    /* Hover sheen — transparent → accent → transparent, fades in. */
    .kora-handle-indicator__glow {
        position: absolute;
        inset: 0;
        border-radius: var(--kora-radius-pill);
        pointer-events: none;
        opacity: 0;
        background: linear-gradient(
            90deg,
            transparent,
            color-mix(in srgb, var(--kora-blue-600) 5%, transparent),
            transparent
        );
        transition: opacity var(--kora-duration-slow) var(--kora-ease);
    }

    .kora-handle-indicator:hover .kora-handle-indicator__glow {
        opacity: 1;
    }
}