@use '@talend/design-tokens/lib/tokens' as tokens;

.modal-dialog {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.modal {
	&-content {
		display: flex;
		flex-direction: column;
		flex-basis: 100%;
		flex-grow: 0;
		flex-shrink: 0;
		border: none; // it keeps the border-radius
		border-radius: $border-radius-base;
		background: tokens.$coral-color-neutral-background;
	}

	&-header {
		border-top-left-radius: $border-radius-base;
		border-top-right-radius: $border-radius-base;
		border: none;
		border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
		padding: {
			top: $modal-title-padding-top;
			bottom: $modal-title-padding-bottom;
		}

		&.informative {
			text-align: center;
		}

		.modal {
			&-subtitle {
				font-size: 14px;
				margin-top: 1px;

				&.error {
					color: tokens.$coral-color-danger-text;
				}
			}
		}

		.close {
			color: tokens.$coral-color-neutral-text-weak;
			opacity: 1;
		}
	}

	&-body {
		flex-grow: 1;
		overflow-y: auto;
	}

	&-footer {
		border: none;
		flex-shrink: 0;
	}
}