.container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.container.padding-xs {
    padding: var(--theme-spacing-xs);
}

.container.padding-sm {
    padding: var(--theme-spacing-xs) var(--theme-spacing-sm);
}

.container.padding-md {
    padding: var(--theme-spacing-xs) var(--theme-spacing-md);
}

.container.padding-lg {
    padding: var(--theme-spacing-xs) var(--theme-spacing-lg);
}

.container.padding-xl {
    padding: var(--theme-spacing-xs) var(--theme-spacing-xl);
}

.container.center {
    align-items: center;
    text-align: center;
}

.container.left {
    text-align: left;
}

.container.right {
    text-align: right;
}

.content {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.content.compact {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.content.large {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.container.with-horizontal-border {
    border-bottom: 1px solid var(--theme-colors-border);
}

.container.with-vertical-border {
    border-right: 1px solid var(--theme-colors-border);
}

.container.alternate-row-even {
    background-color: initial;
}

.container.alternate-row-odd {
    @mixin dark {
        background-color: darken(var(--theme-colors-background), 30%);
    }

    @mixin light {
        background-color: darken(var(--theme-colors-background), 2%);
    }
}

.container.data-row.row-hover-highlight-enabled.row-hovered::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    content: '';
    background-color: var(--theme-colors-surface);
    opacity: 0.7;
}

.container.data-row.row-selected::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    content: '';
    opacity: 0.7;

    @mixin dark {
        background-color: lighten(var(--theme-colors-surface), 5%);
    }

    @mixin light {
        background-color: var(--theme-colors-surface);
    }
}

.container.data-row.dragging {
    opacity: 0.5;
}

.container.data-row.dragged-over-top::after {
    position: absolute;
    top: -2px;
    right: 0;
    left: 0;
    z-index: 3;
    height: 2px;
    pointer-events: none;
    content: '';
    background-color: var(--theme-colors-primary);
}

.container.data-row.dragged-over-top.dragged-over-first-cell::after {
    right: -9999px;
    left: -9999px;
    margin-right: 9999px;
    margin-left: 9999px;
}

.container.data-row.dragged-over-bottom::after {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    z-index: 3;
    height: 2px;
    pointer-events: none;
    content: '';
    background-color: var(--theme-colors-primary);
}

.container.data-row.dragged-over-bottom.dragged-over-first-cell::after {
    right: -9999px;
    left: -9999px;
    margin-right: 9999px;
    margin-left: 9999px;
}

.container.data-row > * {
    position: relative;
    z-index: 2;
}

.container.data-row {
    cursor: pointer;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.header-container {
    background: none;
}

.header-container.padding-xs {
    padding: 0 var(--theme-spacing-xs);
}

.header-container.padding-sm {
    padding: 0 var(--theme-spacing-sm);
}

.header-container.padding-md {
    padding: 0 var(--theme-spacing-md);
}

.header-container.padding-lg {
    padding: 0 var(--theme-spacing-lg);
}

.header-container.padding-xl {
    padding: 0 var(--theme-spacing-xl);
}

.header-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-content.center {
    text-align: center;
}

.header-content.left {
    text-align: left;
}

.header-content.right {
    text-align: right;
}

.container :global(.hover-only),
.container :global(.hover-only-flex) {
    display: none;
}

.container.data-row:hover :global(.hover-only),
.container.data-row.row-hovered :global(.hover-only) {
    display: block;
}

.container.data-row:hover :global(.hover-only-flex),
.container.data-row.row-hovered :global(.hover-only-flex) {
    display: flex;
}

.container :global(.hide-on-hover) {
    display: block;
}

.container.data-row:hover :global(.hide-on-hover),
.container.data-row.row-hovered :global(.hide-on-hover) {
    display: none;
}