/*
 * Mobile footer bar styles, ported from the DiceBar plugin.
 *
 * Every number here has a default supplied as a custom property by
 * GTB_Footer_Bar_Styles, so the Customizer settings drive the layout without
 * this file changing. The fallbacks are the measured values from the design
 * spec.
 *
 * @package GTB_Pro
 */

.gtb-bar {
	--gtb-bar-bar-bg: #fff;
	--gtb-bar-text: #1c1c1e;
	--gtb-bar-accent: #0a84ff;
	--gtb-bar-icon: #1c1c1e;
	--gtb-bar-hover-bg: #0a84ff;
	--gtb-bar-hover-text: #fff;
	--gtb-bar-divider: rgba(0, 0, 0, 0.12);
	--gtb-bar-bold-bg: #0a84ff;
	--gtb-bar-radius: 18px;
	--gtb-bar-item-radius: 13px;
	--gtb-bar-min-height: 52px;
	--gtb-bar-icon-size: 18px;
	--gtb-bar-icon-gap: 3px;
	--gtb-bar-gap: 11px;
	--gtb-bar-label-size: 10px;
	--gtb-bar-max-width: 640px;
	--gtb-bar-z: 9990;
	--gtb-bar-clearance: 0px;
	--gtb-bar-glass: 22px;
	--gtb-bar-opacity: 78%;

	box-sizing: border-box;
}

.gtb-bar *,
.gtb-bar *::before,
.gtb-bar *::after {
	box-sizing: inherit;
}

/* ---- Fixed mode ------------------------------------------------------- */

.gtb-bar--fixed {
	position: fixed;
	inset-inline: 0;
	z-index: var(--gtb-bar-z);
	padding: 10px;
	pointer-events: none;
	transition: transform 0.28s ease, opacity 0.28s ease;
}

.gtb-bar--fixed.gtb-bar--bottom {
	bottom: 0;

	/* Without the safe-area inset the bar sits under the home indicator and
	   the bottom row of targets cannot be hit. */
	padding-bottom: calc(10px + var(--gtb-bar-clearance) + env(safe-area-inset-bottom, 0px));
}

.gtb-bar--fixed.gtb-bar--top {
	top: 0;
	padding-top: calc(10px + env(safe-area-inset-top, 0px));
}

.gtb-bar--fixed.gtb-bar--top.gtb-bar--admin-bar {
	top: 46px;
}

@media screen and (min-width: 783px) {

	.gtb-bar--fixed.gtb-bar--top.gtb-bar--admin-bar {
		top: 32px;
	}
}

.gtb-bar--fixed .gtb-bar__inner {
	pointer-events: auto;
	margin-inline: auto;
	max-width: var(--gtb-bar-max-width);
}

.gtb-bar--fixed.gtb-bar--full {
	padding-inline: 0;
}

.gtb-bar--fixed.gtb-bar--full .gtb-bar__inner {
	border-radius: 0;
	max-width: none;
}

/* 140% rather than 100%: the shadow extends past the box, and 100% leaves a
   smudge of it visible along the edge. */
.gtb-bar--fixed.is-away {
	transform: translateY(140%);
	opacity: 0;
	pointer-events: none;
}

.gtb-bar--fixed.gtb-bar--top.is-away {
	transform: translateY(-140%);
}

.gtb-bar--entrance-none {
	transition: none;
}

/* ---- The panel -------------------------------------------------------- */

.gtb-bar__inner {
	display: flex;
	align-items: stretch;
	gap: var(--gtb-bar-gap);
	padding: 6px;
	border-radius: var(--gtb-bar-radius);
	background: var(--gtb-bar-bar-bg);
	color: var(--gtb-bar-text);
}

.gtb-bar--shadow-soft .gtb-bar__inner {
	box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.22), 0 22px 44px -28px rgba(0, 0, 0, 0.34);
}

.gtb-bar--shadow-strong .gtb-bar__inner {
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.3), 0 28px 56px -24px rgba(0, 0, 0, 0.45);
}

/* ---- Presets ----------------------------------------------------------
 *
 * A preset is a look, not a lock: every value it sets is still a custom
 * property the owner can override. They exist because "make it look like the
 * bar on my phone" is a request nobody should have to translate into eight
 * separate settings.
 */

/* Glass. The frosted, floating panel people mean when they ask for an
 * Apple-like bar. The translucency lives inside the support query on purpose:
 * without a blur behind it, a see-through bar over a photograph is the one
 * case where it is genuinely unreadable. 90% opacity is where labels stop
 * swimming, and the inset highlight is what gives the top edge its lift. */
.gtb-bar--preset-glass .gtb-bar__inner {
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow:
		0 4px 14px -8px rgba(0, 0, 0, 0.24),
		0 22px 44px -28px rgba(0, 0, 0, 0.36),
		inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.gtb-bar--blur .gtb-bar__inner {
		background: color-mix(in srgb, var(--gtb-bar-bar-bg) var(--gtb-bar-opacity), transparent);
		-webkit-backdrop-filter: blur(var(--gtb-bar-glass)) saturate(180%);
		backdrop-filter: blur(var(--gtb-bar-glass)) saturate(180%);
	}

	.gtb-bar--preset-glass.gtb-bar--blur .gtb-bar__inner {
		background: color-mix(in srgb, var(--gtb-bar-bar-bg) var(--gtb-bar-opacity), transparent);
		-webkit-backdrop-filter: blur(var(--gtb-bar-glass)) saturate(200%);
		backdrop-filter: blur(var(--gtb-bar-glass)) saturate(200%);
	}
}

/* Solid. No translucency at all, for a bar sitting over busy photography or a
 * theme that already blurs its own header. */
.gtb-bar--preset-solid .gtb-bar__inner {
	background: var(--gtb-bar-bar-bg);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Minimal. No panel: the buttons sit directly on the page. */
.gtb-bar--preset-minimal .gtb-bar__inner {
	background: transparent;
	box-shadow: none;
	border: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.gtb-bar--preset-minimal .gtb-bar__item {
	background: color-mix(in srgb, var(--gtb-bar-bar-bg) 92%, transparent);
	box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.4);
}

/* Bold. A filled bar, for one that is the page's main call to action
 * rather than a quiet utility. It has its own colour rather than reusing
 * the accent, because the accent also paints the standout item and a bar
 * whose fill matches its own highlight hides that highlight. */
.gtb-bar--preset-bold .gtb-bar__inner {
	background: var(--gtb-bar-bold-bg);
	color: var(--gtb-bar-hover-text);
	border: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.gtb-bar--preset-bold .gtb-bar__icon {
	color: var(--gtb-bar-hover-text);
}

.gtb-bar--preset-bold .gtb-bar__item,
.gtb-bar--preset-bold .gtb-bar__label {
	color: var(--gtb-bar-hover-text);
}

.gtb-bar--preset-bold .gtb-bar__item:hover,
.gtb-bar--preset-bold .gtb-bar__item:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	color: var(--gtb-bar-hover-text);
}

.gtb-bar--preset-bold .gtb-bar__item:hover .gtb-bar__icon {
	color: var(--gtb-bar-hover-text);
}

/* ---- Items ------------------------------------------------------------ */

/* Equal cells. Sizing to content produced cells of 138, 138 and 44 pixels:
   the dividers landed wrongly and the last item read as stranded rather than
   as the third of three. min-width:0 is what lets a flex child shrink below
   its content and is why the row never scrolls sideways. */
.gtb-bar__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gtb-bar-icon-gap);
	min-height: var(--gtb-bar-min-height);
	padding: 4px 2px;
	border: 0;
	border-radius: var(--gtb-bar-item-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.gtb-bar__icon {
	width: var(--gtb-bar-icon-size);
	height: var(--gtb-bar-icon-size);
	flex: none;
	color: var(--gtb-bar-icon);
}

.gtb-bar__label {
	font-size: var(--gtb-bar-label-size);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gtb-bar--case-upper .gtb-bar__label {
	text-transform: uppercase;
}

/* Label-only items sit on a single line, so the column gap would push the
   text off centre. */
.gtb-bar--show-label .gtb-bar__item {
	gap: 0;
}

.gtb-bar--show-label .gtb-bar__label {
	font-size: calc(var(--gtb-bar-label-size) * 1.25);
	letter-spacing: 0.04em;
}

.gtb-bar--divider-hairline .gtb-bar__item + .gtb-bar__item {
	position: relative;
}

.gtb-bar--divider-hairline .gtb-bar__item + .gtb-bar__item::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--gtb-bar-gap) / -2 - 0.5px);
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 26px;
	background: var(--gtb-bar-divider);
}

/* ---- Item shapes ------------------------------------------------------ */

.gtb-bar--item-filled .gtb-bar__item {
	background: color-mix(in srgb, var(--gtb-bar-text) 6%, transparent);
}

.gtb-bar--item-outline .gtb-bar__item {
	box-shadow: inset 0 0 0 1px var(--gtb-bar-divider);
}

.gtb-bar--item-soft .gtb-bar__item {
	background: color-mix(in srgb, var(--gtb-bar-accent) 10%, transparent);
}

/* ---- States ----------------------------------------------------------- */

.gtb-bar__item:hover,
.gtb-bar__item:focus-visible {
	background: var(--gtb-bar-hover-bg);
	color: var(--gtb-bar-hover-text);
	transform: translateY(-1px);
}

.gtb-bar__item:hover .gtb-bar__icon,
.gtb-bar__item:focus-visible .gtb-bar__icon {
	color: var(--gtb-bar-hover-text);
}

/* The press-down is what makes it feel like a control rather than a picture
   of one. */
.gtb-bar__item:active {
	transform: none;
}

.gtb-bar__item:focus-visible {
	outline: 2px solid var(--gtb-bar-accent);
	outline-offset: 2px;
}

/* A network's own colour, so a row of social marks reads at a glance.
   The hover state still takes the colour back, because a pressed button
   should look pressed whatever its resting colour is. */
.gtb-bar__item--brand .gtb-bar__icon {
	color: var(--gtb-bar-brand);
}

.gtb-bar__item--brand:hover .gtb-bar__icon,
.gtb-bar__item--brand:focus-visible .gtb-bar__icon {
	color: var(--gtb-bar-hover-text);
}

.gtb-bar__item--primary {
	color: var(--gtb-bar-accent);
}

.gtb-bar__item--primary .gtb-bar__icon {
	color: var(--gtb-bar-accent);
}

.gtb-bar__item--primary:hover,
.gtb-bar__item--primary:focus-visible {
	background: var(--gtb-bar-accent);
	color: var(--gtb-bar-hover-text);
}

span.gtb-bar__item {
	cursor: default;
}

span.gtb-bar__item:hover {
	background: transparent;
	color: inherit;
	transform: none;
}

/* ---- Reduced motion --------------------------------------------------- */

/* The states still apply; they just arrive at once, which is what someone who
   asked for less motion wants. */
@media (prefers-reduced-motion: reduce) {

	.gtb-bar,
	.gtb-bar__item {
		transition-duration: 0.01ms !important;
	}
}

/* ---- Print ------------------------------------------------------------ */

@media print {

	.gtb-bar--fixed {
		display: none !important;
	}
}