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

/*  Usage:

    <* data-surround="" data-sign|facet="" (data-inline-align="start|end|center")></>

    <* data-surround="">
        <* data-sign-style="inline" data-sign|facet="" (data-inline-align="start|end|center")></*></*>

    <summary (data-facet="chevron")></summary>

    <label>
        <select data-facet="chevron">
            <option></option></select></label>
*/

@layer css.data_sign {
    :where(
        [data-sign],
        [data-facet],
        summary:not([data-facet]),
        button[aria-haspopup="listbox"],
        label:has(> select:is([data-facet="chevron"], :not([data-facet])))
    ) {
        position: relative;
    }

    /* --- min inline size, min block size --- */

    :where(
        [data-sign],
        [data-facet]
    ):not(select, [data-sign-style="inline"]) {
        min-block-size:  var(--box-height);
        min-inline-size: var(--box-height);
    }

    /*  === sign-style: inline === */

    [data-sign-style="inline"] {
        block-size:     var(--line-height);
        vertical-align: middle;
    }

    /* === data-inline-align === */

    :where(
        [data-sign="check"],
        [data-sign="folder"],
        [data-sign="hatch"],
        [data-sign="minus"],
        [data-sign="rule"],
        [data-facet="chevron"]:not(select),
        summary:not([data-facet]),
        button[aria-haspopup="listbox"]:not([data-facet]),
        [data-facet="eye"],
        [data-facet="reload"],
        [data-facet="sync"]
    ):where([data-inline-align="start"])::before,
    :where(
        [data-sign="check"],
        [data-sign="folder"],
        [data-sign="hatch"],
        [data-sign="minus"],
        [data-sign="rule"],
        [data-facet="chevron"]:not(select),
        summary:not([data-facet]),
        button[aria-haspopup="listbox"]:not([data-facet]),
        [data-facet="eye"],
        [data-facet="reload"],
        [data-facet="sync"]
    ):not([data-inline-align="start"])::after,
    :where(
        [data-sign="copy"],
        [data-sign="file"],
        [data-sign="plus"],
        [data-sign="x"]
    )::before,
    :where(
        [data-sign="copy"],
        [data-sign="file"],
        [data-sign="plus"],
        [data-sign="x"]
    )::after,
    input[type="checkbox"]:not([role="switch"]):not([data-sign]):not([data-facet])::after {
        content:      "";
        inset-block:  0;
        margin-block: auto;
        position:     absolute;
    }

    /* --- center --- */

    :where(
        [data-sign="check"],
        [data-sign="folder"],
        [data-sign="hatch"],
        [data-sign="minus"],
        [data-facet="eye"],
        [data-facet="reload"],
        [data-facet="sync"]
    ):where(
        [data-inline-align="center"],
        :not([data-inline-align])
    )::after,
    :where(
        [data-sign="rule"],
        [data-facet="chevron"]:not(select),
        summary:not([data-facet]),
        button[aria-haspopup="listbox"]:not([data-facet])
    )[data-inline-align="center"]::after,
    :where(
        [data-sign="copy"],
        [data-sign="file"],
        [data-sign="plus"],
        [data-sign="x"]
    ):where(
        [data-inline-align="center"],
        :not([data-inline-align])
    )::before,
    :where(
        [data-sign="copy"],
        [data-sign="file"],
        [data-sign="plus"],
        [data-sign="x"]
    ):where(
        [data-inline-align="center"],
        :not([data-inline-align])
    )::after,
    input[type="checkbox"]:not([role="switch"]):not([data-sign]):not([data-facet])::after {
        inset-inline:  0;
        margin-inline: auto;
    }

    /* --- start --- */

    :where(
        [data-sign="check"],
        [data-sign="folder"],
        [data-sign="hatch"],
        [data-sign="minus"],
        [data-sign="rule"],
        [data-facet="chevron"]:not(select),
        summary:not([data-facet]),
        button[aria-haspopup="listbox"]:not([data-facet]),
        [data-facet="eye"],
        [data-facet="reload"],
        [data-facet="sync"]
    )[data-inline-align="start"]::before,
    :where(
        [data-sign="copy"],
        [data-sign="file"],
        [data-sign="plus"],
        [data-sign="x"]
    )[data-inline-align="start"]::before,
    :where(
        [data-sign="copy"],
        [data-sign="file"],
        [data-sign="plus"],
        [data-sign="x"]
    )[data-inline-align="start"]::after {
        inset-inline-start: var(--border-radius);
        inset-inline-end:   auto;
        margin-inline:      0;
    }

    :where(
        [data-sign="check"],
        [data-sign="copy"],
        [data-sign="file"],
        [data-sign="folder"],
        [data-sign="hatch"],
        [data-sign="minus"],
        [data-sign="plus"],
        [data-sign="x"],
        [data-facet="eye"],
        [data-facet="reload"],
        [data-facet="sync"]
    )[data-inline-align="start"] {
        padding-inline-start: calc(var(--border-radius) * 2 + var(--line-height));
    }

    /* --- end --- */

    :where(
        [data-sign="check"],
        [data-sign="folder"],
        [data-sign="hatch"],
        [data-sign="minus"],
        [data-sign="rule"],
        [data-facet="chevron"]:not(select),
        summary:not([data-facet]),
        button[aria-haspopup="listbox"]:not([data-facet]),
        [data-facet="eye"],
        [data-facet="reload"],
        [data-facet="sync"]
    )[data-inline-align="end"]::after,
    :where(
        [data-facet="chevron"]:not(select),
        summary:not([data-facet]),
        button[aria-haspopup="listbox"]:not([data-facet])
    ):not([data-inline-align])::after,
    :where(
        [data-sign="copy"],
        [data-sign="file"],
        [data-sign="plus"],
        [data-sign="x"]
    )[data-inline-align="end"]::before,
    :where(
        [data-sign="copy"],
        [data-sign="file"],
        [data-sign="plus"],
        [data-sign="x"]
    )[data-inline-align="end"]::after {
        inset-inline-start: auto;
        inset-inline-end:   var(--border-radius);
        margin-inline:      0;
    }

    :where(
        [data-sign="check"],
        [data-sign="copy"],
        [data-sign="file"],
        [data-sign="folder"],
        [data-sign="hatch"],
        [data-sign="minus"],
        [data-sign="plus"],
        [data-sign="x"],
        [data-facet="eye"],
        [data-facet="reload"],
        [data-facet="sync"]
    )[data-inline-align="end"] {
        padding-inline-end: calc(var(--border-radius) * 2 + var(--line-height));
    }

    /* === check === */

    input[type="checkbox"]:not([role="switch"]):not([data-sign]):not([data-facet])::before {
        content:  "";
        inset:    0;
        position: absolute;
    }

    [data-sign="check"]:where([data-inline-align="start"])::before,
    [data-sign="check"]:not([data-inline-align="start"])::after,
    input[type="checkbox"]:not([role="switch"]):not([data-sign]):not([data-facet])::after {
        border-color:  currentColor;
        border-radius: 0;
        border-style:  solid;
        border-width:  0 0.1875rem 0.1875rem 0;
        inset-block:   0;
        margin-block:  auto;
        rotate:        45deg;
    }

    input[data-sign="check"]:not(:checked, [type="checkbox"]:indeterminate):where([data-inline-align="start"])::before,
    input[data-sign="check"]:not(:checked, [type="checkbox"]:indeterminate):not([data-inline-align="start"])::after,
    input[type="checkbox"]:not([role="switch"]):not([data-sign]):not([data-facet]):not(:checked, :indeterminate)::after {
        border-width: 0;
    }

    /* --- size --- */

    :where(
        [data-sign="check"],
        input[type="checkbox"]:not([role="switch"]):not([data-sign]):not([data-facet])
    ) {
        block-size:      var(--box-height);
        min-inline-size: var(--box-height);
    }

    [data-sign="check"]:where([data-inline-align="start"])::before,
    [data-sign="check"]:not([data-inline-align="start"])::after,
    input[type="checkbox"]:not([role="switch"]):not([data-sign]):not([data-facet])::after {
        block-size:  var(--line-height);
        inline-size: calc(var(--line-height) * 0.5);
    }

    [data-sign="check"][data-size="xs"]:where([data-inline-align="start"])::before,
    [data-sign="check"][data-size="xs"]:not([data-inline-align="start"])::after,
    input[type="checkbox"]:not([role="switch"]):not([data-sign]):not([data-facet])[data-size="xs"]::after {
        translate: 0 -0.09375rem;
    }

    [data-sign="check"][data-size="sm"]:where([data-inline-align="start"])::before,
    [data-sign="check"][data-size="sm"]:not([data-inline-align="start"])::after,
    input[type="checkbox"]:not([role="switch"]):not([data-sign]):not([data-facet])[data-size="sm"]::after {
        translate: 0 -0.15625rem;
    }

    [data-sign="check"]:where([data-size="md"], :not([data-size])):where([data-inline-align="start"])::before,
    [data-sign="check"]:where([data-size="md"], :not([data-size])):not([data-inline-align="start"])::after,
    input[type="checkbox"]:not([role="switch"]):not([data-sign]):not([data-facet]):where([data-size="md"], :not([data-size]))::after {
        translate: 0 -0.20312rem;
    }

    [data-sign="check"][data-size="lg"]:where([data-inline-align="start"])::before,
    [data-sign="check"][data-size="lg"]:not([data-inline-align="start"])::after,
    input[type="checkbox"]:not([role="switch"]):not([data-sign]):not([data-facet])[data-size="lg"]::after {
        translate: 0 -0.25rem;
    }

    [data-sign="check"][data-size="xl"]:where([data-inline-align="start"])::before,
    [data-sign="check"][data-size="xl"]:not([data-inline-align="start"])::after,
    input[type="checkbox"]:not([role="switch"]):not([data-sign]):not([data-facet])[data-size="xl"]::after {
        translate: 0 -0.28125rem;
    }

    [data-sign="check"][data-size="2xl"]:where([data-inline-align="start"])::before,
    [data-sign="check"][data-size="2xl"]:not([data-inline-align="start"])::after,
    input[type="checkbox"]:not([role="switch"]):not([data-sign]):not([data-facet])[data-size="2xl"]::after {
        translate: 0 -0.35938rem;
    }

    /* === copy === */

    [data-sign="copy"]::before,
    [data-sign="copy"]::after {
        border-color: currentColor;
        border-style: solid;
    }
    [data-sign="copy"]::after {
        background-color: inherit;
    }

    /* --- size --- */

    [data-sign="copy"] {
        &::before,
        &::after {
            block-size:    calc(var(--line-height) * 0.875);
            border-radius: var(--border-radius);
            border-width:  var(--border-width);
            inline-size:   calc(var(--line-height) * 0.625);
        }
        &::before {
            translate: calc(var(--line-height) * 0.1875) calc(var(--line-height) * -0.0625);
        }
        &::after {
            translate: calc(var(--line-height) * -0.1875) calc(var(--line-height) * 0.0625);
        }
        &[data-type="landscape"]::before,
        &[data-type="landscape"]::after {
            block-size:  calc(var(--line-height) * 0.625);
            inline-size: calc(var(--line-height) * 0.875);
        }
        &[data-type="landscape"]::before {
            translate: calc(var(--line-height) * 0.0625) calc(var(--line-height) * -0.1875);
        }
        &[data-type="landscape"]::after {
            translate: calc(var(--line-height) * -0.0625) calc(var(--line-height) * 0.1875);
        }
    }

    /* === file === */

    [data-sign="file"]::before {
        border-color:            currentColor;
        border-style:            solid;
        border-top-right-radius: 0;
        clip-path:               polygon(0% 0%, 62.5% 0%, 100% 28.125%, 100% 100%, 0% 100%);
    }

    [data-sign="file"]::after {
        background-color: currentColor;
        clip-path:        polygon(62.5% 0%, 100% 28.125%, 94.1074% 32.5444%, 56.6074% 4.4194%);
    }

    /* --- size --- */

    [data-sign="file"] {
        &::before,
        &::after {
            block-size:  var(--line-height);
            inline-size: calc(var(--line-height) * 0.75);
        }
        &::before {
            border-radius: calc(var(--line-height) * 0.125);
            border-top-right-radius: 0;
            border-width:  calc(var(--line-height) * 0.0625);
        }
    }

    /* === folder === */

    [data-sign="folder"]:where([data-inline-align="start"])::before,
    [data-sign="folder"]:not([data-inline-align="start"])::after {
        background-color: currentColor;
        clip-path:        shape(
            evenodd from 3.375% 24.1875%,
            line to 3.125% 18.75%,
            arc to 15.625% 6.25% of 12.5% cw,
            line to 38.575% 6.25%,
            arc to 47.4125% 9.9125% of 12.5% cw,
            line to 52.5875% 15.0875%,
            arc to 61.425% 18.75% of 12.5% ccw,
            line to 86.3125% 18.75%,
            arc to 98.7625% 32.3813% of 12.5% cw,
            line to 94.7812% 76.1312%,
            arc to 82.3375% 87.5% of 12.5% cw,
            line to 17.6625% 87.5%,
            arc to 5.21875% 76.1312% of 12.5% cw,
            line to 1.2375% 32.3813%,
            arc to 3.375% 24.1875% of 12.5% cw,
            close,
            move to 13.6875% 25%,
            arc to 7.4625% 31.8125% of 6.25% ccw,
            line to 11.4437% 75.5625%,
            arc to 17.6625% 81.25% of 6.25% ccw,
            line to 82.3375% 81.25%,
            arc to 88.5563% 75.5625% of 6.25% ccw,
            line to 92.5375% 31.8125%,
            arc to 86.3125% 25% of 6.25% ccw,
            close,
            move to 43% 14.3313%,
            arc to 38.575% 12.5% of 6.25% ccw,
            line to 15.625% 12.5%,
            arc to 9.375% 18.6313% of 6.25% ccw,
            line to 9.4125% 19.5%,
            curve to 13.6875% 18.75% with 11.4313% 18.7563%,
            line to 47.4125% 18.75%,
            close
        );
        content:          "";
        inset-block:      0;
        margin-block:     auto;
        position:         absolute;
    }

    /* --- size --- */

    [data-sign="folder"]:where([data-inline-align="start"])::before,
    [data-sign="folder"]:not([data-inline-align="start"])::after {
        block-size:  var(--line-height);
        inline-size: var(--line-height);
    }

    /* === hatch === */

    [data-sign="hatch"]:where([data-inline-align="start"])::before,
    [data-sign="hatch"]:not([data-inline-align="start"])::after {
        background-image: repeating-linear-gradient(
            -45deg,
            currentcolor 0,
            currentcolor 0.125rem,
            transparent 0.125rem,
            transparent 0.25rem
        );
        border-radius: 0;
    }

    /* --- size --- */

    [data-sign="hatch"]:where([data-inline-align="start"])::before,
    [data-sign="hatch"]:not([data-inline-align="start"])::after {
        block-size:  var(--line-height);
        inline-size: var(--line-height);
    }

    /*  === minus, plus === */

    [data-sign="minus"]:where([data-inline-align="start"])::before,
    [data-sign="minus"]:not([data-inline-align="start"])::after,
    [data-sign="plus"]::before,
    [data-sign="plus"]::after {
        background-color: currentColor;
        border-radius:    0;
    }
    [data-sign="plus"]::after {
        rotate: 90deg;
    }

    /* --- size --- */

    [data-sign="minus"]:where([data-inline-align="start"])::before,
    [data-sign="minus"]:not([data-inline-align="start"])::after,
    [data-sign="plus"]::before,
    [data-sign="plus"]::after {
        block-size:  var(--border-width);
        inline-size: calc(var(--line-height) * 0.625);
    }

    /* === rule: indent with a rule bar === */

    [data-sign="rule"]:where(
        [data-inline-align="start"],
        :not([data-inline-align])
    ) {
        padding-inline-start: 1.5rem;
    }
    [data-sign="rule"][data-inline-align="end"] {
        padding-inline-end: 1.5rem;
    }

    [data-sign="rule"]:where([data-inline-align="start"])::before,
    [data-sign="rule"]:not([data-inline-align="start"])::after {
        background-color: var(--color-emphasis-ink);
        border-radius:     0;
        inline-size:       0.5rem;
    }
    [data-sign="rule"][data-inline-align="start"]::before,
    [data-sign="rule"]:not([data-inline-align])::after {
        inset-inline-start: 0;
    }
    [data-sign="rule"][data-inline-align="end"]::after {
        inset-inline-end: 0;
    }
    @media (forced-colors: active) {
        [data-sign="rule"]:where([data-inline-align="start"])::before,
        [data-sign="rule"]:not([data-inline-align="start"])::after {
            background-color: CanvasText;
        }
    }

    /* --- size --- */

    [data-sign="rule"]:where([data-inline-align="start"])::before,
    [data-sign="rule"]:not([data-inline-align="start"])::after {
        inset-block: calc((var(--box-height) - var(--line-height)) / 2);
    }

    /*  === x === */

    [data-sign="x"]::before,
    [data-sign="x"]::after {
        background-color: currentColor;
        border-radius:    0;
    }
    [data-sign="x"]::before {
        rotate: 45deg;
    }
    [data-sign="x"]::after {
        rotate: -45deg;
    }

    /* --- size --- */

    [data-sign="x"]::before,
    [data-sign="x"]::after {
        block-size:  var(--border-width);
        inline-size: calc(var(--line-height) / 1.4142);
    }

    /* === chevron === */

    :where(
        [data-facet="chevron"]:not(select),
        summary:not([data-facet]),
        button[aria-haspopup="listbox"]:not([data-facet])
    ):where([data-inline-align="start"])::before,
    :where(
        [data-facet="chevron"]:not(select),
        summary:not([data-facet]),
        button[aria-haspopup="listbox"]:not([data-facet])
    ):not([data-inline-align="start"])::after,
    label:has(> select:is([data-facet="chevron"], :not([data-facet])))::after {
        border-radius:        0;
        border-style:         solid;
        border-top-width:     0;
        border-left-width:    0;
        border-bottom-width:  var(--border-width);
        border-right-width:   var(--border-width);
        content:              "";
        inset-block:          0;
        margin-block:         auto;
        pointer-events:       none;
        position:             absolute;
        z-index:              2;
    }

    @media (prefers-reduced-motion: no-preference) {
        :where(
            [data-facet="chevron"]:not(select),
            summary:not([data-facet]),
            button[aria-haspopup="listbox"]:not([data-facet])
        ):where([data-inline-align="start"])::before,
        :where(
            [data-facet="chevron"]:not(select),
            summary:not([data-facet]),
            button[aria-haspopup="listbox"]:not([data-facet])
        ):not([data-inline-align="start"])::after,
        label:has(> select:is([data-facet="chevron"], :not([data-facet])))::after {
            transition: transform 0.15s ease;
        }
    }

    /* --- size --- */

    :where(
        [data-facet="chevron"]:not(select),
        summary:not([data-facet]),
        button[aria-haspopup="listbox"]:not([data-facet])
    ):where([data-inline-align="end"], :not([data-inline-align])) {
        padding-inline-end: calc(var(--border-radius) * 2 + var(--font-size) * 0.6 * 1.06);

        &:where([data-size="xs"], [data-size="sm"], [data-size="md"], :not([data-size])) {
            padding-inline-end: calc(var(--border-radius) * 2 + var(--font-size) * 0.75 * 1.06);
        }
    }
    :where(
        [data-facet="chevron"]:not(select),
        summary:not([data-facet]),
        button[aria-haspopup="listbox"]:not([data-facet])
    )[data-inline-align="start"] {
        padding-inline-start: calc(var(--border-radius) * 2 + var(--font-size) * 0.6 * 1.06);

        &:where([data-size="xs"], [data-size="sm"], [data-size="md"], :not([data-size])) {
            padding-inline-start: calc(var(--border-radius) * 2 + var(--font-size) * 0.75 * 1.06);
        }
    }

    :where(
        [data-facet="chevron"]:not(select),
        summary:not([data-facet]),
        button[aria-haspopup="listbox"]:not([data-facet])
    ):where([data-inline-align="start"])::before,
    :where(
        [data-facet="chevron"]:not(select),
        summary:not([data-facet]),
        button[aria-haspopup="listbox"]:not([data-facet])
    ):not([data-inline-align="start"])::after {
        block-size:  calc(var(--font-size) * 0.6 * 1.06);
        inline-size: calc(var(--font-size) * 0.6 * 1.06);
    }

    :where(
        [data-facet="chevron"]:not(select):where([data-size="xs"], [data-size="sm"], [data-size="md"], :not([data-size])),
        summary:not([data-facet]):where([data-size="xs"], [data-size="sm"], [data-size="md"], :not([data-size])),
        button[aria-haspopup="listbox"]:not([data-facet]):where([data-size="xs"], [data-size="sm"], [data-size="md"], :not([data-size]))
    ):where([data-inline-align="start"])::before,
    :where(
        [data-facet="chevron"]:not(select):where([data-size="xs"], [data-size="sm"], [data-size="md"], :not([data-size])),
        summary:not([data-facet]):where([data-size="xs"], [data-size="sm"], [data-size="md"], :not([data-size])),
        button[aria-haspopup="listbox"]:not([data-facet]):where([data-size="xs"], [data-size="sm"], [data-size="md"], :not([data-size]))
    ):not([data-inline-align="start"])::after {
        block-size:  calc(var(--font-size) * 0.75 * 1.06);
        inline-size: calc(var(--font-size) * 0.75 * 1.06);
    }

    :where(
        [data-facet="chevron"]:not(select):where([data-size="xs"], [data-size="sm"], [data-size="lg"]),
        summary:not([data-facet]):where([data-size="xs"], [data-size="sm"], [data-size="lg"]),
        button[aria-haspopup="listbox"]:not([data-facet]):where([data-size="xs"], [data-size="sm"], [data-size="lg"])
    ):where([data-inline-align="start"])::before,
    :where(
        [data-facet="chevron"]:not(select):where([data-size="xs"], [data-size="sm"], [data-size="lg"]),
        summary:not([data-facet]):where([data-size="xs"], [data-size="sm"], [data-size="lg"]),
        button[aria-haspopup="listbox"]:not([data-facet]):where([data-size="xs"], [data-size="sm"], [data-size="lg"])
    ):not([data-inline-align="start"])::after {
        transform: translateY(-0.125rem) rotate(45deg);
    }

    :where(
        [data-facet="chevron"]:not(select):where([data-size="xs"], [data-size="sm"], [data-size="lg"]):where(:open, :checked, :has(+ [popover]:popover-open)),
        details:open > summary:not([data-facet]):where([data-size="xs"], [data-size="sm"], [data-size="lg"]),
        button[aria-haspopup="listbox"]:not([data-facet]):where([data-size="xs"], [data-size="sm"], [data-size="lg"]):has(+ [popover]:popover-open)
    ):where([data-inline-align="start"])::before,
    :where(
        [data-facet="chevron"]:not(select):where([data-size="xs"], [data-size="sm"], [data-size="lg"]):where(:open, :checked, :has(+ [popover]:popover-open)),
        details:open > summary:not([data-facet]):where([data-size="xs"], [data-size="sm"], [data-size="lg"]),
        button[aria-haspopup="listbox"]:not([data-facet]):where([data-size="xs"], [data-size="sm"], [data-size="lg"]):has(+ [popover]:popover-open)
    ):not([data-inline-align="start"])::after {
        transform: translateY(0.125rem) rotate(225deg);
    }

    :where(
        [data-facet="chevron"]:not(select):where([data-size="md"], :not([data-size]), [data-size="xl"]),
        summary:not([data-facet]):where([data-size="md"], :not([data-size]), [data-size="xl"]),
        button[aria-haspopup="listbox"]:not([data-facet]):where([data-size="md"], :not([data-size]), [data-size="xl"])
    ):where([data-inline-align="start"])::before,
    :where(
        [data-facet="chevron"]:not(select):where([data-size="md"], :not([data-size]), [data-size="xl"]),
        summary:not([data-facet]):where([data-size="md"], :not([data-size]), [data-size="xl"]),
        button[aria-haspopup="listbox"]:not([data-facet]):where([data-size="md"], :not([data-size]), [data-size="xl"])
    ):not([data-inline-align="start"])::after {
        transform: translateY(-0.1875rem) rotate(45deg);
    }

    :where(
        [data-facet="chevron"]:not(select):where([data-size="md"], :not([data-size]), [data-size="xl"]):where(:open, :checked, :has(+ [popover]:popover-open)),
        details:open > summary:not([data-facet]):where([data-size="md"], :not([data-size]), [data-size="xl"]),
        button[aria-haspopup="listbox"]:not([data-facet]):where([data-size="md"], :not([data-size]), [data-size="xl"]):has(+ [popover]:popover-open)
    ):where([data-inline-align="start"])::before,
    :where(
        [data-facet="chevron"]:not(select):where([data-size="md"], :not([data-size]), [data-size="xl"]):where(:open, :checked, :has(+ [popover]:popover-open)),
        details:open > summary:not([data-facet]):where([data-size="md"], :not([data-size]), [data-size="xl"]),
        button[aria-haspopup="listbox"]:not([data-facet]):where([data-size="md"], :not([data-size]), [data-size="xl"]):has(+ [popover]:popover-open)
    ):not([data-inline-align="start"])::after {
        transform: translateY(0.1875rem) rotate(225deg);
    }

    :where(
        [data-facet="chevron"]:not(select)[data-size="2xl"],
        summary:not([data-facet])[data-size="2xl"],
        button[aria-haspopup="listbox"]:not([data-facet])[data-size="2xl"]
    ):where([data-inline-align="start"])::before,
    :where(
        [data-facet="chevron"]:not(select)[data-size="2xl"],
        summary:not([data-facet])[data-size="2xl"],
        button[aria-haspopup="listbox"]:not([data-facet])[data-size="2xl"]
    ):not([data-inline-align="start"])::after {
        transform: translateY(-0.25rem) rotate(45deg);
    }

    :where(
        [data-facet="chevron"]:not(select)[data-size="2xl"]:where(:open, :checked, :has(+ [popover]:popover-open)),
        details:open > summary:not([data-facet])[data-size="2xl"],
        button[aria-haspopup="listbox"]:not([data-facet])[data-size="2xl"]:has(+ [popover]:popover-open)
    ):where([data-inline-align="start"])::before,
    :where(
        [data-facet="chevron"]:not(select)[data-size="2xl"]:where(:open, :checked, :has(+ [popover]:popover-open)),
        details:open > summary:not([data-facet])[data-size="2xl"],
        button[aria-haspopup="listbox"]:not([data-facet])[data-size="2xl"]:has(+ [popover]:popover-open)
    ):not([data-inline-align="start"])::after {
        transform: translateY(0.25rem) rotate(225deg);
    }

    label:has(> select:is([data-facet="chevron"], :not([data-facet]))[data-size="xs"])::after {
        block-size:          calc(var(--xs-font-size) * 0.75 * 1.06);
        border-bottom-width: var(--xs-border-width);
        border-right-width:  var(--xs-border-width);
        inline-size:         calc(var(--xs-font-size) * 0.75 * 1.06);
        inset-block-end:     auto;
        inset-block-start:   calc((var(--xs-box-height) - var(--xs-font-size) * 0.75 * 1.06) / 2);
        inset-inline-end:    var(--xs-border-radius);
        margin-block:        0;
        transform:           translateY(-0.125rem) rotate(45deg);
    }

    label:has(> select:is([data-facet="chevron"], :not([data-facet]))[data-size="xs"]:open)::after {
        transform: translateY(0.125rem) rotate(225deg);
    }

    label:has(> select:is([data-facet="chevron"], :not([data-facet]))[data-size="sm"])::after {
        block-size:          calc(var(--sm-font-size) * 0.75 * 1.06);
        border-bottom-width: var(--sm-border-width);
        border-right-width:  var(--sm-border-width);
        inline-size:         calc(var(--sm-font-size) * 0.75 * 1.06);
        inset-block-end:     auto;
        inset-block-start:   calc((var(--sm-box-height) - var(--sm-font-size) * 0.75 * 1.06) / 2);
        inset-inline-end:    var(--sm-border-radius);
        margin-block:        0;
        transform:           translateY(-0.125rem) rotate(45deg);
    }

    label:has(> select:is([data-facet="chevron"], :not([data-facet]))[data-size="sm"]:open)::after {
        transform: translateY(0.125rem) rotate(225deg);
    }

    label:has(> select:is([data-facet="chevron"], :not([data-facet])):where([data-size="md"], :not([data-size])))::after {
        block-size:          calc(var(--md-font-size) * 0.75 * 1.06);
        border-bottom-width: var(--md-border-width);
        border-right-width:  var(--md-border-width);
        inline-size:         calc(var(--md-font-size) * 0.75 * 1.06);
        inset-block-end:     auto;
        inset-block-start:   calc((var(--md-box-height) - var(--md-font-size) * 0.75 * 1.06) / 2);
        inset-inline-end:    var(--md-border-radius);
        margin-block:        0;
        transform:           translateY(-0.1875rem) rotate(45deg);
    }

    label:has(> select:is([data-facet="chevron"], :not([data-facet])):where([data-size="md"], :not([data-size])):open)::after {
        transform: translateY(0.1875rem) rotate(225deg);
    }

    label:has(> select:is([data-facet="chevron"], :not([data-facet]))[data-size="lg"])::after {
        block-size:          calc(var(--lg-font-size) * 0.6 * 1.06);
        border-bottom-width: var(--lg-border-width);
        border-right-width:  var(--lg-border-width);
        inline-size:         calc(var(--lg-font-size) * 0.6 * 1.06);
        inset-block-end:     auto;
        inset-block-start:   calc((var(--lg-box-height) - var(--lg-font-size) * 0.6 * 1.06) / 2);
        inset-inline-end:    var(--lg-border-radius);
        margin-block:        0;
        transform:           translateY(-0.125rem) rotate(45deg);
    }

    label:has(> select:is([data-facet="chevron"], :not([data-facet]))[data-size="lg"]:open)::after {
        transform: translateY(0.125rem) rotate(225deg);
    }

    label:has(> select:is([data-facet="chevron"], :not([data-facet]))[data-size="xl"])::after {
        block-size:          calc(var(--xl-font-size) * 0.6 * 1.06);
        border-bottom-width: var(--xl-border-width);
        border-right-width:  var(--xl-border-width);
        inline-size:         calc(var(--xl-font-size) * 0.6 * 1.06);
        inset-block-end:     auto;
        inset-block-start:   calc((var(--xl-box-height) - var(--xl-font-size) * 0.6 * 1.06) / 2);
        inset-inline-end:    var(--xl-border-radius);
        margin-block:        0;
        transform:           translateY(-0.1875rem) rotate(45deg);
    }

    label:has(> select:is([data-facet="chevron"], :not([data-facet]))[data-size="xl"]:open)::after {
        transform: translateY(0.1875rem) rotate(225deg);
    }

    label:has(> select:is([data-facet="chevron"], :not([data-facet]))[data-size="2xl"])::after {
        block-size:          calc(var(--2xl-font-size) * 0.6 * 1.06);
        border-bottom-width: var(--2xl-border-width);
        border-right-width:  var(--2xl-border-width);
        inline-size:         calc(var(--2xl-font-size) * 0.6 * 1.06);
        inset-block-end:     auto;
        inset-block-start:   calc((var(--2xl-box-height) - var(--2xl-font-size) * 0.6 * 1.06) / 2);
        inset-inline-end:    var(--2xl-border-radius);
        margin-block:        0;
        transform:           translateY(-0.25rem) rotate(45deg);
    }

    label:has(> select:is([data-facet="chevron"], :not([data-facet]))[data-size="2xl"]:open)::after {
        transform: translateY(0.25rem) rotate(225deg);
    }

    /* === eye === */

    [data-facet="eye"]:where([data-inline-align="start"])::before,
    [data-facet="eye"]:not([data-inline-align="start"])::after {
        background-color: currentColor;
        clip-path: shape(
            from 100% 50%,
            curve to 50% 15.625% with 100% 50% / 81.25% 15.625%,
            curve to 0% 50% with 18.75% 15.625% / 0% 50%,
            curve to 50% 84.375% with 0% 50% / 18.75% 84.375%,
            curve to 100% 50% with 81.25% 84.375% / 100% 50%,
            close,
            move to 92.5% 50%,
            curve to 50% 79.219% with 92.5% 50% / 76.562% 79.219%,
            curve to 7.5% 50% with 23.438% 79.219% / 7.5% 50%,
            curve to 50% 20.781% with 7.5% 50% / 23.438% 20.781%,
            curve to 92.5% 50% with 76.562% 20.781% / 92.5% 50%,
            close,
            move to -10.828% -5.172%,
            line to 105.172% 110.828%,
            line to 110.828% 105.172%,
            line to -5.172% -10.828%,
            close
        );
    }

    [data-facet="eye"]:where(:checked, [aria-pressed="true"]):where([data-inline-align="start"])::before,
    [data-facet="eye"]:where(:checked, [aria-pressed="true"]):not([data-inline-align="start"])::after {
        clip-path: shape(
            from 100% 50%,
            curve to 50% 15.625% with 100% 50% / 81.25% 15.625%,
            curve to 0% 50% with 18.75% 15.625% / 0% 50%,
            curve to 50% 84.375% with 0% 50% / 18.75% 84.375%,
            curve to 100% 50% with 81.25% 84.375% / 100% 50%,
            close,
            move to 92.5% 50%,
            curve to 50% 79.219% with 92.5% 50% / 76.562% 79.219%,
            curve to 7.5% 50% with 23.438% 79.219% / 7.5% 50%,
            curve to 50% 20.781% with 7.5% 50% / 23.438% 20.781%,
            curve to 92.5% 50% with 76.562% 20.781% / 92.5% 50%,
            close,
            move to 71.875% 50%,
            arc to 28.125% 50% of 21.875% ccw,
            arc to 71.875% 50% of 21.875% ccw,
            close,
            move to 65.625% 50%,
            arc to 34.375% 50% of 15.625% cw,
            arc to 65.625% 50% of 15.625% cw,
            close
        );
    }

    /* --- size --- */

    [data-facet="eye"]:where([data-inline-align="start"])::before,
    [data-facet="eye"]:not([data-inline-align="start"])::after {
        block-size:  var(--line-height);
        inline-size: var(--line-height);
    }

    /* === reload, sync === */

    :where(
        [data-facet="reload"],
        [data-facet="sync"]
    ):where([data-inline-align="start"])::before,
    :where(
        [data-facet="reload"],
        [data-facet="sync"]
    ):not([data-inline-align="start"])::after {
        background-color: currentColor;
    }

    /* --- size --- */

    :where(
        [data-facet="reload"],
        [data-facet="sync"]
    ):where([data-inline-align="start"])::before,
    :where(
        [data-facet="reload"],
        [data-facet="sync"]
    ):not([data-inline-align="start"])::after {
        block-size:  var(--line-height);
        inline-size: var(--line-height);
    }

    /* === reload === */

    [data-facet="reload"]:where([data-inline-align="start"])::before,
    [data-facet="reload"]:not([data-inline-align="start"])::after {
        clip-path: shape(
            from 50% 18.75%,
            arc to 78.412% 36.962% of 31.25% 31.25% ccw large,
            arc to 84.087% 34.356% of 3.125% 3.125% cw small,
            arc to 50% 12.5% of 37.5% 37.5% cw large,
            line to 50% 3.338%,
            arc to 52.562% 2.138% of 1.562% 1.562% cw small,
            line to 67.312% 14.425%,
            curve to 67.312% 16.825% with 68.062% 15.05% / 68.062% 16.2%,
            line to 52.562% 29.113%,
            arc to 50% 27.913% of 1.562% 1.562% cw small,
            line to 50% 18.75%,
            close
        );
    }

    /* === sync === */

    [data-facet="sync"]:where([data-inline-align="start"])::before,
    [data-facet="sync"]:not([data-inline-align="start"])::after {
        clip-path: shape(
            from 50% 18.75%,
            curve to 25.894% 30.112% with 40.3% 18.75% / 31.625% 23.169%,
            arc to 21.075% 26.137% of 3.125% 3.125% cw large,
            arc to 86.981% 43.75% of 37.512% 37.512% cw small,
            line to 96.663% 43.75%,
            arc to 97.863% 46.312% of 1.562% 1.562% cw small,
            line to 85.575% 61.062%,
            arc to 83.175% 61.062% of 1.562% 1.562% cw small,
            line to 70.888% 46.312%,
            arc to 72.088% 43.75% of 1.562% 1.562% cw small,
            line to 80.625% 43.75%,
            arc to 50% 18.75% of 31.25% 31.25% ccw small,
            close,
            move to 19.375% 56.25%,
            arc to 74.106% 69.888% of 31.262% 31.262% ccw small,
            arc to 78.925% 73.862% of 3.125% 3.125% cw large,
            arc to 13.019% 56.25% of 37.512% 37.512% cw small,
            line to 3.75% 56.25%,
            line to 28.325% 56.25%,
            arc to 29.525% 58.812% of 1.562% 1.562% cw small,
            line to 17.238% 73.562%,
            arc to 14.838% 73.562% of 1.562% 1.562% cw small,
            line to 2.55% 58.812%,
            arc to 3.75% 56.25% of 1.562% 1.562% cw small,
            line to 19.375% 56.25%,
            close
        );
    }

    /* === reload, sync: busy === */

    :is(
        [data-facet="reload"],
        [data-facet="sync"]
    ):where(
        [aria-busy="true"],
        [aria-pressed="true"],
        :checked
    ):where([data-inline-align="start"])::before,
    :is(
        [data-facet="reload"],
        [data-facet="sync"]
    ):where(
        [aria-busy="true"],
        [aria-pressed="true"],
        :checked
    ):not([data-inline-align="start"])::after {
        background-color:    transparent;
        background-image:
            radial-gradient(circle closest-side, currentColor 95%, transparent 100%),
            radial-gradient(circle closest-side, currentColor 95%, transparent 100%),
        radial-gradient(circle closest-side, currentColor 95%, transparent 100%);
        background-position:
            13.077% 62.5%,
            50% 62.5%,
        86.923% 62.5%;
        background-repeat:   no-repeat;
        background-size:     18.75% 18.75%;
        clip-path:           none;
    }

    @media (prefers-reduced-motion: no-preference) {
        :is(
            [data-facet="reload"],
            [data-facet="sync"]
        ):where(
            [aria-busy="true"],
            [aria-pressed="true"],
            :checked
        ):where([data-inline-align="start"])::before,
        :is(
            [data-facet="reload"],
            [data-facet="sync"]
        ):where(
            [aria-busy="true"],
            [aria-pressed="true"],
            :checked
        ):not([data-inline-align="start"])::after {
            animation: sign-hop 1.5s ease infinite;
        }

        @keyframes sign-hop {
            0%, 40%, 100% {
                background-position:
                    13.077% 62.5%,
                    50% 62.5%,
                86.923% 62.5%;
            }
            10% {
                background-position:
                    13.077% 25%,
                    50% 62.5%,
                86.923% 62.5%;
            }
            20% {
                background-position:
                    13.077% 62.5%,
                    50% 25%,
                86.923% 62.5%;
            }
            30% {
                background-position:
                    13.077% 62.5%,
                    50% 62.5%,
                86.923% 25%;
            }
        }
    }
}