@layer page {
  :is(.category-list-container, .tag-list-container) {
    display: block grid;
    grid-auto-rows: auto;
    grid-template-columns: 1fr auto;
    gap: 5px;
    align-items: center;
  }

  #category-title {
    view-transition-name: category-title;
  }

  #tag-list-title {
    view-transition-name: tag-list-title;
  }

  .list-title {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  :is(.category-create-link, .tag-create-link) {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  :is(.category-list, .tag-list) {
    display: block flex;
    grid-column: 1/-1;
    grid-row-start: 2;
    flex-direction: column;
    gap: 10px;

    padding-inline-start: 0;
  }

  :is(.category-list-item, .tag-list-item) {
    display: block flex;
    align-items: stretch;
    border: 2px solid var(--base-secondary);
    border-radius: 10px;
  }

  :is(.category-edit-link, .tag-edit-link) {
    display: block flex;
    flex: 1;
    align-items: center;
    padding: 5px;
  }

  :is(.category-delete-button, .tag-delete-button) {
    margin: 5px;
    border-color: var(--base-tertiary);
  }

  :is(.category-delete-dialog-text, .tag-delete-dialog-text) {
    display: block flex;
    margin-block: 10px;
  }

  :is(.category-delete-dialog-form, .tag-delete-dialog-form) {
    display: block flex;
    gap: 10px;
    margin-block-start: 20px;
  }

  :is(.empty-category-list-text, .empty-tag-list-text) {
    grid-column: 1 / -1;
  }
}