@use '../variables' as *;

.#{$prefix}modal {
	z-index: 20;
	position: relative;
	overflow: hidden;
	max-width: var(--#{$prefix}modal-width);
	width: 100%;
	border-radius: var(--#{$prefix}modal-border-radius);
	border-width: var(--#{$prefix}modal-border-width);
	border-style: solid;
	border-color: var(--#{$prefix}modal-border-color);
	box-shadow: var(--#{$prefix}modal-box-shadow);
	color: var(--#{$prefix}modal-color);
	display: flex;
	flex-direction: column;
	background: var(--#{$prefix}modal-background);

	&-wrapper {
		padding: var(--#{$prefix}modal-wrapper-padding);

		&--fullscreen {
			padding: 0;
		}
	}

	&-wrapper--fullscreen & {
		max-width: 100%;
		height: 100vh;
		border-radius: 0px;
		border-width: 0px;
	}

	&--top {
		margin-bottom: auto;
	}

	&--center {
		margin-top: auto;
		margin-bottom: auto;
	}

	&--bottom {
		margin-top: auto;
	}

	& > form {
		width: inherit;
		max-width: inherit;
		height: inherit;
		max-height: inherit;
		display: inherit;
		flex-direction: inherit;
		align-items: inherit;
		justify-content: inherit;
	}

	&--scroll-inside {
		max-height: calc(100vh - (2 * var(--#{$prefix}modal-wrapper-padding)));
	}

	&-header {
		position: relative;
		flex-shrink: 0;
		height: var(--#{$prefix}modal-header-height);
		min-height: var(--#{$prefix}modal-header-min-height);
		border-bottom-width: var(--#{$prefix}modal-header-border-width, 0px);
		border-bottom-style: solid;
		border-bottom-color: var(--#{$prefix}modal-header-border-color, var(--#{$prefix}border-color));
		background: var(--#{$prefix}modal-header-background, transparent);
		padding-block: var(--#{$prefix}modal-header-padding-y);
		padding-inline: var(--#{$prefix}modal-header-padding-x);
		display: flex;
		align-items: center;
		gap: var(--#{$prefix}modal-header-gap);

		&__start-content,
		&__end-content {
			flex-shrink: 0;
			display: flex;
			align-items: center;
		}

		&__content {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			gap: var(--#{$prefix}modal-header-content-gap);
		}

		&__title {
			font-size: var(--#{$prefix}modal-header-title-font-size);
			font-weight: var(--#{$prefix}modal-header-title-font-weight);
			line-height: var(--#{$prefix}modal-header-title-line-height);
			overflow: hidden;
			color: var(--#{$prefix}modal-header-title-color);
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}

		&__subtitle {
			font-size: var(--#{$prefix}modal-header-subtitle-font-size);
			font-weight: var(--#{$prefix}modal-header-subtitle-font-weight);
			line-height: var(--#{$prefix}modal-header-subtitle-line-height);
			overflow: hidden;
			color: var(--#{$prefix}modal-header-subtitle-color);
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
	}

	&-header:not(&-header--bordered) ~ &-body:not([data-hidden='true']),
	&-header:not(&-header--bordered) ~ :not([hidden]) &-body:not([data-hidden='true']) {
		padding-top: 0;
	}

	&-header--bordered {
		--#{$prefix}modal-header-border-width: 1px;
	}

	&-body {
		flex-grow: 1;
		padding-block: var(--#{$prefix}modal-body-padding-y);
		padding-inline: var(--#{$prefix}modal-body-padding-x);
		font-size: var(--#{$prefix}modal-body-font-size);
		line-height: var(--#{$prefix}modal-body-line-height);
		color: var(--#{$prefix}modal-body-color);
	}

	&--scroll-inside &-body {
		overflow-y: auto;
	}

	&-footer {
		flex-shrink: 0;
		position: relative;
		min-height: var(--#{$prefix}modal-footer-min-height);
		padding-block: var(--#{$prefix}modal-footer-padding-y);
		padding-inline: var(--#{$prefix}modal-footer-padding-x);
		border-top-width: var(--#{$prefix}modal-footer-border-width);
		border-top-style: solid;
		border-top-color: var(--#{$prefix}modal-footer-border-color);
		background: var(--#{$prefix}modal-footer-background, transparent);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 0.5rem;
	}

	&-appear,
	&-enter {
		opacity: 0;
		transform: scale(0.9);
	}

	&-appear-active,
	&-enter-active {
		opacity: 1;
		transform: scale(1);
		transition:
			opacity 100ms,
			transform 200ms;
		transition-delay: 300ms;
	}

	&-exit {
		opacity: 1;
		transform: scale(1);
	}

	&-exit-active {
		opacity: 0;
		transform: scale(0.9);
		transition:
			opacity 300ms,
			transform 300ms;
	}

	&-fullscreen#{&}-exit-active {
		transform: translateY(100%);
	}
}