//
// Variables
// --------------------------------------------------
$scrolltop-space:       20px !default;
$scrolltop-bg:          $gray-700 !default;
$scrolltop-color:       #ffffff !default;
$scrolltop-hover-bg:    $primary !default;
$scrolltop-hover-color: #ffffff !default;

//
// Scrolltop
// --------------------------------------------------
.scroll-top {
    --scrolltop-zindex: #{$zindex-sticky};
    --scrolltop-space: #{$scrolltop-space};
    --scrolltop-bg: #{$scrolltop-bg};
    --scrolltop-color: #{$scrolltop-color};
    --scrolltop-hover-bg: #{$scrolltop-hover-bg};
    --scrolltop-hover-color: #{$scrolltop-hover-color};
    overflow: hidden;
    z-index: var(--scrolltop-zindex);
    background-color: var(--scrolltop-bg);
    color: var(--scrolltop-color);
    bottom: var(--scrolltop-space);
    right: var(--scrolltop-space);
    position: fixed;
    opacity: 0;
    width: 3em;
    height: 3em;
    @include transition(all .3s ease-in-out);
    @include border-radius(4px);
    &:active,
    &:focus,
    &:hover {
        color: var(--scrolltop-hover-color);
        background-color: var(--scrolltop-hover-bg);
    }
    .scroll-top-icon {
        transform: rotate(45deg);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        &:before {
            content: '';
            position: absolute;
            height: 30%;
            width: 30%;
            border-top: 1px solid;
            border-left: 1px solid;
            top: 55%;
            left: 55%;
            transform: translate(-50%, -50%);
        }
    }
    &.scroll-top-visible {
        opacity: 1;
    }
}