.root {
	font-family: var(--font-family);
	display: inline-flex;
	box-shadow: var(--box-shadow-dimensions-small) var(--color-box-shadow);
	position: relative;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0;
	background-color: var(--fab-background);
}

.root:not(.extended) {
	border-radius: 50%;
	width: 56px;
	height: 56px;
}

.root.small {
	width: 40px;
	height: 40px;
}

.label {
	composes: label from './button.m.css';
	display: flex;
	align-items: center;
	justify-content: center;
}

.extended {
	border-radius: 24px;
	padding: 0 20px;
	height: 48px;
}

.root:hover,
.root:focus {
	box-shadow: var(--box-shadow-dimensions-small) var(--color-box-shadow-highlight);
}

.disabled:hover {
	box-shadow: var(--box-shadow-dimensions-small) var(--color-box-shadow);
}

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

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

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

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

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

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

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

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