.phx-component-lang-selector {
	// Default width & height
	width: 100%;
	height: 200pt;
	position: relative;

	> .wrapper {
		position: absolute;
		top: 0;
		height: 100%;

		&.left {
			padding-right: @DATA_LANG_SELECTOR_PANE_WIDTH;
			width: 100%;
			overflow-y: auto;

			&.expand {
				padding-right: 0;
			}

			> .component-pane {
				height: 100%;
				width: 100%;

				> .component-wrapper {
					display: none;
          height: 100%;

					&.show {
						display: block;
					}
				}
			}
		}

		&.right {
			width: @DATA_LANG_SELECTOR_PANE_WIDTH;
			right: 0;
			overflow: hidden;

			&.hide {
				display: none;
			}

			> .lang-pane {
				background-color: extract(@CLR_1, 8);
				height: 100%;
				width: 100%;
			}
		}
	}

	.language-btn {
		.FC0();
		width: @DATA_LANG_SELECTOR_BUTTON_WIDTH;
		height: @DATA_LANG_SELECTOR_BUTTON_HEIGHT;
		text-align: center;
		border-left: @DATA_LANG_SELECTOR_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
		border-bottom: @DATA_LANG_SELECTOR_BUTTON_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
		cursor: default;
		color: extract(@CLR_0, 1);

		&.selected {
			background-color: @CLR_BRAND;
			color: @CLR_BRAND_FONT;
			border-left: 0;
			.FC0B();
		}

		&.data {
			color: extract(@CLR_0, 1);
		}

		&.dirty {
			font-style: italic;
		}

		&.default {
			height: @DATA_LANG_SELECTOR_DEFAULT_BUTTON_HEIGHT;
			letter-spacing: 0.5pt;

			& > * {
				transform: rotate(-90deg);
				width: @DATA_LANG_SELECTOR_DEFAULT_BUTTON_HEIGHT;
				margin-left: -((@DATA_LANG_SELECTOR_DEFAULT_BUTTON_HEIGHT / 2) - (@DATA_LANG_SELECTOR_BUTTON_WIDTH / 2));
			}
		}
	}

	.mocking-btn {
		border-left: @DATA_LANG_SELECTOR_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
		height: 100%;
	}
}