@import (reference) "../../App/common.less";
@import (reference) "../ModalBase/common.less";

.modal {
	& > .modal-content#translations {
		top: 18%;
		bottom: 18%;
		left: 8%;
		right: 8%;
		background-color: @modal-background-color;
		flex-direction: column;

		& > header {
			display: flex;
			padding: 30px 30px 10px 30px;
			justify-content: space-between;
			align-items: center;

			& > h2 {
				margin: 0;
			}

			& > svg {
				width: 30px;
				height: 30px;
				fill: #333333;
				cursor: pointer;

				&:active path:first-child {
					fill: #252525;
				}

				& path:nth-child(2) {
					fill: #e6e6e6;
				}

				&[data-disabled="true"] {
					pointer-events: none;

					& path {
						&:first-child {
							fill: #1f1f1f;
						}

						&:nth-child(2) {
							fill: #656565;
						}
					}
				}
			}
		}

		& > #translations-content[data-language="default"] {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 10%;

			& p {
				margin: 5px 0;
				max-width: 400px;
				text-align: center;
			}

			& > .language-select-btn {
				margin-top: 20px;
			}
		}

		& > #translations-content:not([data-language="default"]) {
			display: grid;
			grid-template-columns: 1fr 1fr 50px;
			grid-auto-rows: 40px;
			gap: 5px 2px;
		}

		& > #translations-content {
			flex-grow: 1;
			padding: 0 30px;
			position: relative;

			.scrollableWithoutScrollbars(y);

			& > header {
				display: grid;
				grid-column: ~"1 / 4";
				height: 100%;
				grid-template-columns: 1fr 1fr 50px;
				border-bottom: 1px solid #212121;

				& > div {
					grid-row: ~"1 / 2";
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			& > input {
				background: #292929;
				color: #e6e6e6;
				border: none;
				border-bottom: 1px solid transparent;
				padding-left: 10px;
				cursor: pointer;
				transition: all 0.3s ease-in-out;
				outline: none;

				&:nth-of-type(2n) {
					border-radius: 0px 3px 3px 0px;
					grid-column: ~"2 / 3";
				}

				&:nth-of-type(2n + 1) {
					border-radius: 3px 0px 0px 3px;
					grid-column: ~"1 / 2";
				}

				&:hover {
					background: #252525;
				}

				&:focus {
					background: #252525;
					border-bottom-color: #464646;
				}
			}

			& svg {
				grid-column: ~"3 / 4";
				fill: #9c0000;
				width: 25px;
				height: 25px;
				justify-self: center;
				align-self: center;
				cursor: pointer;
				transition: fill 0.3s ease-in-out;

				&:hover {
					fill: #bb0000;
				}
			}

			&::before {
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 10;
				background-color: rgba(0, 0, 0, 0.5);
				opacity: 0;
				transition: opacity 0.3s ease-in-out;
				pointer-events: none;
			}

			&[data-disabled="true"] {
				overflow-y: hidden !important;

				&::before {
					opacity: 1;
					pointer-events: all;
				}
			}
		}

		& > footer {
			flex-shrink: 0;

			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 0.5px solid #292929;
			height: 50px;
			padding: 0 30px; /* small sizes */

			& > .the-switcher {
				margin-left: 0;
			}
		}
	}
}
