.main {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
	display: flex;
	font-size: 12px;
	font-weight: bold;
	height: 32px;
	justify-content: center;
	outline: none;
	padding: 0 16px;
	transition:
		background 150ms ease-in-out,
		border-color 150ms ease-in-out,
		color 150ms ease-in-out;
	user-select: none;
	white-space: nowrap;
}
 
.iconOnly { padding: 0 8px }

.disabled { cursor: default }

.default {
	background: var(--N0);
	border-color: var(--N400);
	color: var(--N700);
}

.default:active,
.default:focus-visible,
.default:hover {
	color: var(--N800);
}

.default:focus-visible {
	border-color: var(--N500);
	box-shadow: 0 0 0 2px var(--B200);
}

.default:hover {
	border-color: var(--N600);
}

.default:active {
	background: var(--N100);
	border-color: var(--N500);
}

.defaultDisabled,
.defaultDisabled:focus-visible,
.defaultDisabled:hover {
	border-color: var(--N300);
	color: var(--N300);
}

.primaryG {
	background: var(--G400);
	border-color: var(--G400);
	color: var(--N0);
}

.primaryG:focus-visible,
.primaryR:focus-visible,
.primaryV:focus-visible {
	box-shadow: 0 0 0 2px var(--B200);
}

.primaryG:focus-visible,
.primaryG:hover {
	background: var(--G500);
	border-color: var(--G500);
}

.primaryG:active {
	background: var(--G600);
	border-color: var(--G600);
}

.primaryV {
	background: var(--V400);
	border-color: var(--V400);
	color: var(--N0);
}

.primaryV:focus-visible,
.primaryV:hover {
	background: var(--V500);
	border-color: var(--v500);
}

.primaryV:active {
	background: var(--V600);
	border-color: var(--V600);
}

.primaryR {
	background: var(--R400);
	border-color: var(--R400);
	color: var(--N0);
}

.primaryR:focus-visible,
.primaryR:hover {
	background: var(--R500);
	border-color: var(--R500);
}

.primaryR:active {
	background: var(--R600);
	border-color: var(--R600);
}

.primaryGDisabled,
.primaryGDisabled:focus-visible,
.primaryGDisabled:hover {
	background: var(--G200);
	border-color: var(--G200);
}

.primaryVDisabled,
.primaryVDisabled:focus-visible,
.primaryVDisabled:hover {
	background: var(--V200);
	border-color: var(--V200);
}

.primaryRDisabled,
.primaryRDisabled:focus-visible,
.primaryRDisabled:hover {
	background: var(--R200);
	border-color: var(--R200);
}

.minimal:focus-visible {
	box-shadow: 0 0 0 2px var(--B200);
}

.minimal:hover {
	background: rgba(0, 0, 0, 0.1);
}

.minimalGDisabled,
.minimalGDisabled:focus-visible,
.minimalGDisabled:hover {
	background: transparent;
	color: var(--N400);
}

.iconWithText { margin-right: 8px }

/*
 * Ensures that outlines always show up on top of selected items
 * when buttons are used in ToggleGroup/ToggleButton components
 */
.main:focus { z-index: 1 }

/*
 * TODO: This only works for 'minimal' appearance right now.
 * Add the others when/if needed.
 */
.isSelected,
.isSelected:focus-visible,
.isSelected:hover {
	background: var(--G100);
	color: var(--G400);
}