:host {
	display: flex;
	flex-flow: column;
}
:host[hidden] {
	display: none;
}
div:first-of-type {
	z-index: 3;
	padding: 0.5em 0 0.5em 0.4em;
	overflow: hidden;
	position: fixed;
	top: 8.5em;
	right: -3.3em;
	background-color: rgb(var(--smoothly-medium-tint));
	border-radius: .3em 0 0 .3em;
	box-shadow: var(--smoothly-shadow);
	transition: right ease-in-out .3s;
}
:host > div > smoothly-trigger {
	border-radius: 0;
	border: solid 1px rgb(var(--smoothly-color));
}
@keyframes slide {
	0% { width: 0; }
}
:host > portal-create-order,
:host > ig-subscription-create { 
	background-color: rgb(var(--smoothly-medium-contrast));
	border: solid 1px rgb(var(--smoothly-medium-shade));
	box-shadow: var(--smoothly-shadow);
	border-radius: .6em;
	position: fixed;
	z-index: 3;
	right: 5em;
	padding: 1em;
 }
:host > portal-create-order {
	padding-bottom: .5em;
	top: 6em;
}
:host > ig-subscription-create { 
	top: 9em;
}
.arrow {
	background-color: rgb(var(--smoothly-medium-contrast));
	border-color:  rgb(var(--smoothly-medium-shade));
	width: 30px;
	height: 30px;
	border-top-style: solid;
	border-top-width: 1px;
	border-right-style: solid;
	border-right-width: 1px;
	position: fixed;
	z-index: 3;
	right: 4em;
  transform: rotate(45deg);
}
:host > portal-create-order + .arrow {
	top: 9.5em;
}
:host > ig-subscription-create + .arrow {
	top: 12em;
}
:host .background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 2;
	background: rgba(var(--smoothly-warning-contrast), 0.5);
}
