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

@layer css.data_size {

    /* === size === */

    [data-size="xs"] {
        --border-radius:  var(--xs-border-radius);
        --border-width:   var(--xs-border-width);
        --box-height:     var(--xs-box-height);
        --font-size:      var(--xs-font-size);
        --letter-spacing: var(--xs-letter-spacing);
        --line-height:    var(--xs-line-height);
    }

    [data-size="sm"] {
        --border-radius:  var(--sm-border-radius);
        --border-width:   var(--sm-border-width);
        --box-height:     var(--sm-box-height);
        --font-size:      var(--sm-font-size);
        --letter-spacing: var(--sm-letter-spacing);
        --line-height:    var(--sm-line-height);
    }

    [data-size="md"] {
        --border-radius:  var(--md-border-radius);
        --border-width:   var(--md-border-width);
        --box-height:     var(--md-box-height);
        --font-size:      var(--md-font-size);
        --letter-spacing: var(--md-letter-spacing);
        --line-height:    var(--md-line-height);
    }

    [data-size="lg"] {
        --border-radius:  var(--lg-border-radius);
        --border-width:   var(--lg-border-width);
        --box-height:     var(--lg-box-height);
        --font-size:      var(--lg-font-size);
        --letter-spacing: var(--lg-letter-spacing);
        --line-height:    var(--lg-line-height);
    }

    [data-size="xl"] {
        --border-radius:  var(--xl-border-radius);
        --border-width:   var(--xl-border-width);
        --box-height:     var(--xl-box-height);
        --font-size:      var(--xl-font-size);
        --letter-spacing: var(--xl-letter-spacing);
        --line-height:    var(--xl-line-height);
    }

    [data-size="2xl"] {
        --border-radius:  var(--2xl-border-radius);
        --border-width:   var(--2xl-border-width);
        --box-height:     var(--2xl-box-height);
        --font-size:      var(--2xl-font-size);
        --letter-spacing: var(--2xl-letter-spacing);
        --line-height:    var(--2xl-line-height);
    }

    h3:not([data-size]) {
        --border-radius:  var(--lg-border-radius);
        --border-width:   var(--lg-border-width);
        --box-height:     var(--lg-box-height);
        --font-size:      var(--lg-font-size);
        --letter-spacing: var(--lg-letter-spacing);
        --line-height:    var(--lg-line-height);
    }

    h2:not([data-size]) {
        --border-radius:  var(--xl-border-radius);
        --border-width:   var(--xl-border-width);
        --box-height:     var(--xl-box-height);
        --font-size:      var(--xl-font-size);
        --letter-spacing: var(--xl-letter-spacing);
        --line-height:    var(--xl-line-height);
    }

    h1:not([data-size]) {
        --border-radius:  var(--2xl-border-radius);
        --border-width:   var(--2xl-border-width);
        --box-height:     var(--2xl-box-height);
        --font-size:      var(--2xl-font-size);
        --letter-spacing: var(--2xl-letter-spacing);
        --line-height:    var(--2xl-line-height);
    }

    /* === common for elements whether inline flow or not, focusable or not. === */

    :where([data-size], :not(html, [data-size] *)) {
        font-size:      var(--font-size);
        letter-spacing: var(--letter-spacing);
        line-height:    var(--line-height);
    }

    /* === surround style without border === */

    :where(
        [data-surround="transparent"],
        :where([role="menu"], [role="listbox"]) > *,
        :where(dl, dl > div) > :where(dt, dd)
    ) {
        min-height:     var(--box-height);
        padding-block:  calc((var(--box-height) - var(--line-height)) / 2);
        padding-inline: var(--border-radius);
    }

    /* === surround style with border === */

    :where(
        [data-surround="fill"],
        [data-surround="outline"],
        fieldset[data-group="inline"] > label:has(> input[type="radio"]),
        :is(
            button,
            [type="button"],
            [type="submit"],
            [type="reset"],
            input:is(
                [type="text"],
                [type="email"],
                [type="password"],
                [type="search"],
                [type="url"],
                [type="tel"],
                [type="number"],
                [type="date"],
                [type="time"],
                [type="datetime-local"],
                [type="month"],
                [type="week"]
            ),
            select,
            summary,
            textarea,
            [data-type="toast"] > *,
            section[data-type="error-summary"],
            p[data-type="error"]
        ):not([data-surround])
    ) {
        border-radius:  var(--border-radius);
        border-width:   var(--border-width);
        min-height:     var(--box-height);
        padding-block:  calc(((var(--box-height) - var(--line-height)) / 2) - var(--border-width));
        padding-inline: var(--border-radius);
    }

    /* === common for elements inline flow and focusable === */

    a:not([data-surround="fill"], [data-surround="outline"], [data-surround="transparent"]) {
        &:focus-visible {
            outline-offset: calc(((var(--box-height) - var(--line-height)) / 2) - var(--border-width));
            outline-width:  var(--border-width);
        }
    }

    /* === surround transparent style: focus === */

    :where(
        [data-surround="transparent"],
        tr:not([data-style], [data-surround]),
        :where([role="menu"], [role="listbox"]) > [role]:where(a, button),
        :where([role="menu"], [role="listbox"]) > label:has(> input[role])
    ) {
        &:is(:focus-visible, :has(:checked)) {
            outline-offset: calc(var(--border-width) * -1);
        }
    }

    /* --- hover, active --- */

    :where(
        :where(
            a:any-link,
            button,
            [type="button"],
            [type="submit"],
            [type="reset"],
            summary
        )[data-surround="transparent"],
        :where([role="menu"], [role="listbox"]) > [role]:where(a, button),
        :where([role="menu"], [role="listbox"]) > label:has(> input[role]:not(:disabled, [aria-disabled="true"])),
        [popovertarget]:not([data-surround])
    ) {
        &:not(:focus-visible) {
            outline-offset: calc(var(--border-width) * -1);
            outline-width:  var(--border-width);
        }
    }
}