/*
 * SPDX-FileCopyrightText: 2026 Andyou <andyou@animagram.jp>
 * SPDX-License-Identifier: Apache-2.0
 */

/*  Usage:

    === popover ===

    <button type="button" id="popover_button-1" popovertarget="popover-1">
    <* id="popover-1" popover="auto">

    #popover_button-1 {anchor-name: --popover_button-1;}
    #popover-1        {position-anchor: --popover_button-1;}

    === dialog ===

    <button type="button" onclick="dialog-1.showModal()"></button>
    <dialog id="dialog-1">
        <button type="button" formmethod="dialog"></button></dialog>

    === menu / listbox ===

    <button type="button" id="popover_button-2" popovertarget="popover-2">
    <* id="popover-2" popover="auto" role="menu/listbox">
        <span role="presentation"></span>
        <a role="menuitem/option"></a>
        <a role="menuitem/option" aria-disabled="true"></a>
        <label>
            <input type="checkbox" role="menuitemcheckbox/option" data-sign="check">
            <span></span></label>
        <label>
            <input type="radio" role="menuitemradio/option" data-sign="check">
            <span></span></label>
        <button role="menuitem/option"></button>
        <label>
            <span></span>
            <input type="text">
            <button role="menuitem/option"></button></label></*>

    #popover_button-2 {anchor-name: --popover_button-2;}
    #popover-2        {position-anchor: --popover_button-2;}

    --- combobox (listbox + typeable input) ---

    <label>
        <span></span>
        <input type="text" id="combobox">
        <button type="button" popovertarget="listbox-2"></button></label>
    <* id="listbox-2" popover="auto" role="listbox">...</*>

    #combobox  {anchor-name: --combobox;}
    #listbox-2 {position-anchor: --combobox;}

    === tooltip ===

    <button type="button" id="tooltip_trigger-1" popovertarget="tooltip-1">
    <* id="tooltip-1" popover="auto|manual"></*>

    #tooltip_trigger-1 {anchor-name: --tooltip_trigger-1;}
    #tooltip-1         {position-anchor: --tooltip_trigger-1;}
*/

@layer css.popup {

    [popover] {
        margin:                 0.25rem 0;
        position-area:          block-end span-inline-start;
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    }

    [popovertarget]:not(
        :disabled,
        [aria-disabled="true"]
    ) {
        color: var(--color-ink);
    }

    :where([role="menu"], [role="listbox"]) {
        background-color: var(--color-paper);
        border-color:     var(--color-ink-mix);
        border-style:     solid;
        border-width:     var(--md-border-width);
        border-radius:    var(--md-border-radius);
        color:            var(--color-ink);
        max-height:       calc(var(--md-border-width) * 0.2 + var(--md-box-height) * 6.5);
        overflow-y:       auto;
        padding-inline:   0.25rem;
        width:            max-content;
    }
    @media (forced-colors: active) {
        :where([role="menu"], [role="listbox"]) {
            background-color: Canvas;
            border-color:     ButtonBorder;
            color:            CanvasText;
        }
    }

    :where([role="menu"], [role="listbox"]) > * {
        display:     block;
        white-space: nowrap;
        width:       100%;
    }

    :where([role="menu"], [role="listbox"]) > [role]:where(a, button),
    :where([role="menu"], [role="listbox"]) > label:has(> input[role]) {
        cursor: pointer;
    }

    :where([role="menu"], [role="listbox"]) > label > input[role]::before {
        border-color: currentColor;
    }

    :where([role="menu"], [role="listbox"]) > label > input[role] {
        block-size:  var(--md-line-height);
        cursor:      pointer;
        inline-size: var(--md-line-height);
    }

    dialog {
        background-color: var(--color-paper);
        border-color:     var(--color-ink-mix);
        border-style:     solid;
        border-width:     var(--md-border-width);
        border-radius:    var(--md-border-radius);
        color:            var(--color-ink);
    }

    :where(dialog, [popover][data-surround="transparent"])::backdrop { /* per kiso.css:514 */
        background-color: oklch(0% 0 0deg / 30%);
    }

    @media (forced-colors: active) {
        dialog {
            background-color: Canvas;
            border-color:     ButtonBorder;
            color:            CanvasText;
        }
    }
}