/* Folder-style tabs: <nav class="folder-tabs"> with links; mark the
   current one with aria-current="page". */

.folder-tabs {
  display: flex;
  gap: 4px;

  a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px 10px;
    color: var(--color-grey-medium);
    font-size: 14px;
    font-weight: bold;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;

    &:hover {
      color: #000;
      background-color: #ececec;
    }

    &[aria-current] {
      color: #000;
      background-color: #fff;
      border-color: #e5e5e5;
    }
  }
}

/* In a toolbar, the tabs sit on its bottom edge (-8px = 7px padding + 1px
   border). wrap-reverse keeps them on the bottom line when the row wraps,
   which also flips flex-start to mean "bottom". */
.toolbar-row:has(> .folder-tabs) {
  flex-wrap: wrap-reverse;
}

.toolbar-row > .folder-tabs {
  align-self: flex-start;
  margin-bottom: -8px;
}