/* What every DataGroceries app's pages share (dg_core/base.html). */

/* An @-mention in rendered text (datagroceries.core.mentions), like a chip, so the colleague it reaches stands out. */
.dg-mention { padding: 0 .3em; border-radius: .3rem; font-weight: 600; color: var(--bs-primary);
                 background: color-mix(in srgb, var(--bs-primary) 12%, transparent); white-space: nowrap; }

/* The switch between the DataGroceries apps at the top of every page (dg_core/base.html). */
.dg-apps { display: flex; gap: .15rem; margin: 0; padding: .1rem; list-style: none; border-radius: .4rem; background: var(--bs-tertiary-bg); }
.dg-apps a { display: block; padding: .1rem .55rem; border-radius: .3rem; color: var(--bs-secondary-color); text-decoration: none; }
.dg-apps a:hover { color: var(--bs-body-color); }
.dg-apps a[aria-current="page"] { background: var(--bs-body-bg); color: var(--bs-emphasis-color); font-weight: 600;
                                     box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }