/*
  The admin in the new design (Keith's "Admin Market" mock), for Atomics.

  Core's admin chrome (`admin-layout`, `admin-sidebar`, `admin-topbar`) keeps its own look on every
  other deployment; Atomics turns this one on by linking the sheet (`api/vars/site`). It restyles the
  chrome only, from the `--ds-*` tokens in `design.css`, so a page that has not moved to the new
  design yet still renders as it did, inside the new frame.

  Every rule starts at `:root admin-layout`, so it outranks the elements' own sheets whatever order
  they load in, and reaches nothing outside the admin.
*/

:root {
  --ds-side: #fbfbfa;
  --ds-hover: #efefed;
  --ds-solid: #161616;
  --ds-on-solid: #ffffff;
}

:root[data-theme='dark'] {
  --ds-side: #111112;
  --ds-hover: #2c2c2e;
  --ds-solid: #f5f5f7;
  --ds-on-solid: #161616;
}

/* ---------------- FRAME ---------------- */

:root admin-layout,
:root admin-layout .admin {
  background: var(--ds-bg);
  color: var(--ds-ink);
}

:root admin-layout .admin-viewport-container {
  padding: 16px 28px 48px;
}

/* A page in the new design (its root carries `ds-page`) draws its own margins, edge to edge. */
:root admin-layout .admin-viewport-container:has(.ds-page) {
  padding: 0;
}

/* ---------------- SIDE COLUMN ---------------- */

:root admin-layout admin-sidebar {
  width: 252px;
  background: var(--ds-side);
  border-right: 1px solid var(--ds-line);
  font-family: var(--ds-font);
}

:root admin-layout .admin-sidebar-brand {
  gap: 12px;
  padding: 16px 16px 14px;
  color: var(--ds-ink);
}

:root admin-layout .admin-sidebar-brand-mark {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--ds-solid);
  color: var(--ds-on-solid);
}

:root admin-layout .admin-sidebar-brand-name {
  font-family: var(--ds-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-ink);
}

:root admin-layout .admin-sidebar-brand-kind {
  font-family: var(--ds-font);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-mute);
}

:root admin-layout .admin-sidebar-scroll {
  padding: 4px 12px 16px;
}

:root admin-layout admin-sidebar ul {
  gap: 2px;
}

:root admin-layout admin-sidebar ul li {
  border-radius: 10px;
}

:root admin-layout admin-sidebar ul li:hover {
  background: transparent;
}

/* The row is the surface: a soft fill on hover, solid when current. No wipe. */
:root admin-layout .admin-sidebar-row {
  border-radius: 10px;
}

:root admin-layout .admin-sidebar-row::before {
  display: none;
}

:root admin-layout .admin-sidebar-row:hover {
  background: var(--ds-hover);
}

:root admin-layout .admin-sidebar-row > a {
  min-height: 36px;
  gap: 11px;
  padding: 0 10px;
  color: var(--ds-ink);
}

:root admin-layout .admin-sidebar-row:hover > a,
:root admin-layout .admin-sidebar-row:focus-within > a,
:root admin-layout .admin-sidebar-row:hover > .admin-sidebar-caret,
:root admin-layout .admin-sidebar-row:focus-within > .admin-sidebar-caret {
  color: var(--ds-ink);
}

:root admin-layout .admin-sidebar-row:has(> a[data-current='true']),
:root admin-layout .admin-sidebar-row:has(> a[data-current='true']):hover {
  background: var(--ds-solid);
}

:root admin-layout .admin-sidebar-row:has(> a[data-current='true']) > a,
:root admin-layout .admin-sidebar-row:has(> a[data-current='true']) > .admin-sidebar-caret,
:root admin-layout .admin-sidebar-row:has(> a[data-current='true']) .admin-sidebar-label {
  color: var(--ds-on-solid);
}

:root admin-layout .admin-sidebar-icon {
  width: 17px;
  height: 17px;
  color: var(--ds-ink2);
}

:root admin-layout .admin-sidebar-row:has(> a[data-current='true']) .admin-sidebar-icon {
  color: var(--ds-on-solid);
}

:root admin-layout .admin-sidebar-label {
  font-family: var(--ds-font);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}

:root admin-layout .admin-sidebar-caret,
:root admin-layout .admin-sidebar-pin {
  min-height: 36px;
  width: 30px;
  color: var(--ds-mute);
}

:root admin-layout .admin-sidebar-heading {
  padding: 0 10px;
  font-family: var(--ds-font);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-mute);
}

/* A section's pages hang off a hairline, as plain labels: the section row carries the icon. */
:root admin-layout .admin-sidebar-sublist {
  margin: 2px 0 6px 21px;
  padding-left: 8px;
  border-left: 1px solid var(--ds-line);
}

:root admin-layout admin-sidebar ul li ul[sublinks] li {
  padding-left: 0;
}

:root admin-layout .admin-sidebar-sublist .admin-sidebar-icon {
  display: none;
}

:root admin-layout .admin-sidebar-sublist .admin-sidebar-row > a {
  min-height: 34px;
}

:root admin-layout .admin-sidebar-sublist .admin-sidebar-label {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ds-ink2);
}

/* ---------------- FOOT ---------------- */

:root admin-layout .admin-sidebar-foot {
  padding: 12px 12px 16px;
  border-top: 1px solid var(--ds-line);
}

:root admin-layout .admin-sidebar-foot-label {
  padding: 0 10px 4px;
  font-family: var(--ds-font);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-mute);
}

:root admin-layout .admin-sidebar-foot-list a {
  min-height: 34px;
  border-radius: 10px;
  color: var(--ds-ink);
}

:root admin-layout .admin-sidebar-foot-list a:hover {
  background: var(--ds-hover);
}

:root admin-layout .admin-sidebar-foot-list .admin-sidebar-label {
  font-size: 13.5px;
  font-weight: 500;
}

:root admin-layout .admin-sidebar-badge {
  font-family: var(--ds-font);
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
}

/* ---------------- TOP BAR ---------------- */

:root admin-layout .admin-topbar-header {
  align-items: center;
  min-height: 64px;
  padding: 0 28px;
  background: var(--ds-bg);
  border-bottom: 1px solid var(--ds-line);
}

:root admin-layout .admin-topbar-header .header h1,
:root admin-layout .admin-topbar-header .header-label {
  font-family: var(--ds-font-display);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-ink);
}

:root admin-layout .admin-topbar-header .header-goBack {
  color: var(--ds-mute);
}

/* Breadcrumbs in place of the heading: Admin / Market / Products / the record. */
:root admin-layout .admin-topbar-header page-header {
  display: none;
}

:root admin-layout .admin-crumbs {
  display: flex;
  font-family: var(--ds-font);
  font-size: 14.5px;
  color: var(--ds-ink);
}

:root admin-layout .admin-crumbs-list a {
  opacity: 1;
  color: var(--ds-mute);
}

:root admin-layout .admin-crumbs-list a:hover {
  color: var(--ds-ink);
}

:root admin-layout .admin-crumbs-list li + li::before {
  opacity: 1;
  color: var(--ds-mute);
}

:root admin-layout .admin-crumbs-back {
  color: var(--ds-mute);
}

@media (max-width: 768px) {
  :root admin-layout .admin-topbar-header {
    padding: 0 16px;
  }

  :root admin-layout .admin-viewport-container {
    padding: 12px 16px 32px;
  }
}

/* Search admin, in the top bar and as the ⌘K dialog. */
:root admin-layout admin-search {
  --admin-search-bg: var(--ds-panel);
  --admin-search-ink: var(--ds-ink);
  --admin-search-mute: var(--ds-mute);
  --admin-search-line: var(--ds-line);
  --admin-search-hover: var(--ds-hover);
  font-family: var(--ds-font);
}

:root admin-layout .admin-search-dialog {
  box-shadow: var(--ds-shadow-dialog);
}

:root admin-layout .admin-search-dialog::backdrop {
  background: var(--ds-scrim, rgb(0 0 0 / 0.32));
}