/* Avokado Studio — buttons.
 *
 * Every button in the app and the portal is styled here and nowhere else.
 * They were spread across two stylesheets, which is why an <a class="avk-btn">
 * came out blue while the button next to it did not.
 *
 * Rules:
 *   - one base class, .avk-btn, plus modifiers
 *   - <a> and <button> must be indistinguishable
 *   - anything with a background that carries text uses --accent-ink
 *   - nothing outside this file styles a button
 */

.avk-btn,
a.avk-btn,
button.avk-btn {
	--btn-height: 36px;
	--btn-padding: 0 13px;
	--btn-size: 13.5px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: var(--btn-height);
	padding: var(--btn-padding);
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--surface);
	color: var(--ink);
	font-family: inherit;
	font-size: var(--btn-size);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .12s, background .12s, color .12s;
	-webkit-appearance: none;
	appearance: none;
}

.avk-btn:hover { border-color: var(--ink-3); background: var(--canvas); color: var(--ink); }
.avk-btn:active { transform: translateY(1px); }
.avk-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.avk-btn[disabled], .avk-btn:disabled { opacity: .5; cursor: not-allowed; }
.avk-btn svg { width: 15px; height: 15px; flex: none; }

/* Primary. The fill is --accent-ink, not --accent: white on the light accent
   measures 3.26:1 and fails AA at this size. */
.avk-btn-primary,
a.avk-btn-primary,
button.avk-btn-primary {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
	color: #fff;
}
.avk-btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.avk-btn-primary svg { color: #fff; }

.avk-btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.avk-btn-ghost:hover { background: var(--canvas); border-color: var(--line); }

.avk-btn-danger { color: var(--s-rejected); }
.avk-btn-danger:hover { border-color: var(--s-rejected); background: var(--surface); color: var(--s-rejected); }

.avk-btn-sm { --btn-height: 28px; --btn-padding: 0 9px; --btn-size: 12.5px; border-radius: 7px; }
.avk-btn-sm svg { width: 13px; height: 13px; }

.avk-btn-lg { --btn-height: 44px; --btn-padding: 0 18px; --btn-size: 14.5px; }

/* Icon-only, square. Used in the top bar and for calendar navigation. */
.avk-ubtn {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--surface);
	color: var(--ink-2);
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	position: relative;
	transition: border-color .12s, color .12s;
}
.avk-ubtn:hover { border-color: var(--ink-3); color: var(--ink); }
.avk-ubtn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Segmented control: one choice out of a few. */
.avk-seg { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line);
	border-radius: 9px; background: var(--canvas); width: fit-content; }
.avk-seg button { height: 28px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent;
	color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.avk-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(22,33,28,.08); }

/* Pills double as toggles, so they are buttons too. */
.avk-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
	border: 1px solid var(--line); border-radius: 99px; background: var(--canvas);
	color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 500; cursor: default; }
button.avk-pill { cursor: pointer; }
button.avk-pill:hover { border-color: var(--ink-3); }
.avk-pill-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* Toolbar buttons above a text field. */
.avk-tbar { display: flex; gap: 6px; margin-bottom: 6px; }
.avk-tbar button { height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px;
	background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.avk-tbar button:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* Rows of actions in a table cell. */
.avk-actions { text-align: right; white-space: nowrap; }
.avk-actions .avk-btn + .avk-btn { margin-left: 4px; }

/* Icon-only actions inside a table row. Same target size as a small button,
   with the label carried in title and aria-label so it is still announced. */
.avk-icon-btn, a.avk-icon-btn, button.avk-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	margin-left: 4px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--ink-2);
	cursor: pointer;
	text-decoration: none;
	transition: border-color .12s, color .12s, background .12s;
}
.avk-icon-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.avk-icon-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.avk-icon-btn svg { width: 15px; height: 15px; }
.avk-icon-primary { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.avk-icon-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.avk-icon-danger:hover { border-color: var(--s-rejected); color: var(--s-rejected); }

/* On a phone a segmented control scrolls rather than breaking its labels
   over two lines ("μέλος / της ομάδας"), 2.1.0. */
@media (max-width: 900px) {
	.avk-seg button { white-space: nowrap; flex: none; }
}

/* A carousel's arrows, over the picture (2.10.6). */
.avk-fnav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #111; box-shadow: 0 1px 4px rgba(0, 0, 0, .28); display: grid; place-items: center; cursor: pointer; z-index: 1; }
.avk-fnav svg, .avk-fnav .avk-ic { width: 18px; height: 18px; }
.avk-fnav:hover { background: #fff; }
.avk-fnav[disabled] { display: none; }
.avk-fnav-prev { left: 8px; }
.avk-fnav-next { right: 8px; }
/* A post up on some of its networks (2.16.0). */
.avk-pill-partial { color: var(--s-pending); border-color: color-mix(in srgb, var(--s-pending) 45%, transparent); background: color-mix(in srgb, var(--s-pending) 10%, transparent); }
/* A heart on an announcement (2.17.0). */
.avk-nf-like { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid var(--line);
	border-radius: 99px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; }
.avk-nf-like span { font-size: 13px; line-height: 1; }
.avk-nf-like[aria-pressed="true"] { color: #b83b50; border-color: #e0a3ad; background: #fcf1f3; }
.avk-ann-heart:not([disabled]) { color: #b83b50; border-color: #e0a3ad; background: #fcf1f3; }