@use "../../styles/tokens" as t;
@use "../../styles/mixins" as m;

@include m.scoped {
  .page {
    display: flex;
    flex-direction: column;
    gap: t.$space-12;
  }

  // The carved groove under the page header, as on the dashboard.
  .divider {
    height: 3px;
    border-radius: t.$radius-pill;
    background: t.$surface;
    box-shadow: t.$shadow-track;
  }

  .browser {
    display: flex;
    flex-direction: column;
    gap: t.$space-8;
  }

  .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: t.$space-8;
    flex-wrap: wrap;
  }

  .toolbarTitle {
    display: flex;
    align-items: center;
    gap: t.$space-5;
  }

  .heading {
    margin: 0;
    @include m.text(18, t.$weight-bold);
    letter-spacing: -0.01em;
  }

  .count {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 t.$space-4;
    border: 1px solid t.$primary-border;
    border-radius: t.$radius-pill;
    background: t.$primary-surface;
    color: t.$primary-strong;
    @include m.text(12, t.$weight-semibold);
  }

  .controls {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: t.$space-5;
    flex-wrap: wrap;
    min-width: 0;
  }

  // The raised controls beside it carry a shadow that falls below their box;
  // the recessed field has none, so it reads as sitting high until nudged.
  .search {
    position: relative;
    top: 2px;
    flex: 0 1 240px;
  }

  .loader {
    height: 50vh;
  }

  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px;
    border: 1px solid #ebeff6;
    border-radius: t.$radius-2xl;
    background: t.$surface;
    box-shadow: t.$shadow-well;
    text-align: center;
  }

  .emptyTitle {
    margin: 0;
    @include m.text(18, t.$weight-bold);
    letter-spacing: -0.01em;
  }

  .emptyText {
    max-width: 420px;
    margin: t.$space-3 0 0;
    @include m.text(13, t.$weight-medium);
    color: t.$text-soft;
  }

  .emptyAction {
    margin-top: t.$space-8;
  }

  .confirmList {
    margin: 0;
    // WordPress' admin stylesheet drops the markers off a bare <ul>.
    list-style: disc;
    padding: 0 0 0 t.$space-8;
    @include m.text(13, t.$weight-medium);
    color: t.$text-secondary;

    li {
      margin: 0 0 t.$space-2;
    }
  }

  @media (max-width: 735px) {
    .toolbar,
    .controls {
      width: 100%;
    }

    .search {
      flex: 1 1 100%;
    }
  }
}