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

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

  // Reference: title + count on the left, controls on the right, wrapping.
  .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);
  }

  // The controls take whatever the title leaves and sit at the far end of it;
  // without the grow they are sized to max-content and wrap a row early.
  .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 field itself is told width:100% — its size is this flex basis, so the
  // inline width NewInputFieldControl applies never has to be fought.
  //
  // The raised controls beside it carry a shadow that falls below their box,
  // which drags their optical centre down; the recessed field has none, so it
  // reads as sitting high until it is nudged down to match.
  .search {
    position: relative;
    top: 2px;
    flex: 0 1 240px;
  }

  // Reference: repeat(auto-fill, minmax(260px, 1fr)) with a 16px gutter.
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: t.$space-8;
  }

  // The spinner overlay has nothing to cover while the list loads, so it needs
  // a height of its own to centre in.
  .loader {
    height: 50vh;
  }

  // --- Drill-down -----------------------------------------------------------

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

  // --- Empty state ----------------------------------------------------------

  // Reference: a recessed well — #EBEFF6 hairline, inset 6/6/14, 36px padding.
  .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;
  }

  .emptyMark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 auto t.$space-7;
    border: 1px solid t.$primary-border;
    border-radius: t.$radius-xl;
    background: t.$primary-surface;
    box-shadow: t.$shadow-raised;
    color: t.$primary;

    svg {
      width: 22px;
      height: 22px;
    }
  }

  .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;
  }

  // What the delete confirmation is about to remove, named.
  .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%;
    }

    .grid {
      grid-template-columns: 1fr;
    }
  }
}