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

/*  Usage:

    <a></a>
    <button></button>
    <input type="button">
    <input type="submit">
    <input type="reset">
    <input type="file">
    <summary></summary>
*/
@layer css.button {

    :where(button, [type="button"], [type="submit"], [type="reset"]) {
        font-weight: bold;
    }

    summary:not([data-surround]) {
        display: block;
    }

    /* --- visited --- */

    a:visited:not([data-surround="fill"], :hover, :focus-visible, [aria-disabled="true"]) {
        color: var(--color-visited);
    }

    @media (forced-colors: active) {
        a:visited:not([data-surround="fill"], :hover, :focus-visible, [aria-disabled="true"]) {
            color: VisitedText;
        }
    }

    /* === input file === */

    input[type="file"][data-surround] {
        background-color: transparent;
        border:           none;
        color:            inherit;
        min-height:       0;
        padding:          0;
    }

    input[type="file"][data-surround]:where(:disabled, [aria-disabled="true"]) {
        color: var(--color-ink-mix);
    }

    input[type="file"]::file-selector-button {
        border-style:   solid;
        cursor:         pointer;
        display:        inline flow-root;
        font-weight:    bold;
        vertical-align: middle;
    }

    input[type="file"]:where(
        [data-surround="fill"],
        :not([data-surround])
    )::file-selector-button {
        background-color: var(--color-emphasis-ink);
        border-color:     transparent;
        color:            var(--color-paper);
    }

    input[type="file"]:where([data-surround="outline"])::file-selector-button {
        background-color: var(--color-paper);
        border-color:     currentColor;
        color:            var(--color-emphasis-ink);
    }

    input[type="file"]:where([data-surround="transparent"])::file-selector-button {
        background-color: transparent;
        border-color:     transparent;
        color:            inherit;
    }

    /* --- size --- */

    input[type="file"]::file-selector-button {
        border-radius:     var(--border-radius);
        border-width:      var(--border-width);
        margin-inline-end: var(--border-radius);
        min-height:        var(--box-height);
        padding-block:     calc(((var(--box-height) - var(--line-height)) / 2) - var(--border-width));
        padding-inline:    var(--border-radius);
    }

    /* --- hover --- */

    @media (hover: hover) {
        input[type="file"]::file-selector-button:hover {
            text-decoration-color:     currentColor;
            text-decoration-line:      underline;
            text-decoration-thickness: max(0.1875rem, 0.12em);
            text-underline-offset:     0.3em;
        }
    }

    /* --- active --- */

    input[type="file"]:where(
        [data-surround="fill"],
        :not([data-surround])
    )::file-selector-button:active {
        background-color: var(--color-emphasis-ink-mix);
        border-color:     transparent;
    }

    input[type="file"]:where([data-surround="outline"])::file-selector-button:active {
        background-color: var(--color-paper-mix);
        border-color:     var(--color-emphasis-ink-mix);
        color:            var(--color-emphasis-ink);
    }

    /* --- invalid --- */

    input[type="file"]:where(:user-invalid, [aria-invalid="true"])::file-selector-button {
        border-color: var(--color-error);
    }

    /* --- disabled --- */

    input[type="file"]:where(
        [data-surround="outline"],
        [data-surround="transparent"]
    ):where(:disabled, [aria-disabled="true"])::file-selector-button {
        border-color: var(--color-ink-mix);
        color:        var(--color-ink-mix);
    }

    input[type="file"]:where(
        [data-surround="fill"],
        :not([data-surround])
    ):where(:disabled, [aria-disabled="true"])::file-selector-button {
        background-color: var(--color-ink-mix);
        border-color:     transparent;
        color:            var(--color-paper);
    }

    /* --- forced-color --- */

    @media (forced-colors: active) {
        input[type="file"]::file-selector-button {
            background-color: ButtonFace;
            border-color:     ButtonBorder;
            color:            ButtonText;
        }

        input[type="file"]::file-selector-button:active {
            color: ActiveText;
        }

        input[type="file"]:where(:user-invalid, [aria-invalid="true"])::file-selector-button {
            border-color: Mark;
        }

        input[type="file"]:where(:disabled, [aria-disabled="true"])::file-selector-button {
            border-color: GrayText;
            color:        GrayText;
        }

        input[type="file"][data-surround]:where(:disabled, [aria-disabled="true"]) {
            color: GrayText;
        }
    }
}