/*
 * Shared MUI button styling for every React shortcode.
 *
 * The site's global theme styles plain <button> elements, and those rules beat
 * MUI's own class-based ones, which is where the red hover and focus states
 * come from. The declarations below are marked !important deliberately: they
 * exist to win against a stylesheet this theme does not own, and dropping the
 * flag puts the red back on any page whose kit uses a heavier selector.
 *
 * Loaded from ReactBase so it also covers Dialogs, which React portals to the
 * end of <body>, outside any page container.
 *
 * Colours are MUI's defaults. There is no createTheme() anywhere in src/, so
 * these are the values the components already render with.
 */

/* Catch-all ------------------------------------------------------------- */

/*
 * Every colour x variant pair the rules below do not name still has to be
 * stopped from going red. This comes first deliberately: it has the same
 * specificity as the per-variant rules, so those override it on source order
 * and this only applies to combinations nothing else claims.
 */
.MuiButton-root:hover,
.MuiButton-root:focus {
	color: inherit !important;
	background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Text buttons ---------------------------------------------------------- */

.MuiButton-text:hover,
.MuiButton-text:focus {
	background-color: rgba(25, 118, 210, 0.06) !important;
}

/*
 * color="inherit" - used by the played-down "Check in again" action, which
 * must keep the surrounding text colour rather than pick up a palette one.
 */
.MuiButton-textInherit:hover,
.MuiButton-textInherit:focus {
	color: inherit !important;
	background-color: rgba(0, 0, 0, 0.04) !important;
}

.MuiButton-textPrimary:hover,
.MuiButton-textPrimary:focus {
	color: #1976d2 !important;
}

.MuiButton-textWarning:hover,
.MuiButton-textWarning:focus {
	color: #ed6c02 !important;
	background-color: rgba(237, 108, 2, 0.06) !important;
}

.MuiButton-textError:hover,
.MuiButton-textError:focus {
	color: #d32f2f !important;
	background-color: rgba(211, 47, 47, 0.06) !important;
}

/* Outlined buttons ------------------------------------------------------ */

.MuiButton-outlinedPrimary:hover,
.MuiButton-outlinedPrimary:focus {
	color: #1976d2 !important;
	border-color: #1976d2 !important;
	background-color: rgba(25, 118, 210, 0.06) !important;
}

.MuiButton-outlinedWarning:hover,
.MuiButton-outlinedWarning:focus {
	color: #ed6c02 !important;
	border-color: #ed6c02 !important;
	background-color: rgba(237, 108, 2, 0.06) !important;
}

.MuiButton-outlinedInherit:hover,
.MuiButton-outlinedInherit:focus {
	color: inherit !important;
	border-color: rgba(0, 0, 0, 0.35) !important;
	background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Contained buttons ----------------------------------------------------- */

.MuiButton-containedPrimary:hover,
.MuiButton-containedPrimary:focus {
	color: #fff !important;
	background-color: #1565c0 !important;
}

.MuiButton-containedWarning:hover,
.MuiButton-containedWarning:focus {
	color: #fff !important;
	background-color: #e65100 !important;
}

.MuiButton-containedError:hover,
.MuiButton-containedError:focus {
	color: #fff !important;
	background-color: #c62828 !important;
}

/* Disabled buttons must not react at all. */
.MuiButton-root.Mui-disabled:hover,
.MuiButton-root.Mui-disabled:focus {
	color: rgba(0, 0, 0, 0.26) !important;
	background-color: transparent !important;
}

.MuiButton-contained.Mui-disabled:hover,
.MuiButton-contained.Mui-disabled:focus {
	background-color: rgba(0, 0, 0, 0.12) !important;
}

/* Focus ----------------------------------------------------------------- */

/*
 * Clicking a button should not leave a box around it. Keyboard focus still
 * gets a visible ring through :focus-visible.
 */
.MuiButton-root:focus,
.MuiIconButton-root:focus,
.MuiToggleButton-root:focus {
	outline: none !important;
	box-shadow: none !important;
}

.MuiButton-root:focus-visible,
.MuiIconButton-root:focus-visible,
.MuiToggleButton-root:focus-visible {
	outline: 2px solid #1976d2 !important;
	outline-offset: 2px !important;
}

/* Icon and toggle buttons ----------------------------------------------- */

.MuiIconButton-root:hover,
.MuiIconButton-root:focus {
	color: inherit !important;
	background-color: rgba(0, 0, 0, 0.04) !important;
}

.MuiToggleButton-root:hover,
.MuiToggleButton-root:focus {
	color: rgba(0, 0, 0, 0.6) !important;
	background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Keeps the selected filter readable, which the hover rule above would undo. */
.MuiToggleButton-root.Mui-selected,
.MuiToggleButton-root.Mui-selected:hover,
.MuiToggleButton-root.Mui-selected:focus {
	color: #1976d2 !important;
	background-color: rgba(25, 118, 210, 0.12) !important;
}

/*
 * The theme strips borders from buttons, which left these reading as two flat
 * bars rather than one segmented control. Put the outline back, with the
 * rounded ends and shared middle edge a toggle group is supposed to have.
 */
.MuiToggleButtonGroup-root .MuiToggleButton-root {
	border: 1px solid rgba(0, 0, 0, 0.23) !important;
	color: rgba(0, 0, 0, 0.6) !important;
}

.MuiToggleButtonGroup-root .MuiToggleButton-root:not(:first-of-type) {
	border-left: 0 !important;
}

.MuiToggleButtonGroup-root .MuiToggleButton-root:first-of-type {
	border-radius: 4px 0 0 4px !important;
}

.MuiToggleButtonGroup-root .MuiToggleButton-root:last-of-type {
	border-radius: 0 4px 4px 0 !important;
}

.MuiToggleButtonGroup-root .MuiToggleButton-root.Mui-selected,
.MuiToggleButtonGroup-root .MuiToggleButton-root.Mui-selected:hover,
.MuiToggleButtonGroup-root .MuiToggleButton-root.Mui-selected:focus {
	border-color: rgba(25, 118, 210, 0.5) !important;
	color: #1976d2 !important;
}

/* Text inputs ----------------------------------------------------------- */

/*
 * The theme gives every <input> its own border, background and focus ring.
 * Inside a MUI field that draws a second box within the outlined one, because
 * MUI's border belongs to the fieldset around the input, not to the input.
 */
.MuiInputBase-root input,
.MuiInputBase-root textarea,
.MuiInputBase-root select {
	border: 0 !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.MuiInputBase-root input:focus,
.MuiInputBase-root textarea:focus,
.MuiInputBase-root select:focus {
	outline: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Dialogs --------------------------------------------------------------- */

.MuiDialog-root .MuiDialogActions-root {
	gap: 0.5rem;
	padding: 0.75rem 1.5rem 1.25rem;
}

.MuiDialog-root .MuiDialogActions-root .MuiButton-root {
	min-height: 44px;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (max-width: 1024px) {
	/* Side by side these truncate; stacked they stay readable and tappable. */
	.MuiDialog-root .MuiDialogActions-root {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.MuiDialog-root .MuiDialogActions-root .MuiButton-root {
		width: 100%;
		margin-left: 0;
	}
}
