/* ==========================================================================
 * # Button
 * --------------------------------------------------------------------------
 * Classes: .b .b-pri .b-sec .b-ghost .b-danger .b-dsolid .b-sm .b-full .b-off
 *          .ib .ib-plain .ib-pri .ib-sm
 *
 * Ported from the design's tokens-and-components.css, exact values kept.
 * Every control has a visible shape at rest (fill, tint or outline); hover only
 * adds emphasis (a brightness filter or a tint).
 *
 *   .b-pri     vivid primary, one per view
 *   .b-sec     blue outline
 *   .b-ghost   tonal, light blue fill, low emphasis
 *   .b-danger  red outline, always opens a confirm
 *   .b-dsolid  vivid red, the confirm itself
 *   .b-sm      smaller, for rows and cards
 *   .b-off     disabled look (also applied to any disabled .b)
 *   .ib        icon button, blue tint (edit, copy)
 *   .ib-plain  icon button, grey (back, close, sign out)
 *   .ib-pri    icon button, vivid (add)
 *
 * Icon buttons need an aria-label and a title.
 * ========================================================================== */

.b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 10px;
	border: 1.5px solid transparent;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.b-pri {
	background: var(--pri-fill);
	color: var(--on-pri);

	&:hover {
		background: var(--pri-fill);
		color: var(--on-pri);
		filter: brightness(.94);
	}
}

.b-sec {
	background: var(--surface);
	border-color: var(--pri);
	color: var(--pri);

	&:hover {
		background: var(--pri-tint);
		color: var(--pri);
	}
}

.b-ghost {
	background: var(--pri-tint-2);
	color: var(--nav-on);
	padding: 0 14px;

	&:hover {
		background: var(--pri-tint-2);
		color: var(--nav-on);
		filter: brightness(.96);
	}
}

.b-danger {
	background: var(--surface);
	border-color: var(--danger);
	color: var(--danger);

	&:hover {
		background: var(--danger-tint);
		color: var(--danger);
	}
}

.b-dsolid {
	background: var(--danger-solid);
	color: var(--on-danger);

	&:hover {
		background: var(--danger-solid);
		color: var(--on-danger);
		filter: brightness(.94);
	}
}

.b-sm {
	min-height: 36px;
	padding: 0 12px;
	font-size: 14px;
	border-radius: 8px;
}

.b-full {
	width: 100%;
}

/* Disabled: the mock class and the real attribute look the same. */
.b-off,
.b-off:hover,
.b:disabled,
.b:disabled:hover,
.b[aria-disabled="true"],
.b[aria-disabled="true"]:hover {
	background: var(--neutral-bg);
	border-color: var(--neutral-bg);
	color: var(--muted);
	filter: none;
	cursor: not-allowed;
}



/* -- Icon buttons -- */

.ib {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	border: 0;
	background: var(--pri-tint-2);
	color: var(--nav-on);
	cursor: pointer;
	flex: none;
	text-decoration: none;
	padding: 0;
	font: inherit;

	&:hover {
		background: var(--ring);
		color: var(--nav-on);
	}
}

.ib-plain {
	background: var(--neutral-bg);
	color: var(--ink);

	&:hover {
		background: var(--line-2);
		color: var(--ink);
	}
}

.ib-pri {
	background: var(--pri-fill);
	color: var(--on-pri);

	&:hover {
		background: var(--pri-fill);
		color: var(--on-pri);
		filter: brightness(.94);
	}
}

.ib-sm {
	width: 36px;
	height: 36px;
	border-radius: 8px;
}