.reveal-surface {
    --reveal-surface-radius: var(--reveal-outline-radius-section);
    --reveal-light-x: -999px;
    --reveal-light-y: -999px;
    position: relative;
    border-radius: var(--reveal-surface-radius);
    isolation: isolate;
}

.reveal-surface::before,
body.plugin-ui .license-info-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: var(--reveal-outline-thickness) solid rgba(var(--reveal-outline-rgb), var(--reveal-baseline, var(--reveal-outline-baseline)));
    pointer-events: none;
    z-index: 2;
}

.reveal-surface::after,
body.plugin-ui .license-info-panel::after,
body.plugin-ui input[type="checkbox"]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--reveal-outline-thickness);
    background:
        radial-gradient(circle var(--reveal-light-radius) at var(--reveal-light-x) var(--reveal-light-y),
            rgba(var(--cursor-light-rgb), var(--reveal-cursor-light-alpha)) 0%,
            rgba(var(--cursor-light-rgb), var(--reveal-cursor-light-alpha-soft)) 34%,
            rgba(var(--cursor-light-rgb), 0) 72%);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    pointer-events: none;
    z-index: 3;
}

.reveal-separator {
    --reveal-light-x: -999px;
    --reveal-light-y: -999px;
    position: relative;
}


.reveal-dropdown__menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 20;
    box-sizing: border-box;
    min-width: max-content;
    max-width: calc(100vw - var(--space-6));
    max-height: var(--reveal-dropdown-max-height, calc(100vh - var(--space-6)));
    overflow: hidden;
    padding: var(--space-1);
    border-radius: var(--item-rounding);
    border: var(--reveal-outline-thickness) solid rgba(var(--reveal-outline-rgb), var(--reveal-outline-baseline));
    background: color-mix(in srgb, var(--panel-bg) 65%, transparent);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    color: var(--text-color);
    isolation: isolate;
}

/* Fallback to solid surface when the user disables transparency for accessibility. */
@media (prefers-reduced-transparency: reduce) {
    .reveal-dropdown__menu {
        background: var(--panel-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.reveal-dropdown--open-up>.reveal-dropdown__menu {
    top: auto;
    bottom: calc(100% + var(--space-2));
}

.reveal-dropdown__menu--portal {
    position: fixed;
    top: var(--reveal-dropdown-top, auto);
    right: var(--reveal-dropdown-right, auto);
    bottom: var(--reveal-dropdown-bottom, auto);
    left: var(--reveal-dropdown-left, auto);
    min-width: var(--reveal-dropdown-min-width, max-content);
    z-index: 100;
}

.reveal-dropdown__scroll {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: var(--reveal-dropdown-max-height, calc(100vh - var(--space-6)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--text-alpha-40) transparent;
    scrollbar-width: thin;
}

.reveal-dropdown__menu>h3 {
    margin: var(--space-2) var(--space-3) var(--space-1);
    color: var(--text-alpha-50);
    font-size: var(--font-size-tiny);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-control);
}

.reveal-dropdown__separator {
    height: 1px;
    margin: var(--space-1) var(--space-2);
    background: rgba(var(--surface-fg-rgb), 0.10);
}

/* Tag-agnostic option: same look on <a> and <button>. */
.reveal-dropdown__option {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-color);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-control);
    margin: 0;
    text-align: left;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--button-control-height);
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
    transition:
        background-color var(--transition-time) var(--transition-function),
        color var(--transition-time) var(--transition-function);
}

.reveal-dropdown__option:hover,
.reveal-dropdown__option:focus-visible {
    background: var(--surface-alpha-08);
    color: var(--text-alpha-95);
    outline: 0;
}

.reveal-dropdown__option:visited {
    color: var(--text-color);
}