@import "ibm-design-colors/_ibm-colors";

.connection-signon-view {
	max-height: 130px;

	.connection-signon-content {
		margin-bottom: 10px;
	}

	.connection-signon-options-section-container {
		max-height: 100px;
		overflow-y: auto;

		.connection-signon-options-section {
			padding-top: 10px;
			padding-left: 10px;
			flex-direction: column;
			display: flex;

			.connection-signon-option {
				display: inline-flex;
				margin-bottom: 4px;
				align-items: center;

				&.select {
					.connection-signon-radio {
						border: thin solid color('blue', 60);

						.connection-signon-radio-circle {
							background-color: color('blue', 60) !important;
						}
					}
				}

				.connection-signon-radio {
					width: 16px;
					height: 16px;
					background: transparent;
					border: thin solid color('blue', 60);
					border-radius: 50px;
					display: flex;
					align-items: center;
					justify-content: center;

					&:hover {
						border: thin solid color('blue', 60);
					}

					.connection-signon-radio-circle {
						width: 100%;
						height: 100%;
						border-radius: 50px;
						transform: scale(0.8);
						background: transparent;

						&:hover {
							background-color: color('blue', 60);
						}
					}
				}

				.connection-signon-value {
					margin-left: 10px;
					user-select: none;
				}
			}
		}
	}
}

.highcontrast {
	.connection-signon-view .connection-signon-options-section-container .connection-signon-options-section .connection-signon-option {
				&.select {
					.connection-signon-radio {
						border-width: 8px;
					}
				}

				.connection-signon-radio:hover {
					border-width: 8px;
				}
	}
}