@prefix: graphjs;

@{prefix}-auth-state.@{prefix}-root {
    display: inline-block;
    box-sizing: content-box !important;
    height: 3.5em;
    line-height: 3.5em;
    border: none;
    &.@{prefix}-box {
        // ThemeOption: background-color: @background-color-contrast;
    }
    .@{prefix}-content {
        height: inherit;
        .no-padding !important;
        .bold-font;
        font-size: 1.2em;
        line-height: inherit;
        vertical-align: unset;
        background-color: transparent;
        a {
            float: left;
            // ThemeOption: color: @primary-color;
            border-right-width: 1px;
            border-right-style: dotted;
            // ThemeOption: border-right-color: fade(@primary-color, 20%);
            background-color: transparent;
            .disable-selection;
            &:hover {
                background-color: fade(black, 3.5%);
            }
            &:last-of-type {
                border-right-width: 0 !important;
            }
            &.@{prefix}-active {
                background-color: fade(black, 5%);
            }
        }
        .@{prefix}-not-logged {
            height: inherit;
            line-height: inherit;
            text-align: center;
            a {
                display: inline-block;
                padding: 0 1em;
                .bold-font;
                line-height: inherit;
            }
        }
        .@{prefix}-logged {
            height: inherit;
            line-height: inherit;
            a {
                display: inline-block;
                line-height: inherit;
                .transition(background-color .35s ease);
            }
            .@{prefix}-idle {
                padding: 0 1em;
            }
            .@{prefix}-details {
                float: left;
                height: inherit;
                padding: .35em;
                padding-right: 0;
                & > * {
                    float: left;
                    pointer-events: none;
                }
                img {
                    width: auto;
                    height: 100%;
                    .border-radius(@border-radius-medium);
                }
                span {
                    position: relative;
                    height: 2.3em;
                    max-width: 10em;
                    padding: 0 .75em;
                    // ThemeOption: color: @primary-color;
                    .bold-font;
                    line-height: 2.3em;
                    .single-line-text;
                    vertical-align: middle;
                }
            }
            .@{prefix}-exit {
                float: right;
                width: auto;
                text-align: center;
                svg {
                    display: inline-block;
                    position: relative;
                    top: -1px;
                    width: auto;
                    height: 1em;
                    padding: 0 1em;
                    vertical-align: middle;
                    path {
                        // ThemeOption: fill: fade(@primary-color, 50%);
                        .transition(fill .35s ease);
                    }
                }
            }
        }
    }
}