@use '../../theme/styles' as theme;

.wr-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  // Make sure the toolbar always claims the full available row, both when
  // its parent is a block and when it's a flex row item (doc snippets,
  // grid cells). Without this the host shrinks to its content width and
  // the start/center/end zones collapse against each other.
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.5rem 0.875rem;
  background: var(--wr-color-white);
  border: 1px solid var(--wr-color-light);
  @include theme.smooth-br(var(--wr-border-radius-base));
  box-shadow: var(--wr-shadow-xs);
  font-family: var(--wr-font-family-base);
  color: var(--wr-color-dark);

  // Opt-in (`responsive`): query the toolbar's own width so the zones stack
  // when it's too narrow for a row. Already full-width, so containment is safe.
  // `flex-wrap` lives here (not in the `@container` below) because a container
  // query can't style the query container itself — only its descendants; wrap
  // only kicks in once the zones go full-width at the breakpoint.
  &--responsive {
    container: wr-toolbar / inline-size;
    flex-wrap: wrap;
  }

  &__zone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;

    &:empty {
      display: none;
    }

    &--start {
      flex: 0 0 auto;
    }

    &--center {
      flex: 1 1 auto;
      justify-content: center;
    }

    &--end {
      flex: 0 0 auto;
      margin-left: auto;
    }
  }

  // Subtle hairline divider between adjacent zones — only shown when both
  // sides have content (the `:empty` rule above collapses unused zones).
  &__zone--center + &__zone--end,
  &__zone--start + &__zone--center {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: -0.5rem;
      top: 50%;
      transform: translateY(-50%);
      height: 1.25rem;
      width: 1px;
      background: var(--wr-color-light);
    }
  }
}

// Responsive toolbars stack their zones when the bar is too narrow for a row.
@container wr-toolbar (max-width: 32rem) {
  .wr-toolbar--responsive .wr-toolbar__zone {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .wr-toolbar--responsive .wr-toolbar__zone--end {
    margin-left: 0;
  }

  // The vertical hairline dividers are a horizontal-row affordance — drop them
  // once the zones stack.
  .wr-toolbar--responsive .wr-toolbar__zone--start + .wr-toolbar__zone--center::before,
  .wr-toolbar--responsive .wr-toolbar__zone--center + .wr-toolbar__zone--end::before {
    display: none;
  }
}