@layer components {

  /* The admin's pages (admin/_tabs): every team's houses, every account. */
  .admin-tabs {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-line);
  }

  .admin-tabs__tab {
    padding: 6px 0;
    margin-bottom: -1px;
    font-size: 14px;
    color: var(--color-ink-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;

    &:hover {
      color: var(--color-ink);
    }

    &.is-current {
      color: var(--color-ink);
      border-bottom-color: var(--color-primary);
    }
  }

  /* A team's heading over its houses: its name and how many. */
  .admin-team {
    font-size: 15px;
    font-weight: 600;
  }

  .admin-team__count {
    margin-left: 8px;
    font-weight: 400;
    color: var(--color-ink-muted);
  }

  /* Why an empty team can't go: it's someone's only one. */
  .admin-team__note {
    font-size: 13px;
    color: var(--color-ink-muted);
  }

  /* What's done to the houses picked in a team's table (admin/houses/_team): at its head's end. */
  .admin-bulk {
    display: flex;
    gap: 6px;
  }

  /* A team's houses: the same widths in every team's table, so the columns line up down the page; the name
     takes what's left, cut short with an ellipsis. */
  .admin-houses {
    table-layout: fixed;

    & .admin-houses__pick {
      width: 44px;
    }

    & .admin-houses__purpose {
      width: 30%;
    }

    & .admin-houses__creator {
      width: 20%;
    }

    & .admin-houses__floors {
      width: 90px;
    }

    & .admin-houses__changed {
      width: 170px;
    }

    & td:nth-child(2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    & input[type="checkbox"] {
      display: block;
    }
  }
}