@use '@style/theme/index.scss' as theme;
@use 'sass:string';
@use '@components/toolbar/style/token.scss' as *;

$toolbar-prefix-cls: string.unquote('#{theme.$prefix}-toolbar');

.#{$toolbar-prefix-cls} {
  width: 100%;

  &-inner {
    display: flex;
    flex-wrap: wrap;
    gap: $toolbar-gap;
    align-items: flex-start;
    width: 100%;
  }

  &-with-border &-inner {
    padding-bottom: $toolbar-padding-bottom;
    border-bottom: $toolbar-border-width $toolbar-border-style $toolbar-color-border;
  }

  &-body {
    flex: 1 1 0;
    min-width: 0;
    max-height: var(--toolbar-body-max-height);
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  // Schema mode turns the underlying form into a responsive CSS grid so that
  // filter items flow into shared rows instead of stacking one per line.
  &-body--schema .sd-form {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(auto-fill, minmax(var(--toolbar-span-width), 1fr));
    gap: $toolbar-body-gap;
    width: 100%;

    > * {
      max-width: var(--toolbar-item-max-width);
    }
  }

  &-body--schema .sd-form-item {
    margin-bottom: 0;
  }

  &-body--schema .sd-form-item-content {
    min-height: var(--toolbar-item-height);
  }

  // When an explicit max item width is provided, cap each column to it.
  &-body--max-width .sd-form {
    grid-template-columns: repeat(
      auto-fill,
      minmax(
        min(var(--toolbar-item-max-width), var(--toolbar-span-width)),
        var(--toolbar-item-max-width)
      )
    );
  }

  &-actions {
    display: flex;
    flex-shrink: 0;
    gap: $toolbar-actions-gap;
    align-items: center;
    align-self: flex-end;
    white-space: nowrap;
  }

  &-expand {
    display: inline-flex;
    gap: $toolbar-expand-gap;
    align-items: center;
  }

  &-expand-icon {
    transition: transform 0.3s ease;

    &--up {
      transform: rotate(180deg);
    }
  }

  @media screen and (width <= 640px) {
    &-body--schema .sd-form {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    &-body--schema .sd-form-item {
      grid-column: span 1 !important;
    }
  }
}