@layer components {
  /* Base
  /* -------------------------------------------------------------------------- */

  /* Unmapped values beside the mappings being drafted for them. Stacked until
     there is room for both tables side by side. */
  .unmapped {
    align-items: start;
    display: grid;
    gap: var(--unmapped-gap, var(--block-space-double));
    grid-template-columns: var(--unmapped-columns, minmax(0, 1fr));

    @media (min-width: 960px) {
      --unmapped-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Elements
  /* -------------------------------------------------------------------------- */

  .unmapped__panel {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    min-inline-size: 0;
  }

  .unmapped__footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    justify-content: space-between;
    min-block-size: 2.5rem;
  }

  /* The drafts scroll inside their card, so a long batch never pushes the
     submit button off screen */
  .unmapped__drafts {
    max-block-size: var(--unmapped-drafts-size, 32rem);
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .unmapped__drafts-table {
    --table-cell-padding: var(--block-space-half) var(--inline-space);
    --table-min-inline-size: 30rem;

    .input {
      --input-font-size: var(--text-small);
    }
  }

  /* Covered values only show when the covered toggle is on: ticked and muted,
     so they read as done next to the values still left */
  .unmapped__covered {
    color: var(--color-positive);
    text-align: center;

    .icon {
      visibility: hidden;
    }

    [data-covered="true"] & .icon {
      visibility: visible;
    }
  }

  [data-unmapped-mappings-target="value"][data-covered="true"] .table__cell {
    color: var(--color-ink-muted);
  }

  /* Reads as part of the footer text until pressed */
  .unmapped__covered-toggle {
    --btn-font-size: inherit;
    --btn-padding: 0.2em 0.4em;

    &[aria-pressed="true"] {
      --btn-color: var(--color-ink);
    }

    &[hidden] {
      display: none;
    }
  }

  /* Uncovered values left in a kind, beside its tab label */
  .unmapped__tab-count {
    background-color: var(--color-surface-subtle);
    border-radius: var(--border-radius-pill);
    color: var(--color-ink-muted);
    display: inline-block;
    font-size: var(--text-x-small);
    font-variant-numeric: tabular-nums;
    margin-inline-start: var(--inline-space-half);
    padding: 0 0.5em;

    &[hidden] {
      display: none;
    }
  }
}