@guardian/threads/dist/components/Button/Button.module.css

.root {
	font-weight: 400;
	font-size: 1rem;
	min-height: var(--size-vertical-base);
	padding: 0 var(--sp-base);
	border-radius: var(--radius-default);
	color: currentColor;
	cursor: default;
	text-decoration: none;
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	background: transparent;
	appearance: none;
	will-change: transform;
	position: relative;
	border: 0;
	cursor: pointer;
	contain: content;
}

.root span {
	display: inline-flex;
}

.root svg,
.root img {
	transform: scale(1.25);
}

.root svg:not(:last-child),
.root img:not(:last-child) {
	margin-right: 0.4em;
}

.root .dropdown {
	margin-right: -0.2em;
	transform: scale(1);
}

.root .dropdown:first-child {
	margin-left: -0.2em;
}

.root:focus {
	outline: none;
}

.root:active:not([disabled]) {
	filter: brightness(85%);
}

.root[disabled] {
	opacity: 0.4;
	pointer-events: none;
	filter: grayscale(100%);
}

.root[data-active='true'] {
	color: var(--color-selected);
	opacity: 1;
}

.root[data-size='large'] {
	font-size: 1.2rem;
}

.toolset {
	composes: root;
	font-weight: 600;
	background: transparent;
	border: 1px solid var(--color-border);
}
.toolset:hover,
.toolset:focus {
	border-color: var(--color-border-dark);
}

.default {
	composes: root;
	font-weight: 600;
	border: 1px solid var(--color-border);
	background: var(--color-secondary);
	color: var(--color-secondary-text);
}
.default:hover,
.default:focus {
	border-color: var(--color-border-dark);
}

.important {
	composes: root;
	background-color: var(--color-highlight);
	color: var(--color-highlight-text);
	border: 1px solid var(--color-highlight);
	font-weight: 600;
}
.important:hover,
.important:focus {
	border-color: var(--color-border-dark);
}

.transparent {
	composes: root;
	min-height: calc(var(--size-vertical-base) - 2px);
	margin: 1px;
	border-radius: calc(var(--radius-default) - 1px);
}
.transparent:hover,
.transparent:focus {
	box-shadow: inset 0 0 0 1px var(--color-border-light);
}

.invisible {
	composes: root;
}

.innerContent {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
}

.buttonIconLeft {
	align-items: center;
	display: flex;
}

.children + .buttonIconLeft {
	margin-right: var(--sp-base);
}

.buttonIconRight {
	align-items: center;
	display: flex;
}

.children + .buttonIconRight {
	margin-left: var(--sp-base);
}

.hideContent {
	color: transparent;
}

.centerSpinner {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.buttonGroup {
	display: flex;
	flex-direction: row;
	height: fit-content;
}

.buttonGroup .root {
	border-radius: 0;
}

.buttonGroup .root:not(:last-child) {
	border-right: 0;
}

.buttonGroup .root:first-child {
	border-radius: var(--radius-default) 0 0 var(--radius-default);
}

.buttonGroup .root:last-child {
	border-radius: 0 var(--radius-default) var(--radius-default) 0;
}