.k-table-field,
.k-block-type-dataTable {
  .k-table {
    overflow: auto;
    table {
      table-layout: auto;
    }
    th,
    td {
      border-inline-start: 1px solid var(--table-color-border);
      border-inline-end: none;
      &:first-child {
        border-inline-start: none;
      }
    }
    .k-table-index-column + th,
    .k-table-index-column + td {
      border-inline-start: none;
    }
    th:not(.k-table-index-column, .k-table-options-column),
    td:not(.k-table-index-column, .k-table-options-column) {
      width: auto;
      min-width: 21.37vh; //12.57vw
    }
    .k-table-index-column,
    .k-table-options-column {
      position: sticky;
      min-width: var(--table-row-height);
      z-index: 2;
    }
    .k-table-index-column {
      left: 0;
      border-inline-end: 1px solid var(--table-color-border);
    }
    .k-table-options-column {
      right: 0;
    }
    thead {
      th {
        top: 0;
        inset-inline: auto;
      }
      th.k-table-row-ghost {
        outline-offset: -2px;
      }
      .k-table-column {
        padding: 0 var(--spacing-3);
        .k-text {
          width: 100%;
        }
        .k-text-input {
          text-align: var(--align);
          padding: var(--spacing-2) 0;
        }
      }
      .k-table-header {
        .k-bar {
          gap: var(--spacing-2);
        }
        .k-button {
          width: var(--button-width);
          color: initial;
          padding: 0;
          &.k-sort-button {
            aspect-ratio: 1/2;
          }
        }
        .k-dropdown-content {
          margin-top: 8px;
          margin-left: 11px;
          .k-button {
            font-family: var(--font-sans);
            font-size: var(--text-sm);
            color: var(--button-color-text);
            height: var(--button-height);
            padding-inline: var(--button-padding);
          }
        }
        &:has(.k-options-dropdown > dialog),
        &:has(.k-text-input:focus) {
          outline: var(--outline);
          outline-offset: -2px;
          border-radius: var(--input-rounded);
        }
      }
    }

    tbody {
      tr:hover td {
        background: var(--table-color-hover) !important;
      }
      tr.k-table-row-ghost {
        position: relative;
        border-radius: 0;
        z-index: 3;
      }
      tr:has(.k-options-dropdown > dialog) {
        position: relative;
        outline: var(--outline);
        z-index: 3;
      }
      .k-table-index-column {
        background: var(--table-color-back);
        padding-inline: 0;
      }
      .k-table-column {
        overflow: initial;
        .k-toolbar {
          top: -34px !important;
          left: initial !important;
          right: 0;
        }
        .k-writer .ProseMirror {
          padding: var(--spacing-2) var(--spacing-3);
        }
        &:nth-child(1),
        &:nth-child(2) {
          .k-toolbar {
            left: 0 !important;
            right: initial;
          }
        }
      }
      .k-table-cell {
        &:where(:focus, :focus-visible, :focus-within) {
          outline: var(--outline);
          outline-offset: -2px;
          border-radius: var(--input-rounded);
        }
      }
      .k-table-options-column {
        background: var(--table-color-back);
      }
    }

    + footer {
      display: flex;
      justify-content: center;
      margin-top: var(--spacing-3);
    }
  }
}

.k-block-type-table {
  padding: var(--input-padding-multiline);
  .k-table {
    border: 1px solid var(--table-color-border);
    .k-table-column {
      padding: 0;
    }
  }
}
