:host {
	display: block;
	position: fixed;
	top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	z-index: 1;
	/* stylelint-disable-next-line declaration-no-important */
	background: rgba(var(--smoothly-default-color), var(--smoothly-semitransparent)) !important;
}
:host[hidden] {
	display: none;
}
:host > section {
	margin-top: var(--smoothly-dialog-margin-top)
}
:host > section > div.header {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	margin-top: 2em;
	color: rgb(var(--smoothly-primary-contrast));
	background: rgb(var(--smoothly-primary-color));
	border-color: rgb(var(--smoothly-primary-color));
}
:host:not([header]) div.header {
	border: none;
}

:host > section > * {
	position: relative;
	color: rgb(var(--smoothly-default-contrast));
	background-color: rgb(var(--smoothly-default-color));
	border-color: rgb(var(--smoothly-color));
	border-width: 1px;
	border-style: solid;
	max-width: 40em;
	width: calc(100vw - 4em - 2px);
	max-height: calc(100vh - 6em - 2px);
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
}
:host > section > div.content {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	margin-bottom: 2em;
	border: 1px solid rgb(var(--smoothly-default-contrast));
	box-sizing: border-box;
	overflow: hidden;
}
:host:not([header]) >section> div.content {
	border-radius: 8px;
}
:host > section > * > smoothly-trigger {
	position: absolute;
	right: -2em;
	top: -2em;
	z-index: 1;
	border-color: transparent;
}
:host > section > * > smoothly-trigger:hover {
	border-color: transparent;
}
:host > section > div.header > smoothly-trigger > smoothly-icon {
	background-color: rgb(var(--smoothly-color));
	border-radius: 50%;
}
:host > section > * > * {
	margin: 10px;
}