@import 'mediawiki.skin.variables.less';

.mw-special-OATHManage {
	&-password {
		&__form {
			border: @border-subtle;
			border-radius: @border-radius-base;
			padding: @spacing-75;
		}

		// Higher specificity needed to override margins set on .mw-body p
		& &__label {
			color: @color-subtle;
			margin-top: 0;
		}
	}

	&-password,
	&-authmethods,
	&-passkeys {
		margin-bottom: @spacing-150;
	}

	&-authmethods,
	&-passkeys {
		// On wide screens, put the actions buttons side by side;
		// on narrow screens, put them below each other
		&__method-actions {
			display: flex;
			gap: @spacing-75;

			@media ( max-width: @max-width-breakpoint-mobile ) {
				flex-direction: column;
			}
		}

		// Put the add buttons below each other, regardless of screen width
		&__addform .cdx-button {
			display: flex;
			margin-top: @spacing-75;
		}

		// Higher specificity needed to override margins set on .mw-body p
		& &__placeholder {
			color: @color-subtle;
			margin-top: 0;

			&:last-child {
				margin-bottom: 0;
			}
		}

		&--no-keys &__addform {
			border: @border-subtle;
			padding: @spacing-75;
		}
	}

	&-passkeys {
		&__addbutton {
			// Hide the "Add passkey" button if JS is not available
			.client-nojs & {
				display: none;
			}
		}
	}

	.mw-oathauth-recoverycodes-copy-button.cdx-button {
		// HACK: Override margin-right from ext.oath.recovery.less
		// We use the copy+delete buttons a little differently here than on TOTPAddForm,
		// and that's causing styling discrepancies. We should clean that up so that we
		// can use the same styling in both places
		margin: 0;
	}

	&-delete-warning {
		.mw-htmlform-submit-buttons {
			display: flex;

			@media ( max-width: @max-width-breakpoint-mobile ) {
				flex-direction: column;
				gap: @spacing-75;

				.oo-ui-buttonElement {
					// Remove default horizontal margin when buttons are stacked
					margin-right: 0;
				}
			}
		}
	}

	&-mandatory-2fa {
		margin-bottom: @spacing-25;

		&.cdx-message--block {
			margin-bottom: @spacing-75;
		}
	}

	&-2fa-groups-notice {
		margin-top: @spacing-75;

		.mw-special-OATHManage-2fa-groups-list-intro {
			margin-top: @spacing-75;
		}
	}

	@media ( max-width: @max-width-breakpoint-mobile ) {
		// On narrow screens, make all buttons full width (but not those inside dialogs)
		.mw-body-content .cdx-button {
			display: flex;
			width: 100%;
		}
	}
}
