@layer components {
  .rooms__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: var(--block-space);
    --panel-size: 100%;
    margin-bottom: var(--block-space-double);

    .room__member-count {
      color: var(--color-theme-cinnamon-dark);
    }
  }

  .room__header {
    .room__actions {
      inline-size: var(--panel-size, 60ch);
      max-inline-size: 100%;
      margin: var(--block-space-double) auto
    }

    .room__actions:has(.room__exit) {
      justify-content: flex-end;
    }

    .room__actions:has(.room__join) {
      justify-content: center;
      margin-block: var(--block-space-double);
    }

    @media (min-width: 640px) {
      .room__actions:has(.room__join) {
        justify-content: flex-end;
        margin-block: var(--block-space);
      }
    }
  }

  .room__member-count {
    --btn-background: var(--color-theme-cinnamon-lightest);
    --btn-color: var(--color-theme-cinnamon-darkest);
    --btn-border-color: transparent;
    --btn-border-radius: 999px;
    --btn-padding: var(--block-space-half) var(--block-space);
    --btn-gap: var(--inline-space-half);
    --btn-icon-size: 1.1em;
    --btn-font-weight: 600;
  }

  .room__member-count-zero {
    color: var(--color-theme-rose-dark)
  }

  .room-members-popover {
    inline-size: min(40ch, 90vw);
    max-block-size: 70vh;
    overflow-y: auto;
    border: 1px solid var(--color-ink-lighter);
    padding: var(--block-space);
  }

  .room-members-popover::backdrop {
    background: rgb(0 0 0 / 0.3);
  }

  .room-members-popover__close {
    position: absolute;
    inset-block-start: var(--block-space-half);
    inset-inline-end: var(--block-space-half);
  }

  .rooms__show {
    .room__member-count {
      --btn-background: var(--color-theme-cinnamon-lightest);
      --btn-color: var(--color-theme-cinnamon-darkest);
      --btn-border-color: transparent;
      --btn-border-radius: 999px;
      --btn-padding: var(--block-space-half) var(--block-space);
      --btn-gap: var(--inline-space-half);
      --btn-icon-size: 1.1em;
      --btn-font-weight: 600;
    }

    .room__member-count-zero {
      color: var(--color-theme-rose-dark)
    }

    .post__meta {
      --row-gap: var(--block-space-half);
    }

    .post__date {
      color: var(--color-ink-medium);
    }

    .post__comment-count,
    .post__reaction-count {
      --row-gap: var(--block-space-quarter);
      --column-gap: var(--block-space-quarter);
    }
  }
}