.rfw-app-modal {
	/**
	 * Set `hidden` as the default overflow for container and `auto` for body to
	 * make them stable across newer versions of @wordpress/components.
	 * More details can be found in the AppModal implementation.
	 */
	overflow: hidden;

	@include wpMixins.break-large {
		inline-size: variables.$rfw-width-large;
	}

	.rfw-app-modal__footer {
		display: flex;
		flex-direction: column-reverse;
		gap: calc(var(--main-gap) / 2);
		margin-block-start: var(--large-gap);

		@include wpMixins.break-mobile {
			flex-direction: row;
			justify-content: flex-end;

			[dir="rtl"] & {
				justify-content: flex-start;
			}
		}

		button {
			justify-content: center;
		}
	}

	.components-modal__content {
		overflow: auto;
	}

	&__styled--overflow-visible {
		&.rfw-app-modal,
		.components-modal__content {
			overflow: visible;
		}
	}
}
