/*--------------------------------------------------
    [Back To Top Theme Button]
----------------------------------------------------*/

.back-to-top {
    @include position(fixed, $bottom: 10px, $right: 10px);
    display: inline-block;
    z-index: 9;
    @include size(40px);
    @include font($size: 11px, $weight: 400);
    color: $color-white;
    text-align: center;
    line-height: 3;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: $color-heading;
    @include border-radius(3px);
    visibility: hidden;
    opacity: 0;
    padding: 5px;
    @include translate3d(0,50px,0);
    @include cubic-transition($delay: 0, $duration: 300ms, $property: (all));

    &:hover {
        color: $color-white;
        @include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
    }

    &:focus,
    &:hover {
        text-decoration: none;
    }
}

/* The Button Becomes Visible */
.back-to-top {
    &.back-to-top-is-visible {
        visibility: visible;
        opacity: .6;
        @include translate3d(0,0,0);
        @include cubic-transition($delay: 0, $duration: 300ms, $property: (all));

        &:hover {
            opacity: 1;
            @include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
        }
    }
}

/* If the user keeps scrolling down, the button is out of focus and becomes less visible */
.back-to-top {
    &.back-to-top-fade-out {
        opacity: .4;

        &:hover {
            opacity: 1;
            @include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
        }
    }
}