.root {
    display: flex;
    flex-direction: column;
    background: var(--list-view-body-background);
    border: 1px solid var(--list-view-border-color);
    border-radius: var(--border-radius-base);
    height: var(--list-view-height);
    min-width: var(--list-view-width);
    max-width: 100%;
}

.root:focus {
    border-color: var(--list-view-border-color-focus);
    outline: var(--focus-outline);
}

.status {
    color: var(--list-view-status-color);
    text-align: center;
    padding: var(--list-view-item-padding);
}

.root[disabled] {
    border: 1px solid var(--list-view-border-color-disabled);
}

.root[border="false"] {
    border: none;
}

.head {
    background: var(--list-view-head-background);
    padding: var(--list-view-head-padding);
    border-bottom: 1px solid var(--list-view-border-color);
}

.root[border="false"] .head {
    border: none;
}

.extra {
    float: right;
    color: var(--color-base);
}

.body {
    flex: auto;
    user-select: none;
    overflow: auto;
    position: relative;
    /* background: var(--list-view-body-background); */
}

.root[readonly-mode="initial"] .body {
    user-select: initial;
}

.root[disabled] .body {
    background: var(--list-view-body-background-disabled);
}

.foot {
    background: var(--list-view-foot-background);
    padding: var(--list-view-foot-padding);
    border-top: 1px solid var(--list-view-border-color);
}

.root[border="false"] .foot {
    border: none;
}

.filter[class][class] {
    margin: var(--list-view-filter-margin);
    width: calc(100% - var(--list-view-filter-margin) * 2);
}

.pagination {
    text-align: center;
}

.root[size^="normal"] { height: var(--list-view-height); }
.root[size^="large"] { height: var(--list-view-height-large); }
.root[size^="huge"] { height: var(--list-view-height-huge); }
.root[size^="full"] { height: 100%; }
.root[size^="auto"] { height: auto; }
.root[size$="normal"] { width: var(--list-view-width); }
.root[size$="large"] { width: var(--list-view-width-large); }
.root[size$="huge"] { width: var(--list-view-width-huge); }
.root[size$="full"] { width: 100%; }
.root[size$="auto"] { width: auto; }

.root[height="normal"] { height: var(--list-view-height); }
.root[height="large"] { height: var(--list-view-height-large); }
.root[height="huge"] { height: var(--list-view-height-huge); }
.root[height="full"] { height: 100%; }
.root[height="auto"] { height: auto; }
.root[width="normal"] { width: var(--list-view-width); }
.root[width="large"] { width: var(--list-view-width-large); }
.root[width="huge"] { width: var(--list-view-width-huge); }
.root[width="full"] { width: 100%; }
.root[width="auto"] { width: auto; }