xamxam/app/public/assets/css/components/buttons.css

/* ============================================================
   BUTTONS — Shared .btn base class with variant modifiers.
   Targets both <a> and <button>. Always has a background.
   Root class: .btn
   ============================================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3xs);
	padding: var(--space-xs);
	border-radius: var(--radius);
	font-size: var(--step--1);
	font-family: inherit;
	font-weight: 500;
	letter-spacing: 0.04em;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.3;
	border: none;
	transition:
		background 0.15s,
		opacity 0.15s,
		box-shadow 0.15s,
		filter 0.15s;
	width: fit-content;
}

.btn:hover {
	filter: brightness(0.92);
}

/* Primary: accent background, white text */
.btn--primary {
	background: var(--accent-primary);
	color: var(--accent-foreground);
	border: 1px solid transparent;
}

.btn--primary:hover {
	background: var(--accent-secondary);
	filter: none;
}

/* Secondary: light background with border */
.btn--secondary {
	background: var(--bg-primary);
	color: var(--text-secondary);
	border: 1px solid var(--border-primary);
}

.btn--secondary:hover {
	border-color: var(--text-secondary);
	color: var(--text-primary);
	filter: none;
}

/* Muted secondary: bg-secondary background */
.btn--muted {
	background: var(--bg-secondary);
	color: var(--text-secondary);
	border: 1px solid var(--border-primary);
}

.btn--muted:hover {
	background: var(--bg-tertiary);
	color: var(--text-primary);
	filter: none;
}

/* Ghost: transparent bg, border, for links styled as buttons */
.btn--ghost {
	background: transparent;
	color: var(--text-secondary);
	border: 1px solid var(--border-primary);
}

.btn--ghost:hover {
	border-color: var(--text-secondary);
	color: var(--text-primary);
	filter: none;
}

/* Danger: red background */
.btn--danger {
	background: var(--accent-red);
	color: var(--accent-foreground);
}

.btn--danger:hover {
	filter: brightness(0.9);
}

/* Warning: yellow background */
.btn--warning {
	background: var(--accent-yellow);
	color: var(--text-primary);
}

.btn--warning:hover {
	filter: brightness(0.9);
}

/* Success: green background */
.btn--success {
	background: var(--accent-green);
	color: var(--accent-foreground);
}

.btn--success:hover {
	filter: brightness(0.9);
}

/* Small size modifier */
.btn--sm {
	padding: var(--space-2xs) var(--space-xs);
	font-size: var(--step--2);
}

/* Large size modifier */
.btn--lg {
	padding: var(--space-s) var(--space-m);
	font-size: var(--step-0);
}

/* Semantic colour modifiers on muted base (for table/action buttons) */
.btn--blue {
	background: var(--blue-muted-bg);
	color: var(--accent-blue);
	border: 1px solid var(--blue-muted-border);
}

.btn--blue:hover {
	background: var(--blue-muted-bg-hover);
	filter: none;
}

.btn--yellow {
	background: var(--yellow-muted-bg);
	color: var(--accent-yellow);
	border: 1px solid var(--yellow-muted-border);
}

.btn--yellow:hover {
	background: var(--yellow-muted-bg-hover);
	filter: none;
}

.btn--green {
	background: var(--green-muted-bg);
	color: var(--accent-green);
	border: 1px solid var(--green-muted-border);
}

.btn--green:hover {
	background: var(--green-muted-bg-hover);
	filter: none;
}

.btn--red {
	background: var(--error-muted-bg);
	color: var(--error);
	border: 1px solid var(--danger-border-muted);
}

.btn--red:hover {
	filter: brightness(0.9);
}

/* Tooltips — display when a .btn carries a data-tip attribute.
   Shown below the button on hover/focus, positioned above the
   toolbar so it never clips inside the scrollable table. */
.btn[data-tip] {
	position: relative;
}

.btn[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	width: max-content;
	max-width: 260px;
	padding: var(--space-3xs) var(--space-xs);
	border-radius: var(--radius);
	background: var(--text-primary);
	color: var(--bg-primary);
	font-size: var(--step--2);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	z-index: 1000;
	transition: opacity 0.12s ease;
}

.btn[data-tip]:hover::after,
.btn[data-tip]:focus::after {
	opacity: 1;
}

/* Small arrow below the bubble pointing at the button */
.btn[data-tip]::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: calc(100% + 4px);
	transform: translateX(-50%);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 4px solid var(--text-primary);
	opacity: 0;
	pointer-events: none;
	z-index: 1000;
	transition: opacity 0.12s ease;
}

.btn[data-tip]:hover::before,
.btn[data-tip]:focus::before {
	opacity: 1;
}