//
// Static resources
//
$backtotop-button-size:  48px;

.back-to-top {
    visibility: hidden;
    width: $backtotop-button-size;
    height: $backtotop-button-size;
    padding: spacing(xxs, -2) spacing(xxs) spacing(xxs);
    opacity: 0;
    @include translate(0, ($backtotop-button-size / 2));
    @include transition(opacity .3s, transform .3s, -webkit-transform .3s);

    // Added by Bootstrap Affix when scrolling
    &.affix {
        visibility: visible;
        opacity: 1;
        z-index: $zindex-navbar-fixed; // same level as a fixed nav bar
        right: spacing(xs);
        bottom: spacing(xxs);
        @include translate(0, 0);
    }

    [class*="glyph-"] {
        font-size: ($backtotop-button-size / 2);
    }

    //
    // Colors
    //
    &,
    &:focus {
        color: $color-vivid-low;
        background: $color-dim-mid;
    }

    &:hover {
        color: $color-vivid-high;
        background: $color-neutral-mid;
    }

    // On dark surface
    &.theme-alt {
        &,
        &:focus {
            color: $color-vivid-low-alt;
            background: $color-dim-mid-alt;
        }

        &:hover {
            color: $color-vivid-high-alt;
            background: $color-neutral-mid-alt;
        }
    }
}