@import "../../../../assets/less/core/boot.less";

@color-relation-border: #eeeeee;

@import "relation.ui.less";
@import "relation.field.less";

.relation-behavior {
    margin-bottom: 20px;

    .control-list {
        border: 1px solid @color-relation-border;

        thead > tr > th {
            border-top: none !important;
            border-color: @color-relation-border;
        }

        table.table.data {
            border-bottom: none;
        }

        .list-content + .list-footer {
            border-top: 1px solid @input-border;
        }

        .list-footer .pagination {
            --bs-pagination-bg: @input-bg;
        }
    }

    .control-toolbar {
        padding: 0 20px 20px 20px;

        .toolbar-item.toolbar-primary {
            &:before { left: 0; }
            &:after { right: 0; }
        }

        .toolbar-item .form-control.search {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .loading-indicator-container.size-input-text {
            min-height: 0;
            .loading-indicator > span {
                top: 4px;
            }
        }
    }

    .list-header {
        padding: 0 !important;
    }

    .control-list:last-child > table {
        margin-bottom: 0;
    }
}

// Relation manager to sit flush to the element above
.relation-flush {
    .control-list {
        border-top: none;
    }
}

// Relation manager to sit inset the standard padding (20px)
.relation-inset {
    margin-left: -20px;
    margin-right: -20px;
}

// Displayed in a form field
.form-group > .relation-behavior {
    .control-toolbar {
        padding: 0 0 10px 0;
    }
}