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

@grid-gap: 10px;

.modal {
	& > .modal-content#media-collection {
		top: 18%;
		left: 8%;
		right: 8%;
		bottom: 18%;

		& > * {
			background-color: @modal-background-color;
			display: flex;
			box-shadow: 0 0 5px 0px #3c3c3c;
		}

		#pass-preview {
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
			margin-right: 15px;
			flex-grow: 0;
			flex-shrink: 0;
			align-items: center;
			justify-content: center;
			width: 230px; /* fixed width */
			padding: 0 30px;
		}

		#media-collector {
			flex-basis: 0; // to allow grid resizing through margins
			flex-grow: 2;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			flex-direction: column;
			position: relative;
			/** To allow ellipsis on text */
			min-width: 0;

			& > header {
				min-height: 60px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20px;

				& button.edit-mode {
					background: none;
					border: 0;
					outline: none;

					color: #e6e6e6;
					cursor: pointer;
					min-width: 40px;
					text-align: right;
					font-size: inherit;

					&[disabled] {
						color: #646464;
						cursor: initial;
					}
				}
			}

			& > .list {
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				overflow: hidden;

				& > #grid {
					display: grid;
					column-gap: @grid-gap;
					row-gap: @grid-gap;
					padding: 20px;
					justify-items: center;
					align-items: start;
					grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

					.scrollableWithoutScrollbars(y);
				}
			}
		}
	}
}
