:root {
    --cpx-table-border: 1px solid #ddd;
    --cpx-table-padding: 8px;
    --cpx-table-font-bold: 600;

    --cpx-table-admin-delete-width: 30px;
    --cpx-table-delete-button-size: 24px;

    --cpx-table-delete-color: #e74c3c;
    --cpx-table-delete-color-hover: #c0392b;
}

/* =========================================================
   FRONT-END TABLE
   ========================================================= */
.cpx-table-widget__table {
    width: 100%;
    border-collapse: collapse;
}

.cpx-table-widget__cell {
    border: var(--cpx-table-border);
    padding: var(--cpx-table-padding);
}

.cpx-table-widget__cell--bold {
    font-weight: var(--cpx-table-font-bold);
}

/* =========================================================
   ADMIN TABLE AREA
   ========================================================= */
.cpx-table-widget-admin__table {
    width: 100%;
    border-collapse: collapse;
}

.cpx-table-widget-admin__table-wrap {
    overflow-x: auto;
    margin: 10px 0;
}

/* Table cells in admin */
.cpx-table-widget-admin__cell {
    padding: 4px 2px;
    vertical-align: top;
}

.cpx-table-widget-admin__cell--action {
    width: var(--cpx-table-admin-delete-width);
    text-align: center;
    padding-top: 10px;
    /* Visueel centreren met textarea */
}

/* Textareas (cell input fields) */
.cpx-table-cell-input {
    width: 100%;
    min-height: 40px;
    padding: 6px;
    font-family: inherit;
    resize: vertical;
}

/* =========================================================
   FOOTER / COLUMN DELETE BUTTONS
   ========================================================= */
.cpx-table-widget-admin__footer-cell {
    text-align: center;
    padding-top: 8px;
}

/* =========================================================
   DELETE BUTTONS (ROW & COLUMN)
   ========================================================= */
.cpx-table-remove-row,
.cpx-table-remove-col {
    display: inline-block;
    width: var(--cpx-table-delete-button-size);
    height: var(--cpx-table-delete-button-size);
    padding: 0;

    background: var(--cpx-table-delete-color);
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 50%;

    cursor: pointer;
    line-height: var(--cpx-table-delete-button-size);
    text-align: center;
    text-decoration: none;
}

.cpx-table-remove-row:hover,
.cpx-table-remove-col:hover {
    background: var(--cpx-table-delete-color-hover);
}