.cell {
    &.wrapper {
        display: flex;
        align-items: flex-start;
    }

    &.align-widgets-top {
        &.size-24, &.size-30 {
            :global(.uui-checkbox), .folding-arrow {
                margin-top: 6px;
            }
        }

        &.size-36 {
            :global(.uui-checkbox), .folding-arrow {
                margin-top: 9px;
            }
        }

        &.size-42 {
            :global(.uui-checkbox), .folding-arrow {
                margin-top: 12px;
            }
        }

        &.size-48 {
            :global(.uui-checkbox), .folding-arrow {
                margin-top: 15px;
            }
        }

        &.size-60 {
            :global(.uui-checkbox), .folding-arrow {
                margin-top: 21px;
            }
        }
    }

    &.align-widgets-center :global(.uui-checkbox-container) {
        align-self: center;
    }

    &.padding-12 { padding: 0 12px; }
    &.padding-24 { padding: 0 24px; }

    &.padding-left-12 { padding-left: 12px; }
    &.padding-left-24 { padding-left: 24px; }

    &.padding-right-24 { padding-right: 24px; }

    &:global(.uui-invalid) {
        background-color: var(--uui-dt-cell-bg-invalid);
    }
}

:global(.uui-dt-vertical-cell-border) {
    border-left-color: var(--uui-dt-border);
    border-right-color: var(--uui-dt-border);
}

.drag-handle {
    position: absolute;
    left: 2px;
    width: 6px;
    top: 3px;
    bottom: 2px;
    align-self: stretch;
    visibility: hidden;

    :global(.-draggable.uui-table-row):not(:global(.uui-drop-accepted)):hover & {
        visibility: visible;
    }
}

.checkbox {
    padding-right: 12px;
}

.indent {
    display: flex;
    justify-content: flex-start;
    flex-grow: 0;
    flex-shrink: 0;
    width: 12px;
    padding-right: 12px;
    box-sizing: content-box; // to fix reset css like *, *::before, *::after { box-sizing: border-box; }
}

.folding-arrow {
    margin: auto 0;

    &:global(.uui-icon) {
        position: relative;
    }
}

.folding-arrow-12 {
    &:global(.uui-icon) {
        left: -2px;
        flex: 0 0 12px;
        width: 12px;
        height: 12px;
    }
}

.folding-arrow-18 {
    &:global(.uui-icon) {
        left: -4px;
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
    }
}

.icon-container {
    fill: var(--uui-icon);
}
