/* the tabs of a part of the application (Přehled/Seznam, Seznam/Vazby, the administration …): in the top bar on every page, one look */
/* One file for one part of the application: a change of that part touches only this file. */

.top-left {
  margin-right: auto;
  max-width: 100%;
}
/* not like the filter pills (those are filled when chosen): a tab is outlined, the tab you are on has a frame and a tinted ground */
.top-left .admin-tabs {
  flex-wrap: wrap;
  gap: 8px;
}
.top-left .admin-tabs .chip {
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
}
.top-left .admin-tabs .chip:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.top-left .admin-tabs .chip.on {
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
html[data-theme='dark'] .top-left .admin-tabs .chip.on {
  color: var(--link, var(--accent));
  border-color: var(--link, var(--accent));
}
html.glass .top-left .admin-tabs .chip {
  background: var(--g-pill);
  border: 2px solid var(--g-pill-border);
  color: var(--ink);
}
html.glass .top-left .admin-tabs .chip.on {
  background: color-mix(in srgb, var(--accent) 16%, var(--g-pill));
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--g-pill-shadow);
}
html.glass[data-theme='dark'] .top-left .admin-tabs .chip.on {
  color: var(--link, var(--accent));
  border-color: var(--link, var(--accent));
}