vwc-dialog.scss

@use '@vonage/vvd-typography/scss/typography' as typography;
@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
@use '@vonage/vvd-foundation/scss/mixins/scrim' as scrim-mixins;

#title,
#content,
#actions,
#dialog_icon {
	padding-right: 0;
	padding-left: 0;
}

::slotted([slot='icon']) {
	margin-bottom: 18px;
}

#title {
	@include typography.typography-cat-shorthand('subtitle-2');
	padding-bottom: 0;
	margin-bottom: 8px;
	color: var(#{scheme-variables.$vvd-color-on-canvas});
}

#content {
	@include typography.typography-cat-shorthand('body-2');
	color: var(#{scheme-variables.$vvd-color-on-canvas});
}

#actions {
	@include typography.typography-cat-shorthand('body-2-bold');
	padding-bottom: 0;
}

.mdc-dialog__surface {
	padding: 24px;
}

.mdc-dialog .mdc-dialog__content {
	padding-top: 0;
}

.mdc-dialog__content.last {
	padding-bottom: 0;
}

.mdc-dialog__title::before {
	height: 0;
}

.mdc-dialog .mdc-dialog__scrim {
	@include scrim-mixins.scrim-variables;
}

.dismiss-button {
	display: none;
}

:host([close-button]) {
	.dismiss-button {
		--vvd-icon-button-color: inherit;
		position: absolute;
		top: 16px;
		right: 16px;
		display: block;
	}
	.mdc-dialog__title,
	.mdc-dialog__content {
		width: calc(100% - 20px);
	}
}