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

  &-selection,
  &-toolbar,
  &-body {
    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(--Pick-base-value-fontSize);
    color: var(--Pick-base-value-color);
    font-weight: var(--Pick-base-value-fontWeight);
    background: var(--Pick-base-value-bgColor);
    border-width: var(--Pick-base-value-top-border-width)
        var(--Pick-base-value-right-border-width)
        var(--Pick-base-value-bottom-border-width)
        var(--Pick-base-value-left-border-width);
    border-style: var(--Pick-base-value-top-border-style)
        var(--Pick-base-value-right-border-style)
        var(--Pick-base-value-bottom-border-style)
        var(--Pick-base-value-left-border-style);
    border-color: var(--Pick-base-value-top-border-color)
        var(--Pick-base-value-right-border-color)
        var(--Pick-base-value-bottom-border-color)
        var(--Pick-base-value-left-border-color);
    border-radius: var(--Pick-base-top-left-border-radius)
        var(--Pick-base-top-right-border-radius)
        var(--Pick-base-bottom-right-border-radius)
        var(--Pick-base-bottom-left-border-radius);
    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 {
    color: var(--Pick-base-value-icon-color);
    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-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:not(:first-child) {
      margin-left: var(--Crud-toolbar-gap);
    }

    &--right:not(:last-child) {
      margin-left: var(--Crud-toolbar-gap);
    }

    &--left {
      float: left;
    }

    &--right {
      float: right;
    }
  }

  &-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-top: calc(var(--Crud-toolbar-gap) * -1);
      flex-basis: 0;
      flex-grow: 1;
      @include clearfix();
    }

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

      &--left:not(:first-child) {
        margin-left: var(--Crud-toolbar-gap);
      }

      &--right:not(:last-child) {
        margin-left: var(--Crud-toolbar-gap);
      }

      &--left {
        float: left;
      }

      &--right {
        float: right;
      }
    }

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