@import "mixin";
@import "properties";

.modal-server-group-assignments {
	@include user-select(none);

	min-width: 25em!important;
	max-height: calc(100vh - 10rem)!important;
	min-height: 10em!important;

	width: 30em!important;

	display: flex!important;
	flex-direction: column!important;
	justify-content: stretch!important;

	background-color: #2f2f35;
	padding: .5em!important;

	.group-assignment-list {
		flex-grow: 1;
		flex-shrink: 1;
		min-height: 6em;

		display: flex;
		flex-direction: column;
		justify-content: stretch;

		color: #999999;

		a {
			flex-shrink: 0;
			flex-grow: 0;

			.htmltag-client {
				display: inline;
				color: #999999;
			}
		}

		.group-list {
			flex-shrink: 1;
			flex-grow: 1;
			min-height: 4em;

			padding: 3px;
			overflow-y: auto;

			border: 1px #161616 solid;
			border-radius: $border_radius_middle;
			background-color: #28292b;

			@include chat-scrollbar-vertical();

			.group-entry {
				flex-shrink: 0;
				flex-grow: 0;

				display: flex;
				flex-direction: row;
				justify-content: stretch;

				height: 1.75em;

				> * {
					flex-shrink: 0;
					flex-grow: 0;
					align-self: center;
				}

				a {
					flex-shrink: 1;
					flex-grow: 1;

					min-width: 6em;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				label {
					margin-right: .25em;
				}
			}

			.icon-container {
				align-self: center;
				margin-right: 4px;
				margin-left: 2px;
				margin-top: -2px;
			}

			a {
				align-self: center;
			}
		}
	}

	.container-buttons {
		flex-grow: 0;
		flex-shrink: 0;

		padding-top: 1em;

		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
}