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

    &.is-loading > &-body {
        filter: blur(5px);
    }

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

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

    &-value {
        cursor: pointer;
        vertical-align: top;
        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: top;
    }

    &-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}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;
        }
    }
}

@include media-breakpoint-up(sm) {
    .#{$ns}Crud {
        &-toolbar {
            margin-left: -$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;
        }
    }
}