.root {
	display: inline-flex;
	align-items: center;
}

.up,
.up .actions {
	flex-direction: column-reverse;
}
.up .action,
.up .actions {
	margin-bottom: var(--grid-base);
}

.down,
.down .actions {
	flex-direction: column;
}
.down .action,
.down .actions {
	margin-top: var(--grid-base);
}

.left,
.left .actions {
	flex-direction: row-reverse;
}
.left .action,
.left .actions {
	margin-right: var(--grid-base);
}

.right,
.right .actions {
	flex-direction: row;
}
.right .action,
.right .actions {
	margin-left: var(--grid-base);
}

.actions {
	display: flex;
}

.action {
	opacity: 0;
	transform: scale(0);
}

.open .action {
	opacity: 1;
	transform: scale(1);
}

.actionTransition {
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.5s;
}

.bottomRight {
	position: fixed;
	bottom: var(--spacing-large);
	right: var(--spacing-large);
}

.bottomCenter {
	position: fixed;
	bottom: var(--spacing-large);
	right: 50%;
	transform: translateX(50%);
}

.bottomLeft {
	position: fixed;
	bottom: var(--spacing-large);
	left: var(--spacing-large);
}

.rightCenter {
	position: fixed;
	top: 50%;
	right: var(--spacing-large);
	transform: translateY(-50%);
}

.leftCenter {
	position: fixed;
	top: 50%;
	left: var(--spacing-large);
	transform: translateY(-50%);
}

.topLeft {
	position: fixed;
	top: var(--spacing-large);
	left: var(--spacing-large);
}

.topCenter {
	position: fixed;
	top: var(--spacing-large);
	right: 50%;
	transform: translateX(50%);
}

.topRight {
	position: fixed;
	top: var(--spacing-large);
	right: var(--spacing-large);
}

.labelContainer {
	position: relative;
}

.label {
	background-color: var(--color-background-inverted);
	color: var(--color-text-inverted);
	display: inline-block;
	font-size: var(--font-size-small);
	padding: calc(var(--grid-base) / 4) calc(var(--grid-base) / 1.5);
	position: absolute;
}

.labelLeft .label {
	right: calc(100% + var(--grid-base));
	top: 50%;
	transform: translateY(-50%);
}

.labelRight .label {
	left: calc(100% + var(--grid-base));
	top: 50%;
	transform: translateY(-50%);
}

.labelTop .label {
	bottom: calc(100% + var(--grid-base));
	left: 50%;
	transform: translateX(-50%);
}

.labelBottom .label {
	top: calc(100% + var(--grid-base));
	left: 50%;
	transform: translateX(-50%);
}
