/*@example <button is="icon-button" has="add-icon"></button>*/
@layer component {
    :root {
        --icon-button-ghost-border: var(--button-ghost-border);
        --icon-button-border-radius:  var(--button-border-radius);
    }
    [is=icon-button] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--icon-button-size, var(--control-size));
        height: var(--icon-button-size, var(--control-size));
        padding: 0;
        border-radius: var(--icon-button-border-radius, 50%);
        border: var(--icon-button-border, none);
        background: var(--icon-button-background, var(--control-background));
        color: var(--icon-button-color, var(--control-color));
        cursor: pointer;
        position: relative;

        &:disabled {
            opacity: .5;
            cursor: not-allowed;
        }

        &[has~=ghost-style] {
            background: var(--icon-button-ghost-background, transparent);
            border: var(--icon-button-ghost-border, 1px solid var(--background-lighter-color));
            color: var(--icon-button-ghost-color, var(--foreground-color));
        }

        &[has~=no-background] {
            background: var(--icon-button-no-background, transparent);
            border: var(--icon-button-no-background-border, none);
        }

        &[has~=square-layout] {
            border-radius: var(--icon-button-square-border-radius, var(--control-border-radius));
        }

        &[has~=small-size] {
            width: var(--icon-button-small-size, var(--control-small-size));
            height: var(--icon-button-small-size, var(--control-small-size));
        }

        &[has~=ai-style] {
            --ai-border-width: 2px;
            --ai-rainbow-gradient: linear-gradient(90deg, #ff4d4d, #ffb84d, #ffff4d, #4dff88, #4dd2ff, #7a5cff, #ff4de1, #ff4d4d);
            --ai-rainbow-size: 300% 300%;
            --ai-rainbow-duration: 6s;
            border: var(--icon-button-ai-border, none);
            background: var(--icon-button-ai-background, var(--background-darker-color));
            isolation: isolate;

            &::before {
                position: relative;
                z-index: 1;
                color: var(--icon-button-ai-color, var(--foreground-color));
            }

            &::after {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: inherit;
                padding: var(--ai-border-width);
                background: var(--ai-rainbow-gradient);
                background-size: var(--ai-rainbow-size);
                background-position: 0% 50%;
                animation: ai-rainbow-shift var(--ai-rainbow-duration) linear infinite;
                -webkit-mask:
                    linear-gradient(#fff 0 0) content-box,
                    linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor;
                mask:
                    linear-gradient(#fff 0 0) content-box,
                    linear-gradient(#fff 0 0);
                mask-composite: exclude;
                pointer-events: none;
            }

            @supports ((-webkit-background-clip: text) or (background-clip: text)) {
                &::before {
                    background-image: var(--ai-rainbow-gradient);
                    background-size: var(--ai-rainbow-size);
                    background-position: 0% 50%;
                    -webkit-background-clip: text;
                    background-clip: text;
                    color: transparent;
                    animation: ai-rainbow-shift var(--ai-rainbow-duration) linear infinite;
                }
            }
        }

        &[now~=loading] {
            position: relative;
            color: transparent;
            pointer-events: none;

            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: var(--icon-button-loading-spinner-size, var(--size-m));
                height: var(--icon-button-loading-spinner-size, var(--size-m));
                margin-top: calc(-1 * var(--icon-button-loading-spinner-size, var(--size-m)) / 2);
                margin-left: calc(-1 * var(--icon-button-loading-spinner-size, var(--size-m)) / 2);
                border: var(--icon-button-loading-spinner-border, var(--border));
                border-radius: 50%;
                border-top-color: var(--icon-button-loading-spinner-color, var(--call-to-action-color));
                animation: spin 1s linear infinite;
            }
        }
    }

    @keyframes ai-rainbow-shift {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
}