.o3-button {
	--_o3-button-min-width: 80px;
	--_o3-button-min-height: 44px;

	--_o3-button-block-padding: var(--o3-spacing-4xs);
	--_o3-button-inline-padding-start: var(--o3-spacing-2xs);
	--_o3-button-inline-padding-end: var(--o3-spacing-2xs);

	--_o3-button-border-size: 1px;
	--_o3-icon-size: calc(
		var(--_o3-button-min-height) - (var(--_o3-button-block-padding) * 2)
	);

	min-width: var(--_o3-button-min-width);
	/* Width based on content by default, until set to `inital` */
	--o3-button-fluid: ;
	width: var(--o3-button-fluid, 100%);
	min-height: var(--_o3-button-min-height);
	border-radius: var(--o3-border-radius-1);
	padding: 0 var(--_o3-button-inline-padding-end) 0
		var(--_o3-button-inline-padding-start);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	vertical-align: middle;
	font-family: var(--o3-type-body-highlight-font-family);
	font-size: var(--o3-type-body-highlight-font-size);
	line-height: var(--o3-type-body-highlight-line-height);
	font-weight: var(--o3-type-body-highlight-font-weight);
	border: var(--_o3-button-border-size) solid transparent;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: 0.3s background-color, 0.15s color ease-out,
		0.15s border-color ease-out;
	appearance: none;
}

.o3-button[disabled],
.o3-button[aria-disabled='true'] {
	pointer-events: none;
	opacity: 0.4;
	cursor: default;
}

.o3-button[disabled].o3-button--hide-disabled,
.o3-button[aria-disabled='true'].o3-button--hide-disabled {
	visibility: hidden;
}

/* PRIMARY */

.o3-button.o3-button--primary {
	color: var(--_o3-button-primary-standard-color);
	background-color: var(--_o3-button-primary-standard-background);
	border-color: var(--_o3-button-primary-standard-border);

	&:hover {
		color: var(--_o3-button-primary-standard-hover-color);
		background-color: var(--_o3-button-primary-standard-hover-background);
		border-color: var(--_o3-button-primary-standard-hover-border);
	}

	&:focus-visible {
		color: var(--_o3-button-primary-standard-focus-color);
		background-color: var(--_o3-button-primary-standard-focus-background);
		border-color: var(--_o3-button-primary-standard-focus-border);
	}

	&:is(:active, [aria-selected='true'], [aria-current], [aria-pressed='true']) {
		color: var(--_o3-button-primary-standard-active-color);
		background-color: var(--_o3-button-primary-standard-active-background);
		border-color: var(--_o3-button-primary-standard-active-border);
	}
}

/* PRIMARY INVERSE */

.o3-button.o3-button--primary[data-o3-theme='inverse'],
:where([data-o3-theme='inverse']) .o3-button.o3-button--primary {
	color: var(--_o3-button-primary-inverse-color);
	background-color: var(--_o3-button-primary-inverse-background);
	border-color: var(--_o3-button-primary-inverse-border);

	&:hover {
		color: var(--_o3-button-primary-inverse-hover-color);
		background-color: var(--_o3-button-primary-inverse-hover-background);
		border-color: var(--_o3-button-primary-inverse-hover-border);
	}

	&:focus-visible {
		color: var(--_o3-button-primary-inverse-focus-color);
		background-color: var(--_o3-button-primary-inverse-focus-background);
		border-color: var(--_o3-button-primary-inverse-focus-border);
	}

	&:is(:active, [aria-selected='true'], [aria-current], [aria-pressed='true']) {
		color: var(--_o3-button-primary-inverse-active-color);
		background-color: var(--_o3-button-primary-inverse-active-background);
		border-color: var(--_o3-button-primary-inverse-active-border);
	}
}

/* PRIMARY MONO */

.o3-button.o3-button--primary[data-o3-theme='mono'],
:where([data-o3-theme='mono']) .o3-button.o3-button--primary {
	color: var(--_o3-button-primary-mono-color);
	background-color: var(--_o3-button-primary-mono-background);
	border-color: var(--_o3-button-primary-mono-border);

	&:hover {
		color: var(--_o3-button-primary-mono-hover-color);
		background-color: var(--_o3-button-primary-mono-hover-background);
		border-color: var(--_o3-button-primary-mono-hover-border);
	}

	&:focus-visible {
		color: var(--_o3-button-primary-mono-focus-color);
		background-color: var(--_o3-button-primary-mono-focus-background);
		border-color: var(--_o3-button-primary-mono-focus-border);
	}

	&:is(:active, [aria-selected='true'], [aria-current], [aria-pressed='true']) {
		color: var(--_o3-button-primary-mono-active-color);
		background-color: var(--_o3-button-primary-mono-active-background);
		border-color: var(--_o3-button-primary-mono-active-border);
	}
}

/* PRIMARY NEUTRAL */
/* This neutral theme is currently supported only in two brands: Core and Professional. */
/* TODO: Review moving back to the Core & Professional brand CSS files in the future */

.o3-button.o3-button--primary[data-o3-theme='neutral'],
:where([data-o3-theme='neutral']) .o3-button.o3-button--primary {
	color: var(--_o3-button-primary-neutral-color);
	background-color: var(--_o3-button-primary-neutral-background);
	border-color: var(--_o3-button-primary-neutral-border);

	&:hover {
		color: var(--_o3-button-primary-neutral-hover-color);
		background-color: var(--_o3-button-primary-neutral-hover-background);
		border-color: var(--_o3-button-primary-neutral-hover-border);
	}

	&:focus-visible {
		color: var(--_o3-button-primary-neutral-focus-color);
		background-color: var(--_o3-button-primary-neutral-focus-background);
		border-color: var(--_o3-button-primary-neutral-focus-border);
	}

	&:is(:active, [aria-selected='true'], [aria-current], [aria-pressed='true']) {
		color: var(--_o3-button-primary-neutral-active-color);
		background-color: var(--_o3-button-primary-neutral-active-background);
		border-color: var(--_o3-button-primary-neutral-active-border);
	}
}

/* SECONDARY */

.o3-button.o3-button--secondary {
	color: var(--_o3-button-secondary-standard-color);
	background-color: var(--_o3-button-secondary-standard-background);
	border-color: var(--_o3-button-secondary-standard-border);

	&:hover {
		color: var(--_o3-button-secondary-standard-hover-color);
		background-color: var(--_o3-button-secondary-standard-hover-background);
		border-color: var(--_o3-button-secondary-standard-hover-border);
	}

	&:focus-visible {
		color: var(--_o3-button-secondary-standard-focus-color);
		background-color: var(--_o3-button-secondary-standard-focus-background);
		border-color: var(--_o3-button-secondary-standard-focus-border);
	}

	&:is(:active, [aria-selected='true'], [aria-current], [aria-pressed='true']) {
		color: var(--_o3-button-secondary-standard-active-color);
		background-color: var(--_o3-button-secondary-standard-active-background);
		border-color: var(--_o3-button-secondary-standard-active-border);
	}
}

/* SECONDARY INVERSE */

.o3-button.o3-button--secondary[data-o3-theme='inverse'],
:where([data-o3-theme='inverse']) .o3-button.o3-button--secondary {
	color: var(--_o3-button-secondary-inverse-color);
	background-color: var(--_o3-button-secondary-inverse-background);
	border-color: var(--_o3-button-secondary-inverse-border);

	&:hover {
		color: var(--_o3-button-secondary-inverse-hover-color);
		background-color: var(--_o3-button-secondary-inverse-hover-background);
		border-color: var(--_o3-button-secondary-inverse-hover-border);
	}

	&:focus-visible {
		color: var(--_o3-button-secondary-inverse-focus-color);
		background-color: var(--_o3-button-secondary-inverse-focus-background);
		border-color: var(--_o3-button-secondary-inverse-focus-border);
	}

	&:is(:active, [aria-selected='true'], [aria-current], [aria-pressed='true']) {
		color: var(--_o3-button-secondary-inverse-active-color);
		background-color: var(--_o3-button-secondary-inverse-active-background);
		border-color: var(--_o3-button-secondary-inverse-active-border);
	}
}

/* SECONDARY MONO */

.o3-button.o3-button--secondary[data-o3-theme='mono'],
:where([data-o3-theme='mono']) .o3-button.o3-button--secondary {
	color: var(--_o3-button-secondary-mono-color);
	background-color: var(--_o3-button-secondary-mono-background);
	border-color: var(--_o3-button-secondary-mono-border);

	&:hover {
		color: var(--_o3-button-secondary-mono-hover-color);
		background-color: var(--_o3-button-secondary-mono-hover-background);
		border-color: var(--_o3-button-secondary-mono-hover-border);
	}

	&:focus-visible {
		color: var(--_o3-button-secondary-mono-focus-color);
		background-color: var(--_o3-button-secondary-mono-focus-background);
		border-color: var(--_o3-button-secondary-mono-focus-border);
	}

	&:is(:active, [aria-selected='true'], [aria-current], [aria-pressed='true']) {
		color: var(--_o3-button-secondary-mono-active-color);
		background-color: var(--_o3-button-secondary-mono-active-background);
		border-color: var(--_o3-button-secondary-mono-active-border);
	}
}

/* SECONDARY NEUTRAL: Unsupported */
/* This neutral theme is currently supported only in two brands: Core and Professional. */

.o3-button.o3-button--secondary[data-o3-theme='neutral'],
:where([data-o3-theme='neutral']) .o3-button.o3-button--secondary {
	border: 1px dashed var(--o3-color-palette-crimson);
	opacity: 0.6;
	pointer-events: none;
}

/* GHOST */

.o3-button.o3-button--ghost {
	color: var(--_o3-button-ghost-standard-color);
	background-color: var(--_o3-button-ghost-standard-background);
	border-color: var(--_o3-button-ghost-standard-border);

	&:hover {
		color: var(--_o3-button-ghost-standard-hover-color);
		background-color: var(--_o3-button-ghost-standard-hover-background);
		border-color: var(--_o3-button-ghost-standard-hover-border);
	}

	&:focus-visible {
		color: var(--_o3-button-ghost-standard-focus-color);
		background-color: var(--_o3-button-ghost-standard-focus-background);
		border-color: var(--_o3-button-ghost-standard-focus-border);
	}

	&:is(:active, [aria-selected='true'], [aria-current], [aria-pressed='true']) {
		color: var(--_o3-button-ghost-standard-active-color);
		background-color: var(--_o3-button-ghost-standard-active-background);
		border-color: var(--_o3-button-ghost-standard-active-border);
	}
}

/* GHOST INVERSE */

.o3-button.o3-button--ghost[data-o3-theme='inverse'],
:where([data-o3-theme='inverse']) .o3-button.o3-button--ghost {
	color: var(--_o3-button-ghost-inverse-color);
	background-color: var(--_o3-button-ghost-inverse-background);
	border-color: var(--_o3-button-ghost-inverse-border);

	&:hover {
		color: var(--_o3-button-ghost-inverse-hover-color);
		background-color: var(--_o3-button-ghost-inverse-hover-background);
		border-color: var(--_o3-button-ghost-inverse-hover-border);
	}

	&:focus-visible {
		color: var(--_o3-button-ghost-inverse-focus-color);
		background-color: var(--_o3-button-ghost-inverse-focus-background);
		border-color: var(--_o3-button-ghost-inverse-focus-border);
	}

	&:is(:active, [aria-selected='true'], [aria-current], [aria-pressed='true']) {
		color: var(--_o3-button-ghost-inverse-active-color);
		background-color: var(--_o3-button-ghost-inverse-active-background);
		border-color: var(--_o3-button-ghost-inverse-active-border);
	}
}

/* GHOST MONO */

.o3-button.o3-button--ghost[data-o3-theme='mono'],
:where([data-o3-theme='mono']) .o3-button.o3-button--ghost {
	color: var(--_o3-button-ghost-mono-color);
	background-color: var(--_o3-button-ghost-mono-background);
	border-color: var(--_o3-button-ghost-mono-border);

	&:hover {
		color: var(--_o3-button-ghost-mono-hover-color);
		background-color: var(--_o3-button-ghost-mono-hover-background);
		border-color: var(--_o3-button-ghost-mono-hover-border);
	}

	&:focus-visible {
		color: var(--_o3-button-ghost-mono-focus-color);
		background-color: var(--_o3-button-ghost-mono-focus-background);
		border-color: var(--_o3-button-ghost-mono-focus-border);
	}

	&:is(:active, [aria-selected='true'], [aria-current], [aria-pressed='true']) {
		color: var(--_o3-button-ghost-mono-active-color);
		background-color: var(--_o3-button-ghost-mono-active-background);
		border-color: var(--_o3-button-ghost-mono-active-border);
	}
}

/* GHOST NEUTRAL */
/* This neutral theme is currently supported only in two brands: Core and Professional. */

.o3-button.o3-button--ghost[data-o3-theme='neutral'],
:where([data-o3-theme='neutral']) .o3-button.o3-button--ghost {
	color: var(--_o3-button-ghost-neutral-color);
	background-color: var(--_o3-button-ghost-neutral-background);
	border-color: var(--_o3-button-ghost-neutral-border);

	&:hover {
		color: var(--_o3-button-ghost-neutral-hover-color);
		background-color: var(--_o3-button-ghost-neutral-hover-background);
		border-color: var(--_o3-button-ghost-neutral-hover-border);
	}

	&:focus-visible {
		color: var(--_o3-button-ghost-neutral-focus-color);
		background-color: var(--_o3-button-ghost-neutral-focus-background);
		border-color: var(--_o3-button-ghost-neutral-focus-border);
	}

	&:is(:active, [aria-selected='true'], [aria-current], [aria-pressed='true']) {
		color: var(--_o3-button-ghost-neutral-active-color);
		background-color: var(--_o3-button-ghost-neutral-active-background);
		border-color: var(--_o3-button-ghost-neutral-active-border);
	}
}

/* FLUID BUTTON */

.o3-button[data-o3-fluid] {
	@media screen and (max-width: 490px) {
		--o3-button-fluid: initial;
	}
}
/* SMALL BUTTON */

.o3-button.o3-button--small {
	--_o3-button-min-width: 60px;
	--_o3-button-min-height: 28px;

	--_o3-button-inline-padding-start: var(--o3-spacing-4xs);
	--_o3-button-inline-padding-end: var(--o3-spacing-4xs);
	--_o3-button-block-padding: var(--o3-spacing-5xs);

	/* Non-standard font size for small buttons. */
	font-size: var(--o3-font-size-negative-2);
	line-height: var(--o3-font-lineheight-negative-2);
}

/* PAGINATION */

.o3-button-pagination {
	width: 100%;
	display: flex;
	container-type: inline-size;
	gap: var(--o3-spacing-4xs);
}

.o3-button-pagination > .o3-button,
.o3-button-pagination > .o3-button.o3-button-icon--icon-only,
.o3-button-pagination__ellipsis {
	--_o3-button-min-width: auto;
	--_o3-button-min-height: 40px;
	max-width: 38px;
	flex: 1 1 38px;
}

@supports (container-type: inline-size) {
	/*
	 * If container is less than the width of 9 buttons (2 arrows + 7 total pages/ellipses),
	 * hide some buttons for a 'narrow' view.
	 *
	 * Read as: calc(--_o3-button-min-width * 9 + var(--o3-spacing-4xs) * 8)
	 */
	@container (width <= calc((38px * 9) + (0.5rem * 8))) {
		.o3-button-pagination > [data-o3-button-show-when='wide'] {
			display: none;
		}
	}
	@container (width > calc((38px * 9) + (0.5rem * 8))) {
		.o3-button-pagination > [data-o3-button-show-when='narrow'] {
			display: none;
		}
	}
}

@supports not (container-type: inline-size) {
	/*
	 * 740px aligns with our legacy o-grid M layout
	 * (https://registry.origami.ft.com/components/o-grid@6.1.7/readme?brand=core#Readme)
	 */
	@media screen and (max-width: 740px) {
		.o3-button-pagination > [data-o3-button-show-when='wide'] {
			display: none;
		}
	}
	@media screen and (min-width: 741px) {
		.o3-button-pagination > [data-o3-button-show-when='narrow'] {
			display: none;
		}
	}
}

.o3-button-pagination__ellipsis {
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	font-size: var(--o3-font-size-3);
	line-height: 0;
	min-height: var(--_o3-button-min-height);
	color: var(--o3-color-palette-black-60);
}

.o3-button-pagination__ellipsis[data-o3-theme='inverse'],
:where([data-o3-theme='inverse']) .o3-button-pagination__ellipsis {
	color: var(--o3-color-palette-white);
}

/* Grouped buttons */

.o3-button-group {
	display: flex;
	flex-wrap: wrap;
}

.o3-button-group > .o3-button + .o3-button {
	margin-left: calc(var(--_o3-button-border-size) * -1);
	border-radius: 0;
}
.o3-button-group > .o3-button:first-of-type {
	border-radius: 0;
	border-top-left-radius: var(--o3-border-radius-1);
	border-bottom-left-radius: var(--o3-border-radius-1);
}
.o3-button-group > .o3-button:last-of-type {
	border-radius: 0;
	border-top-right-radius: var(--o3-border-radius-1);
	border-bottom-right-radius: var(--o3-border-radius-1);
}

/* BUTTON ICON  */

.o3-button-icon::before {
	content: '';
	width: var(--_o3-icon-size);
	height: var(--_o3-icon-size);
	mask-image: var(--o3-button-icon);
	mask-repeat: no-repeat;
	mask-size: contain;
	display: inline-block;
	background-color: currentColor;
}

/*
	Ensure iconography is maintained when forced colours is enabled.
	E.g. Windows High Contrast Mode
	https://drafts.csswg.org/css-color/#valdef-color-buttontext
 */
@media (forced-colors: active) {
	button.o3-button-icon::before {
		background-color: ButtonText;
	}

	a.o3-button-icon::before {
		background-color: LinkText;
	}
}

.o3-button-icon:not(.o3-button-icon--icon-only)::before {
	margin-right: var(--o3-spacing-4xs);
}

.o3-button-icon {
	--_o3-button-inline-padding-end: var(--o3-spacing-s);
}

.o3-button-icon--end:not(.o3-button-icon--icon-only) {
	&:before {
		order: 1;
		margin-right: 0;
		margin-left: var(--o3-spacing-4xs);
	}
	padding: 0 var(--_o3-button-inline-padding-start) 0
		var(--_o3-button-inline-padding-end);
}

.o3-button--small.o3-button-icon {
	--_o3-button-inline-padding-end: var(--o3-spacing-4xs);
}

.o3-button-icon.o3-button-icon--icon-only {
	--_o3-button-min-width: var(--_o3-button-min-height);
	--_o3-button-inline-padding-start: 0;
	--_o3-button-inline-padding-end: 0;
}

.o3-button-icon__label {
	position: absolute;
	clip: rect(0 0 0 0);
	clip-path: polygon(0 0, 0 0);
	margin: -1px;
	border: 0;
	overflow: hidden;
	padding: 0;
	width: 2px;
	height: 2px;
	white-space: nowrap;
}

.o3-button-icon.o3-button-icon--cross::before {
	--o3-button-icon: var(--o3-icon-cross);
}

.o3-button-icon.o3-button-icon--list::before {
	--o3-button-icon: var(--o3-icon-list);
}

.o3-button-icon.o3-button-icon--grid::before {
	--o3-button-icon: var(--o3-icon-grid);
}

.o3-button-icon.o3-button-icon--notification::before {
	--o3-button-icon: var(--o3-icon-notification);
}

.o3-button-icon.o3-button-icon--outside-page::before {
	--o3-button-icon: var(--o3-icon-outside-page);
}

.o3-button-icon.o3-button-icon--upload::before {
	--o3-button-icon: var(--o3-icon-upload);
}
.o3-button-icon.o3-button-icon--tick::before {
	--o3-button-icon: var(--o3-icon-tick);
}

.o3-button-icon.o3-button-icon--settings::before {
	--o3-button-icon: var(--o3-icon-settings);
}

.o3-button-icon.o3-button-icon--search::before {
	--o3-button-icon: var(--o3-icon-search);
}
.o3-button-icon.o3-button-icon--plus::before {
	--o3-button-icon: var(--o3-icon-plus);
}

.o3-button-icon.o3-button-icon--download::before {
	--o3-button-icon: var(--o3-icon-download);
}
.o3-button-icon.o3-button-icon--chevron-up::before {
	--o3-button-icon: var(--o3-icon-chevron-up);
}
.o3-button-icon.o3-button-icon--chevron-down::before {
	--o3-button-icon: var(--o3-icon-chevron-down);
}
.o3-button-icon.o3-button-icon--chevron-right::before {
	--o3-button-icon: var(--o3-icon-chevron-right);
}
.o3-button-icon.o3-button-icon--chevron-left::before {
	--o3-button-icon: var(--o3-icon-chevron-left);
}
.o3-button-icon.o3-button-icon--edit::before {
	--o3-button-icon: var(--o3-icon-edit);
}
.o3-button-icon.o3-button-icon--refresh::before {
	--o3-button-icon: var(--o3-icon-refresh);
}
.o3-button-icon.o3-button-icon--link::before {
	--o3-button-icon: var(--o3-icon-link);
}
.o3-button-icon.o3-button-icon--calendar::before {
	--o3-button-icon: var(--o3-icon-calendar);
}
.o3-button-icon.o3-button-icon--scroll-to::before {
	--o3-button-icon: var(--o3-icon-scroll-to);
}
.o3-button-icon.o3-button-icon--sparkles::before {
	--o3-button-icon: var(--o3-icon-sparkles);
}
.o3-button-icon.o3-button-icon--first::before {
	--o3-button-icon: var(--o3-icon-first);
}
.o3-button-icon.o3-button-icon--last::before {
	--o3-button-icon: var(--o3-icon-last);
}
.o3-button-icon.o3-button-icon--play::before {
	--o3-button-icon: var(--o3-icon-play);
}
