as-select {
    display: inline-block;
}

as-select>div {
    position: relative;
}

as-select:has([popover])>div as-icon {
    display: block;
    position: absolute;
    right: 1ch;
    top: 1ch;
    transition: rotate .15s ease;
}

as-select:has([popover]:popover-open)>div as-icon {
    rotate: 180deg;
}

as-select select {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 38px;
    z-index: 1;
    width: 100%;
}

/*as-select input[popovertarget]
{
    appearance: none;
    border: var(--as-size-thin) solid var(--as-color-border-panel);
    border-radius: var(--as-border-radius);
    padding-inline: var(--as-space-s);
    padding-block: calc(var(--as-space-s) - var(--as-size-thin));
    line-height: 1.5;
    outline: none;
    position: relative;
    width: 100%;
    font-size: inherit;
}*/
as-select [popover] {
    --lines: 5;
    --padding-block: var(--as-space-s);
    --font-size: var(--as-font-size-m);
    --line-height: var(--as-line-height-base);
    --border-width: var(--as-size-thin);
    max-height: calc(var(--lines) *(var(--font-size) * var(--line-height) + 2 * var(--padding-block) + var(--border-width)));
    overflow: hidden;
    overflow-y: auto;
    padding: 0;
    inset: unset;
    margin-block-start: var(--as-space-xs);
    position: absolute;
    z-index: var(--as-index-popout);
    transition: all var(--as-time-xs) ease-out;
    transition-behavior: allow-discrete;
    transform: translateY(var(--as-space-m));
    transition-delay: 10ms;
    scale: 0.95;
    opacity: 0;
    border-radius: var(--as-border-radius-s);
    border: var(--as-size-thin) solid var(--as-color-border-panel);
    background-color: var(--as-color-background);
    box-shadow: var(--as-box-shadow);
    max-width: var(--width);
    width: 100%;
    position-area: bottom span-right;
}

as-select [popover]:popover-open {
    transform: translateY(0);
    opacity: 1;
    scale: 1;

    @starting-style {
        transform: translateY(var(--as-space-m));
        opacity: 0;
        scale: .95;
    }
}

as-select [popover]::backdrop {
    display: none;
}

as-select [popover] ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

as-select [popover] ul li {
    padding-inline: var(--as-space-s);
    padding-block: var(--padding-block);
    border-block-end: var(--border-width) solid var(--as-color-border-panel);
    cursor: pointer;
    font-size: var(--font-size);
    line-height: var(--line-height)
}

as-select [popover] ul li:HOVER,
as-select [popover] ul li:FOCUS {
    background-color: var(--as-color-border-panel);
    outline: none;
}

as-select [popover] ul li[selected] {
    background-color: var(--as-color-background-nav-weak);
}