/**
 * PisellGridProToolbar 组件样式
 * @description 根据 Figma 设计编写 (node-id=12890-101101)
 */

.pisell-grid-pro-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 16px;
  gap: 12px;
  background: #ffffff;

  /**
   * 工具栏行通用样式
   */

  &-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    align-self: stretch;
  }

  .toolbar-row {
    justify-content: space-between;

    &-left {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 8px;
      flex: 1;
    }

    &-right {
      display: flex;
      flex-direction: row;
      justify-content: start;
      gap: 12px;
      flex-shrink: 0;
    }
  }
}

/**
 * 手机版宽度：左侧区域与右侧区域换行，避免挤在一行。
 * RecordBoard（`.pisell-record-board-toolbar--grid`）顶栏单行布局见 `recordBoardToolbar.less`，此处排除。
 */
@media (max-width: 768px) {
  .pisell-grid-pro-toolbar .toolbar-row {
    flex-wrap: wrap;
  }

  .pisell-grid-pro-toolbar:not(.pisell-record-board-toolbar--grid) .toolbar-row-left {
    flex: 1 1 100%;
    min-width: 0;
  }

  .pisell-grid-pro-toolbar:not(.pisell-record-board-toolbar--grid) .toolbar-row-right {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
  }
}