@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;

@forward '../05-objects/cds-overlay';

.cds-modal-overlay {
	@extend .cds-overlay;
	z-index: vars.$cds-layer-modal;
}

.cds-modal {
	display: flex;
	position: absolute;
	flex-direction: column;
	box-shadow: vars.$cds-elevation-raised;
	background-color: var(--cds-color-background-default);
	border-radius: vars.$cds-border-radius-50;
	/*gap: vars.$cds-spacing-150;*/
	padding: vars.$cds-spacing-100;
	max-height: calc(100% - vars.$cds-spacing-200);

	/* DEFAULT */
	width: calc(100% - vars.$cds-spacing-200);
	max-width: vars.$cds-modal-m;
	height: auto;

	//ELEMENTS
	&__header {
		display: flex;
		align-items: center;
		padding: vars.$cds-spacing-100;
		gap: vars.$cds-spacing-50;
		justify-content: space-between;
	}

	&__content {
		overflow-y: auto;
		padding: vars.$cds-spacing-100;
	}

	&__footer {
		display: flex;
		padding: vars.$cds-spacing-100;
		gap: vars.$cds-spacing-50;
		justify-content: right;
	}

	&__icon::before {
		@include mixins.cds-icon-size(vars.$cds-icon-200);
	}

	&__title {
		width: 100%;
		@include mixins.cds-head-s;
	}

	//SIZE MODIFIERS
	&--small {
		width: calc(100% - vars.$cds-spacing-200);
		max-width: vars.$cds-modal-s;
		height: auto;
	}

	&--medium {
		width: calc(100% - vars.$cds-spacing-200);
		max-width: vars.$cds-modal-m;
		height: auto;
	}

	&--large {
		width: calc(100% - vars.$cds-spacing-200);
		max-width: vars.$cds-modal-l;
		height: auto;
	}
}