/*------------------------------------*\
    $BACK TO TOP
\*------------------------------------*/

@use 'sass:color';
@use "../../base/helpers";
@use "../../base/settings";

.ds_back-to-top {
    display: none;
}

@media only screen {
    /// [1] -1px compensates for the height of a visually-hidden element. This prevents the back
    ///     to top element causing the document to always be at least 1px taller than the viewport
    ///     and adding a scroll bar
    /// [2] 0.125rem (2px) is additional padding between the solid background area and the link text
    /// [3] fallback for older browsers
    /// [4] this is the button's height plus 0.5rem spacing
    .ds_back-to-top {
        bottom: 0;
        display: block;
        pointer-events: none;
        position: absolute;
        right: 0.5rem;
        top: calc(100vh - 0.0625rem); /// [1]
        z-index: 1;

        &__button {
            @include helpers.ds_link--block;
            @include helpers.ds_small-size;

            background-color: rgba(color.channel(settings.$ds_colour__background--primary, "red", $space: rgb), color.channel(settings.$ds_colour__background--primary, "green", $space: rgb), color.channel(settings.$ds_colour__background--primary, "blue", $space: rgb), 0.4);
            font-weight: settings.$bold;
            margin: 0;
            min-width: 7.5rem;
            pointer-events: all;
            padding: 0.5rem calc(2rem + 0.125rem) 0.5rem calc(1rem + 0.125rem); /// [2]
            position: fixed; /// [3]
            position: sticky;
            right: 0.5rem;
            top: calc(100vh - 3.5rem); /// [4]

            &::before {
                content: '';
                position: absolute;
                left: 1rem;
                right: 2rem;
                top: 0.5rem;
                bottom: 0.5rem;
                z-index: -1;
            }
        }

        &__icon {
            height: 1.5rem;
            min-height: 1.5rem;
            position: absolute;
            right: 0.5rem;
            top: 0.5rem;
        }

        &__button::before,
        &__icon {
            background-color: settings.$ds_colour__background--primary;
            transition: background-color 0.2s;

            @include helpers.ds_media-query-high-contrast {
                background-color: canvas;
            }
        }

        &__button:hover::before,
        &__button:hover &__icon,
        &__button:focus::before,
        &__button:focus &__icon {
            background-color: transparent;
        }

        &__button:focus::before,
        &__button:focus &__icon {
            transition-duration: 0s;
        }
    }
}

.ds_back-to-top--clamped {
    top: auto !important;
}

.ds_back-to-top--hidden:not(:focus-within) {
    @include helpers.ds_visually-hidden;
}