.root,
.root:before,
.root:after {
	box-sizing: border-box;
	font: var(--font-family);
}

.text {
	background-color: var(--button-background);
	border: var(--border-width) solid var(--button-border);
	cursor: pointer;
	display: inline-flex;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	min-width: calc(var(--grid-base) * 20);
	padding: var(--spacing-regular);
	transition: box-shadow var(--transition-duration) var(--transition-easing);
	margin: 0;
}

.text:hover,
.text:focus {
	border-color: var(--button-border);
	box-shadow: var(--box-shadow-dimensions-small) var(--color-box-shadow-highlight);
	outline: none;
}

.iconOnly {
	min-width: 0;
}

.root.iconOnly {
	min-width: 0;
	padding: 3px var(--spacing-regular);
}

.text.disabled,
.text.disabled:hover {
	background-color: var(--button-background-faded);
	border-color: var(--button-border);
	box-shadow: none;
	color: var(--button-text-faded);
	cursor: default;
}

.outlined {
	background-color: var(--button-background);
	border: var(--border-width) solid var(--button-border);
	color: var(--button-text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	font-size: var(--font-size-base);
	font-weight: bold;
	line-height: var(--line-height-base);
	min-width: calc(var(--grid-base) * 20);
	padding: var(--spacing-regular);
	margin: 0;
	font-family: var(--font-family);
}

.outlined:focus {
	outline: none;
}

.outlined:hover {
	background-color: var(--button-background);
	color: var(--button-text-inverted);
	outline: none;
}

.outlined.root:hover .label {
	color: var(--button-text-inverted);
}

.outlined.disabled,
.outlined.disabled:hover {
	background-color: initial;
	border-color: var(--button-border);
	color: var(--button-text-faded);
	cursor: default;
}

.outlined.disabled:hover .label {
	color: var(--button-text-faded);
}

.contained {
	font-family: var(--font-family);
	border: 0;
	box-shadow: var(--box-shadow-dimensions-small) var(--color-box-shadow);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	font-size: inherit;
	line-height: var(--line-height-base);
	min-width: calc(var(--grid-base) * 20);
	padding: var(--spacing-regular);
	background-color: var(--button-background);
}

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

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

.label {
	color: var(--button-text);
	font-size: var(--font-size-base);
	font-weight: bold;
	line-height: var(--line-height-base);
}

.icon {
	display: inline-flex;
}

.label + .icon {
	margin-left: var(--grid-base);
}

.icon + .label {
	margin-left: var(--grid-base);
}
