/*!
 * VisualEditor MediaWiki UserInterface MWGalleryDialog styles.
 *
 * @copyright See AUTHORS.txt
 * @license The MIT License (MIT); see LICENSE.txt
 */

.ve-ui-mwGalleryDialog {
	&-image-container {
		height: 100px;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		border: 1px solid #c8ccd1;
		cursor: pointer;
		background-size: contain;
		transition: border 200ms cubic-bezier( 0.39, 0.575, 0.565, 1 ), box-shadow 200ms cubic-bezier( 0.39, 0.575, 0.565, 1 );
		/* Override default padding of DraggableElement */
		/* TODO: Remove once T168745 is resolved */
		padding: 0;

		&-desktop {
			width: 100%;
			margin-bottom: 0.5em;
		}

		&-mobile {
			width: 100px;
			margin-right: 0.5em;
		}

		&-highlighted {
			border-color: #36c;
			box-shadow: inset 0 0 0 0.1em #36c;

			&-image {
				background-color: #f8f9fa;
				width: 100%;
				/* Matches default height in GalleryImageInfoCache */
				height: 200px;
				background-repeat: no-repeat;
				background-position: 50% 50%;
				background-size: contain;
			}
		}
	}

	.oo-ui-fieldsetLayout + .oo-ui-fieldsetLayout,
	&-remove-button {
		margin-top: 1em;
	}

	&-menuLayout-desktop {
		> .oo-ui-menuLayout-menu {
			width: 14em;
			border-right: 1px solid #c8ccd1;
		}

		> .oo-ui-menuLayout-content {
			left: 14em;
			right: 14em;
		}
	}

	&-menuLayout-mobile {
		> .oo-ui-menuLayout-menu {
			height: calc( 102px + 2em );
			border-bottom: 1px solid #c8ccd1;
		}

		> .oo-ui-menuLayout-content {
			top: calc( 102px + 2em );
		}
	}

	&-imageListMenuLayout {
		> .oo-ui-menuLayout-menu {
			text-align: center;
		}

		.oo-ui-draggableGroupElement-horizontal {
			white-space: nowrap;
			line-height: 0;
		}

		&-desktop {
			> .oo-ui-menuLayout-content {
				bottom: 5em;
			}

			> .oo-ui-menuLayout-menu {
				box-shadow: 0 -1px 0 0 rgba( 0, 0, 0, 0.05 );
				height: 5em;
				border-top: 1px solid #eaecf0;

				.oo-ui-panelLayout-padded {
					/* Center the button vertically */
					padding: 0 12px;
					line-height: 5em;

					.oo-ui-buttonElement-button {
						white-space: normal;
					}
				}
			}
		}

		&-mobile {
			> .oo-ui-menuLayout-content {
				right: 4em;
				border-right: 1px solid #eaecf0;

				> .oo-ui-panelLayout-scrollable {
					overflow-y: hidden;
				}
			}

			> .oo-ui-menuLayout-menu {
				box-shadow: -1px 0 0 0 rgba( 0, 0, 0, 0.05 );
				/* stylelint-disable-next-line declaration-property-unit-disallowed-list */
				line-height: 102px;
				width: 4em;

				> .oo-ui-panelLayout-padded {
					padding: 1em 0;
				}

				.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child {
					margin-left: 0;
				}
			}
		}
	}
}