/*
 * Citizen
 *
 * SkinStyles for Extension:MultimediaViewer
 * Module: mmv.ui.download.pane
 * Version: REL1_39 (1b97775)
 *
 * Date: 2022-11-26
*/

.mw-mmv-download-pane {
	height: auto;
	padding: 0;

	// Let's make better use of space
	.mw-mmv-download-area {
		display: flex;
		width: auto;
		padding: var( --space-md );

		.mw-mmv-download-go-button {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		/* Selection size arrow element */
		.mw-mmv-download-select-menu {
			border-left-color: var( --border-color-base );

			&:hover {
				border-bottom: 0;
			}
		}

		.mw-mmv-download-image-size {
			font-size: var( --font-size-x-small );
		}

		.mw-mmv-download-preview-link {
			display: flex;
			align-items: center;
			margin: 0;
			font-weight: var( --font-weight-semibold );
			color: var( --color-subtle );

			// Add hover state
			&:hover {
				color: var( --color-progressive--hover );
			}

			&:active {
				color: var( --color-progressive--active );
			}
		}

		/* Pulldown size menu */
		.mw-mmv-download-size {
			margin-right: var( --space-md );

			.oo-ui-labelElement-label {
				margin-left: 0; // There is no icon
			}
		}
	}

	.mw-mmv-download-attribution {
		padding: var( --space-md );
		margin: 0;
		color: var( --color-emphasized );
		background-color: var( --color-surface-2 );
		border-top: var( --border-width-base ) solid var( --border-color-base );
		border-bottom-right-radius: var( --border-radius-medium );
		border-bottom-left-radius: var( --border-radius-medium );

		&:hover {
			color: var( --color-emphasized );
			background-color: var( --color-surface-2--hover );
		}

		&:active {
			background-color: var( --color-surface-2--active );
		}

		&-how {
			padding: 0;

			.mw-mmv-download-attribution-close-button {
				top: var( --space-xxs );
				margin: 0;
				background-size: contain;
			}
		}

		&-how-header,
		&-cta-header {
			font-size: 1rem;
			font-weight: var( --font-weight-semibold );
		}

		&-cta-invite {
			font-size: var( --font-size-x-small );
			color: var( --color-progressive );
		}

		&-cta {
			background-size: contain;
		}
	}
}

.mw-mmv-reuse-dialog.mw-mmv-reuse-download-active .mw-mmv-reuse-down-arrow {
	background-color: var( --color-surface-2 );
}