.app-auth-component {
    display       : flex;
    flex-direction: column;
    height        : 100%;
    overflow      : hidden;

    &.top {
        >.auth-navbar {
            background-color: #181e22;
            border-bottom   : 1px solid #3a87f7;
            padding         : 2px;
            padding-bottom  : 0;

            .tabs {
                display: flex;

                &-item {
                    height       : 32px;
                    line-height  : 32px;
                    min-width    : 120px;
                    color        : #88a0ae;
                    text-align   : center;
                    cursor       : pointer;
                    border-radius: 5px 5px 0px 0px;
                    background   : linear-gradient(0deg, #262e35 0%, #283139 100%);
                    padding      : 0 12px;

                    &:not(:first-child) {
                        margin-left: 3px;
                    }

                    &.is-active {
                        color     : #fff;
                        background: linear-gradient(0deg, #26487c 0%, #29538c 100%);
                    }
                }
            }
        }
    }

    &.bottom {
        flex-flow: column-reverse;

        >.auth-navbar {
            padding: 2px;

            .tabs {
                display: flex;

                &-item {
                    height     : 26px;
                    line-height: 26px;
                    min-width  : 120px;
                    color      : #88a0ae;
                    text-align : center;
                    cursor     : pointer;
                    background : linear-gradient(0deg, #262e35 0%, #283139 100%);
                    padding    : 0 12px;

                    &:not(:first-child) {
                        margin-left: 3px;
                    }

                    &.is-active {
                        color     : #fff;
                        background: linear-gradient(0deg, #26487c 0%, #29538c 100%);
                    }
                }
            }
        }
    }

    &.left {
        flex-direction: row;
    }

    &.right {
        flex-direction : row;
        flex-flow      : row-reverse;
        justify-content: left;
    }

    .auth-navbar {
        display        : flex;
        align-items    : center;
        justify-content: space-between;
    }

    .auth-container {
        flex      : 1;
        overflow-y: auto;
    }
}