/**
 * DiceBar front-end styles.
 *
 * Every number here has a default supplied as a custom property by
 * DiceBar_Styles, so the administrator's settings drive the layout without this
 * file changing. The fallbacks are the measured values from the design spec.
 */

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

	box-sizing: border-box;
}

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

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

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

.dicebar--fixed.dicebar--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( --dicebar-clearance ) + env( safe-area-inset-bottom, 0px ) );
}

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

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

@media screen and ( min-width: 783px ) {
	.dicebar--fixed.dicebar--top.dicebar--admin-bar {
		top: 32px;
	}
}

.dicebar--fixed .dicebar__inner {
	pointer-events: auto;
	margin-inline: auto;
	max-width: var( --dicebar-max-width );
}

.dicebar--fixed.dicebar--full {
	padding-inline: 0;
}

.dicebar--fixed.dicebar--full .dicebar__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. */
.dicebar--fixed.is-away {
	transform: translateY( 140% );
	opacity: 0;
	pointer-events: none;
}

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

.dicebar--entrance-none {
	transition: none;
}

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

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

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

.dicebar--shadow-strong .dicebar__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. */
.dicebar--preset-glass .dicebar__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 ) ) ) {
	.dicebar--blur .dicebar__inner {
		background: color-mix( in srgb, var( --dicebar-bar-bg ) var( --dicebar-opacity ), transparent );
		-webkit-backdrop-filter: blur( var( --dicebar-glass ) ) saturate( 180% );
		backdrop-filter: blur( var( --dicebar-glass ) ) saturate( 180% );
	}

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

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

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

.dicebar--preset-minimal .dicebar__item {
	background: color-mix( in srgb, var( --dicebar-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. */
.dicebar--preset-bold .dicebar__inner {
	background: var( --dicebar-bold-bg );
	color: var( --dicebar-hover-text );
	border: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.dicebar--preset-bold .dicebar__icon {
	color: var( --dicebar-hover-text );
}

.dicebar--preset-bold .dicebar__item,
.dicebar--preset-bold .dicebar__label {
	color: var( --dicebar-hover-text );
}

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

.dicebar--preset-bold .dicebar__item:hover .dicebar__icon {
	color: var( --dicebar-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. */
.dicebar__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --dicebar-icon-gap );
	min-height: var( --dicebar-min-height );
	padding: 4px 2px;
	border: 0;
	border-radius: var( --dicebar-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;
}

.dicebar__icon {
	width: var( --dicebar-icon-size );
	height: var( --dicebar-icon-size );
	flex: none;
	color: var( --dicebar-icon );
}

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

.dicebar--case-upper .dicebar__label {
	text-transform: uppercase;
}

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

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

.dicebar--divider-hairline .dicebar__item + .dicebar__item {
	position: relative;
}

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

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

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

.dicebar--item-outline .dicebar__item {
	box-shadow: inset 0 0 0 1px var( --dicebar-divider );
}

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

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

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

.dicebar__item:hover .dicebar__icon,
.dicebar__item:focus-visible .dicebar__icon {
	color: var( --dicebar-hover-text );
}

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

.dicebar__item:focus-visible {
	outline: 2px solid var( --dicebar-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. */
.dicebar__item--brand .dicebar__icon {
	color: var( --dicebar-brand );
}

.dicebar__item--brand:hover .dicebar__icon,
.dicebar__item--brand:focus-visible .dicebar__icon {
	color: var( --dicebar-hover-text );
}

.dicebar__item--primary {
	color: var( --dicebar-accent );
}

.dicebar__item--primary .dicebar__icon {
	color: var( --dicebar-accent );
}

.dicebar__item--primary:hover,
.dicebar__item--primary:focus-visible {
	background: var( --dicebar-accent );
	color: var( --dicebar-hover-text );
}

span.dicebar__item {
	cursor: default;
}

span.dicebar__item:hover {
	background: transparent;
	color: inherit;
	transform: none;
}

/* ---- Preview mode -----------------------------------------------------
 *
 * The settings screen needs the fixed bar exactly as it renders, minus the
 * fixed positioning. Inline mode is the wrong tool for that: it strips the
 * panel on purpose, so every look came out identical. This keeps the panel
 * and every preset rule, and only takes the bar out of the viewport.
 */

.dicebar--preview {
	position: static;
	padding: 0;
	pointer-events: none;
}

/* ---- Inline mode ------------------------------------------------------ */

/* A shadow pooling against a panel edge is the tell that something is nested
   wrongly, so inline mode drops the bar's own chrome entirely. */
.dicebar--inline {
	position: static;
	padding: 0;
}

.dicebar--inline .dicebar__inner {
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
	max-width: 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 ) {
	.dicebar,
	.dicebar__item {
		transition-duration: 0.01ms !important;
	}
}

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

@media print {
	.dicebar--fixed {
		display: none !important;
	}
}