.milkdown {
  th,td {
    border: 1px solid var(--color-table-border);
  }

  milkdown-table-block {
    display: block;
    margin: 4px 0;
  }

  milkdown-table-block table {
    margin: 0 !important;
    border-radius: 0 !important;
  }

  milkdown-table-block .handle {
    position: absolute;
    z-index: 50;
    cursor: grab;
    font-size: 14px;
  }

  milkdown-table-block .cell-handle {
    left: -999px;
    top: -999px;
    z-index: 100;
    height: 24px;
    transition: opacity 0.2s ease 0.2s;
    background-color: var(--color-table-handle);
    padding: 0 8px;
    border-radius: 8px;
    position: absolute;
  }

  milkdown-table-block .cell-handle[data-role="col-drag-handle"] {
    transform: translateY(50%);
  }

  milkdown-table-block .cell-handle[data-role="row-drag-handle"] {
    transform: translateX(50%);
  }

  milkdown-table-block .cell-handle[data-show="false"] {
    opacity: 0;
  }

  milkdown-table-block .line-handle[data-show="false"] {
    opacity: 0;
  }

  milkdown-table-block .handle:hover {
    opacity: 1;
  }

  milkdown-table-block .cell-handle .button-group {
    position: absolute;
    height: 30px;
    top: -32px;
    display: flex;
    transform: translateX(-50%);
    left: 50%;
    background-color: var(--color-table-button-group-background);
    border: 1px solid var(--color-table-border);
    border-radius: 4px;
  }
  milkdown-table-block .cell-handle .button-group[data-show="false"] {
    display: none;
  }
  milkdown-table-block .cell-handle .button-group button {
    padding-left: 8px;
    padding-right: 8px;
    width: max-content;
  }
  milkdown-table-block .cell-handle .button-group button:hover {
    background-color: var(--color-table-button-hover-background);
  }

  milkdown-table-block .line-handle {
    background-color: var(--color-table-handle);
    transition: opacity 0.2s ease-in-out;
  }
  milkdown-table-block .line-handle[data-role="x-line-drag-handle"] {
    height: 2px;
  }
  milkdown-table-block .line-handle[data-role="y-line-drag-handle"] {
    width: 2px;
  }

  milkdown-table-block .line-handle .add-button  {
    color: var(--color-table-handle);
    border: 1px solid var(--color-table-handle);
    padding: 0 4px;
    border-radius: 8px;
    width: max-content;
  }

  milkdown-table-block .line-handle[data-role="x-line-drag-handle"] .add-button  {
    position: absolute;
    transform: translateX(-100%);
    top: -12px;
    height: 24px;
  }

  milkdown-table-block .line-handle[data-role="y-line-drag-handle"] .add-button  {
    position: absolute;
    transform: translateX(-50%);
    top: -24px;
    height: 24px;
  }

  milkdown-table-block .line-handle[data-display-type="indicator"] .add-button  {
    display: none;
  }

  milkdown-table-block .drag-preview {
    position: absolute;
    z-index: 100;
    border: 1px solid #ccc;
    opacity: 0.5;
    display: flex;
    flex-direction: column;
  }

  milkdown-table-block .drag-preview table {
    margin: 0;
  }

  milkdown-table-block .drag-preview[data-show="false"] {
    display: none;
  }
}
