@layer components {
  .admin-bar {
    display: flex;
    align-items: center;
    gap: 2ch;
    padding: 0.75rem 2ch;
    border-block-end: 1px solid var(--color-border);
    background-color: var(--color-surface);

    nav {
      display: flex;
      gap: 2ch;
      margin-inline-end: auto;
    }
  }

  .admin-bar__home {
    font-weight: 700;
    color: inherit;
    text-decoration: none;
  }

  .admin-main {
    max-inline-size: 110ch;
    margin-inline: auto;
    padding: 1.5rem 2ch 4rem;
    display: grid;
    gap: 1.25rem;

    &:has(> .admin-table) {
      max-inline-size: 180ch;
    }
  }

  .admin-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2ch;
  }

  .admin-heading__actions {
    display: flex;
    align-items: center;
    gap: 2ch;
  }
}