// styles for login section

#codeFont() {
    font-family: "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace;
}

#triangle(@hSize, @vSize, @color) {
    width: 0;
    height: 0;
    border-left: @hSize/2 solid transparent;
    border-right: @hSize/2 solid transparent;
    border-bottom: @vSize solid @color;
}

@st-green:     rgb(158, 205, 117);
@st-orangered: rgb(230, 97, 93);

.login-options {
	div.input {
		margin-bottom: 0.5em;
	}
    div.input.oauth-token {
        line-height: 1.5em;
    }
	label {
		#codeFont();
		font-size: 0.8em;
		display: inline-block;
		margin-right: 0.25em;
		min-width: 10em;
		&::after {
			content: ":";
		}
	}
	input[type=text] {
		width: 18em;
	}

    input.oauth-login-button {
        background-color: @st-green;
        color: #ffffff;
        padding-left: 1em;
        padding-right: 1em;
    	margin: 8px 0;
    	border: none;
    	border-radius: 4px;
    	cursor: pointer;
        line-height: inherit;
        &:hover {
            background-color: mix(@st-green, white, 50);
        }
    }
}

.oauth-bearer-token-wrapper {

    @leftPad: 0.5em;
    @rightPad: 2.2em;

	display: inline-block;
	width: 18em;
    padding-right: @rightPad;
	white-space: nowrap;

	input[type=text] {
		padding-right: @rightPad;
        padding-left: @leftPad;
		vertical-align: middle;
		width: 100%;
        line-height: inherit;
	}

	.bearer-token-status-indicator {

		font-size: 0.8em;
		color: #ffffff;
		display: inline-block;
		vertical-align: middle;

		line-height: 1em;
		width: 1em;
		height: 1em;
		border-radius: 100%;
		position: relative;
		left: -1.8em;

        .details {
            @rightOffset: 20px;
            @borderWidth: 1px;
            position: absolute;
            top: 180%;
            right: 50%;
            margin-right: -@rightOffset;
            padding: 10px;
            min-width: 40px;
            max-width: 400px;
            background: #ffffff;
            border: @borderWidth solid #444444;
            display: none;
            white-space: pre;
            border-radius: 4px;
            color: #444444;
            #codeFont();
            &::before {
                #triangle(12px, 14px, #444444);
                position: absolute;
                right: @rightOffset - 12px/2 - @borderWidth;
                top: -14px;
                content: "";
                z-index: 1;
            }
            &::after {
                #triangle(10px, 13px, #ffffff);
                position: absolute;
                right: @rightOffset - 10px/2 - @borderWidth;
                top: -13px;
                content: "";
                z-index: 2;
            }
        }

		&::after {
			display: inline-block;
			font-weight: bold;
			text-align: center;
			vertical-align: middle;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: inline-block;
		}

		background-color: mix(#0f6ab4, #ffffff, 50);
		&::after {
			content: "-";
		}
		&.no-good {
            @col: @st-orangered;
			background-color: @col;
			&::after {
				content: "⚠";
			}
            .details {
                border-color: @col;
            }
            .details::before {
                border-bottom-color: @col;
            }
		}
		&.ok {
            @col: @st-green;
			background-color: @col;
			&::after {
				content: "✓";
			}
            .details {
                border-color: @col;
            }
            .details::before {
                border-bottom-color: @col;
            }
		}
        &.ok, &.no-good {
            &:hover .details,
            &.active .details {
                display: block;
            }
        }
	}
}