@import '_vars';
@import '_mixins';

.navbar {
    @include box-shadow(0, 3px, 5px, .13);
    display: block;
}

.navbar-brand {
    width: $size-sidebar-width;
    background: $color-theme-blue-dark;
    padding-top: 0;
    padding-bottom: 0;
    cursor: pointer;
    margin-top: -.5rem;
    margin-left: -1rem;
    margin-right: 2rem;
    font-size: 1.8rem;
    height: $size-navbar-height;
    text-decoration: none;
    text-align: center;
    line-height: $size-navbar-height;
    float: left;
}

$support-icon-size: 50px;
$support-text-size: 200px;

.support {
    &-button {
        & {
            @include fixed(50%, -$support-text-size, auto, auto);
            @include transition(transform .3s ease);
            background: $color-theme-blue;
            font-size: .9rem;
            font-weight: bold;
            height: $support-icon-size;
            line-break: normal;
            line-height: $support-icon-size - 6px;
            z-index: 100000000;
        }

        &:hover {
            & {
                @include translate(-$support-text-size, 0);
                text-decoration: none;
            }

            .support-icon {
                background: $color-theme-blue-dark;
            }
        }
    }

    &-icon,
    &-text {
        cursor: pointer;
        color: $color-dark-foreground;
        text-align: center;
    }

    &-text {
        width: $support-text-size;
    }

    &-icon {
        @include transition(background-color .4s ease);
        background: $color-theme-blue;
        line-height: $support-icon-size;
        font-size: 1.5rem;
        font-weight: normal;
        width: $support-icon-size;
    }
}

.loader {
    @include absolute(12px, auto, auto, 40px);
}