@layer components {
    .back-to-top {
        position: fixed;
        bottom: var(--back-to-top-offset-y, 2rem);
        z-index: var(--z-back-to-top);
        pointer-events: none;
    }

    .back-to-top.is-visible {
        pointer-events: auto;
    }

    .back-to-top.anim--fade,
    .back-to-top.anim--slide-up,
    .back-to-top.anim--slide-down {
        transition:
            opacity var(--anim-fade-out-speed, var(--anim-fade-speed, var(--anim-speed, 200ms)))
                    var(--anim-fade-out-easing, var(--anim-fade-easing, var(--anim-easing, ease))),
            transform var(--anim-slide-out-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)))
                      var(--anim-slide-out-easing, var(--anim-slide-easing, var(--anim-easing, ease))),
            filter var(--anim-blur-out-speed, var(--anim-blur-speed, var(--anim-speed, 200ms)))
                   var(--anim-blur-out-easing, var(--anim-blur-easing, var(--anim-easing, ease))),
            visibility var(--anim-speed, 200ms),
            background-color var(--transition-speed) ease,
            color var(--transition-speed) ease,
            border-color var(--transition-speed) ease,
            box-shadow var(--transition-speed) ease;
    }

    .back-to-top.is-visible.anim--fade,
    .back-to-top.is-visible.anim--slide-up,
    .back-to-top.is-visible.anim--slide-down {
        transition:
            opacity var(--anim-fade-in-speed, var(--anim-fade-speed, var(--anim-speed, 200ms)))
                    var(--anim-fade-in-easing, var(--anim-fade-easing, var(--anim-easing, ease))),
            transform var(--anim-slide-in-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)))
                      var(--anim-slide-in-easing, var(--anim-slide-easing, var(--anim-easing, ease))),
            filter var(--anim-blur-in-speed, var(--anim-blur-speed, var(--anim-speed, 200ms)))
                   var(--anim-blur-in-easing, var(--anim-blur-easing, var(--anim-easing, ease))),
            visibility var(--anim-speed, 200ms),
            background-color var(--transition-speed) ease,
            color var(--transition-speed) ease,
            border-color var(--transition-speed) ease,
            box-shadow var(--transition-speed) ease;
    }

    /* Position */
    .back-to-top--right {
        right: var(--back-to-top-offset-x, 2rem);
    }

    .back-to-top--left {
        left: var(--back-to-top-offset-x, 2rem);
    }

    /* Radius override — back-to-top defaults to full */
    .back-to-top {
        --_radius: var(--back-to-top-radius, var(--radius-full));
    }

    .back-to-top.button--bordered {
        --button-bg: var(--color-background);
    }

    /* With label (always visible) — expand to auto width */
    .back-to-top:not(.back-to-top--label-reveal):has(.back-to-top__label) {
        width: auto;
        padding: 0 var(--spacing-md);
    }

    /* Label reveal — icon-only at rest, expands on hover (JS sets width) */
    /* Double class for specificity — must beat .back-to-top.anim--fade (0,2,0) to keep width/gap transitions */
    .back-to-top.back-to-top--label-reveal {
        justify-content: center;
        gap: 0;
        overflow: hidden;
        transition:
            opacity var(--anim-fade-out-speed, var(--anim-fade-speed, var(--anim-speed, 200ms)))
                    var(--anim-fade-out-easing, var(--anim-fade-easing, var(--anim-easing, ease))),
            transform var(--anim-slide-out-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)))
                      var(--anim-slide-out-easing, var(--anim-slide-easing, var(--anim-easing, ease))),
            filter var(--anim-blur-out-speed, var(--anim-blur-speed, var(--anim-speed, 200ms)))
                   var(--anim-blur-out-easing, var(--anim-blur-easing, var(--anim-easing, ease))),
            visibility var(--anim-speed, 200ms),
            width var(--back-to-top-expand, var(--transition-speed)) ease,
            gap var(--back-to-top-expand, var(--transition-speed)) ease,
            background-color var(--transition-speed) ease,
            color var(--transition-speed) ease,
            box-shadow var(--transition-speed) ease;
    }

    .back-to-top.back-to-top--label-reveal.is-visible {
        transition:
            opacity var(--anim-fade-in-speed, var(--anim-fade-speed, var(--anim-speed, 200ms)))
                    var(--anim-fade-in-easing, var(--anim-fade-easing, var(--anim-easing, ease))),
            transform var(--anim-slide-in-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)))
                      var(--anim-slide-in-easing, var(--anim-slide-easing, var(--anim-easing, ease))),
            filter var(--anim-blur-in-speed, var(--anim-blur-speed, var(--anim-speed, 200ms)))
                   var(--anim-blur-in-easing, var(--anim-blur-easing, var(--anim-easing, ease))),
            visibility var(--anim-speed, 200ms),
            width var(--back-to-top-expand, var(--transition-speed)) ease,
            gap var(--back-to-top-expand, var(--transition-speed)) ease,
            background-color var(--transition-speed) ease,
            color var(--transition-speed) ease,
            box-shadow var(--transition-speed) ease;
    }

    .back-to-top--label-reveal.is-expanded {
        gap: var(--spacing-xs);
    }

    .back-to-top--label-reveal .back-to-top__label {
        width: 0;
        overflow: hidden;
        opacity: 0;
        white-space: nowrap;
        transition:
            width var(--back-to-top-expand, var(--transition-speed)) ease,
            opacity var(--back-to-top-expand, var(--transition-speed)) ease;
    }

    .back-to-top--label-reveal .back-to-top__label.is-revealed {
        opacity: 1;
    }

    .back-to-top__label {
        font-family: var(--font-button);
        font-weight: var(--font-weight-button);
        line-height: var(--_size);
        white-space: nowrap;
    }

    .back-to-top--icon-right {
        flex-direction: row-reverse;
    }

    .back-to-top--icon-right.is-expanded {
        justify-content: center;
    }

}