@use "../variables" as vars;
@use "../functions" as func;
@use "../mixins" as mixins;

.button.back-to-top-button {
    box-shadow: func.shadow(vars.$back-to-top-button-shadow);
    width: auto;
    background-color: func.color(vars.$back-to-top-button-background);
    position: fixed;
    inset: auto func.units(5) func.units(5) auto;
    z-index: vars.$zindex-back-to-top;

    &.button-tertiary {
        background-color: func.color(vars.$back-to-top-button-background);

        &:hover {
            background-color: func.color(vars.$back-to-top-button-background);
        }
    }

    &.footer-sticky {
        position: absolute;
        bottom: auto;
        top: auto;
        margin-top: func.units(4);
        z-index: auto;
    }

    @include mixins.media-breakpoint-down(md) {
        .icon-svg {
            margin-right: func.units(0);
        }
    }
}