.#{$ns}Crud {
  position: relative;

  &.is-loading > &-body {
    // 弹框中，blur 效果变成白班，先去掉。
    // -webkit-filter: blur(5px);
    // filter: blur(5px);
  }
  &-header-action {
    // margin-top: calc(var(--Crud-toolbar-gap) * -1);
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    &--left {
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }

    &--right {
      flex-grow: 1;
      flex-shrink: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .#{$ns}Form-item{
        margin-bottom: 0 !important;
        margin-right: calc(var(--Form-item-gap) / 2) !important;
      }
    }

    &-item + &-item{
      margin-left: calc(var(--Crud-toolbar-gap) * 2);
    }
  }

  &-header-dropdown{
    margin-right: calc(var(--Crud-toolbar-gap) * 2);
    & > button{
      color: #606060;
      background: #f3f3f3;
    }
  }
  &-header-control-btn{
    display: flex;
    border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
    span{
      display: flex;
      align-items: center;
      justify-content: center;
      width: px2rem(26px);
      height: px2rem(26px);
      cursor: pointer;
      color: $secondary;
      svg{
        width: px2rem(13px);
        height: px2rem(13px);
        path{
          fill: currentColor;
        }
      }
      &:hover{
        background-color: $gray50;
        color: $primary;
      }
    }

    &-search{
      width: px2rem(60px) !important;
      color: var(--Button--primary-color) !important;
      svg{
        width: px2rem(11px) !important;
        height: px2rem(11px) !important;
        margin-right: 5px;
      }
    }
    span:not(:last-child){
      border-right: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
    }
  }

  &-header-control-btn + div{
    margin-left: calc(var(--Crud-toolbar-gap) * 2);
  }

  &-selection {
    margin-bottom: var(--gap-base);
  }

  &-selectionLabel {
    display: inline-block;
    vertical-align: top;
    margin-top: var(--gap-xs);
  }

  &-value {
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
    line-height: calc(
      var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
    );
    display: inline-block;
    font-size: var(--Form-selectValue-fontSize);
    color: var(--Form-selectValue-color);
    background: var(--Form-selectValue-bg);
    border: px2rem(1px) solid var(--Form-selectValue-borderColor);
    border-radius: 2px;
    margin-right: var(--gap-xs);
    margin-top: var(--gap-xs);

    &:hover {
      background: var(--Form-selectValue-onHover-bg);
    }

    &.is-disabled {
      pointer-events: none;
      opacity: var(--Button-onDisabled-opacity);
    }
  }

  &-valueIcon {
    cursor: pointer;
    border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
    padding: 1px 5px;

    &:hover {
      background: var(--Form-selectValue-onHover-bg);
    }
  }

  &-valueLabel {
    padding: 0 var(--gap-xs);
  }

  &-selectionClear {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    margin-left: var(--gap-xs);
    margin-top: var(--gap-xs);
    vertical-align: middle;
  }

  &-toolbar-item {
    margin-left: var(--Crud-toolbar-gap);
    margin-top: var(--Crud-toolbar-gap);
    line-height: var(--Crud-toolbar-lineHeight);
    height: var(--Crud-toolbar-height);
    vertical-align: middle;
    display: inline-flex;
    align-items: center;

    &--left {
      float: left;
    }

    &--right {
      float: right;
    }

    .#{$ns}Form-item{
      margin-bottom: 0;
    }
  }

  &-actions {
    > * + .#{$ns}Button,
    > * + .#{$ns}ButtonGroup,
    > * + .#{$ns}ButtonToolbar {
      margin-left: var(--Crud-toolbar-gap);
    }
  }

  &-statistics {
    line-height: var(--Crud-toolbar-height);
    vertical-align: middle;
  }

  &-pageSwitch {
    .#{$ns}Select {
      margin-left: var(--Crud-toolbar-gap);
    }
  }

  &-pager {
    align-self: flex-start;
  }

  &-filter {
    margin-bottom: var(--gap-base);
  }
}

@include media-breakpoint-up(sm) {
  .#{$ns}Crud {
    &-toolbar {
      margin-left: calc(var(--Crud-toolbar-gap) * -1);
      margin-top: calc(var(--Crud-toolbar-gap) * -1);
      flex-basis: 0;
      flex-grow: 1;
      @include clearfix();
    }

    &-toolbar-item {
      margin-left: var(--Crud-toolbar-gap);
      line-height: var(--Crud-toolbar-lineHeight);
      height: var(--Crud-toolbar-height);
      vertical-align: middle;

      &--left {
        float: left;
      }

      &--right {
        float: right;
      }
    }

    &-actions {
      > * + .#{$ns}Button,
      > * + .#{$ns}Button--disabled-wrap {
        margin-left: var(--Crud-toolbar-gap);
      }
    }
  }
}
