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

  &.is-loading > &-body {
    // 弹框中，blur 效果变成白班，先去掉。
    // -webkit-filter: blur(5px);
    // filter: blur(5px);
  }

  &-selection {
    margin-bottom: $gap-base;
  }

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

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

    &:hover {
      background-color: darken($Form-selectValue-bg, 5%);
    }

    &.is-disabled {
      pointer-events: none;
      opacity: $Button-onDisabled-opacity;
    }
  }

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

    &:hover {
      background-color: darken($Form-selectValue-bg, 5%);
    }
  }

  &-valueLabel {
    padding: 0 $gap-xs;
  }

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

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

    &--left {
      float: left;
    }

    &--right {
      float: right;
    }
  }

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

  &-statistics {
    line-height: $Crud-toolbar-height;
    vertical-align: middle;
  }

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

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

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

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

    &--left {
      float: left;
    }

    &--right {
      float: right;
    }
  }

  &-actions {
    > .#{$ns}Button + .#{$ns}Button {
      margin-left: $Crud-toolbar-gap;
    }
  }
}