.table-wrapper {
  overflow-x: auto;
  padding-bottom: 26px;

  table {
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0.5rem 0 0 0;
    @apply relative border border-subtle;
    width: 100%;

    td,
    th {
      min-width: 1em;
      @apply border border-strong;
      padding: 7px 10px;
      vertical-align: top;
      box-sizing: border-box;
      position: relative;
      transition: background-color 0.3s ease;

      > * {
        margin-bottom: 0;
      }

      /* Selected cell outline */
      &.selectedCell:not(.content-hidden) {
        user-select: none;

        &::after {
          position: absolute;
          content: "";
          top: -1px;
          left: -1px;
          height: calc(100% + 2px);
          width: calc(100% + 2px);
        }

        &.selectedCell-border-top::after {
          border-top: 2px solid var(--border-color-accent-strong);
        }

        &.selectedCell-border-left::after {
          border-left: 2px solid var(--border-color-accent-strong);
        }

        &.selectedCell-border-bottom::after {
          border-bottom: 2px solid var(--border-color-accent-strong);
        }

        &.selectedCell-border-right::after {
          border-right: 2px solid var(--border-color-accent-strong);
        }
      }
      /* End selected cell outline */

      .table-col-handle-container,
      .table-row-handle-container {
        & > button {
          opacity: 0;
        }
      }

      &:hover {
        .table-col-handle-container,
        .table-row-handle-container {
          & > button {
            opacity: 1;
          }
        }
      }

      .ProseMirror-widget + * {
        padding-top: 0 !important;
      }

      &.content-hidden > * {
        visibility: hidden;
      }
    }

    th {
      @apply font-medium text-left;
    }

    tr[background="none"],
    tr:not([background]) {
      th {
        @apply bg-layer-3;
      }
    }

    .table-drop-marker {
      background-color: var(--border-color-accent-strong);
      @apply absolute z-10;

      &.hidden {
        @apply hidden;
      }
    }

    .table-col-drag-marker,
    .table-row-drag-marker {
      @apply absolute z-10;

      &.hidden {
        @apply hidden;
      }
    }

    .table-col-drag-marker {
      top: -9px;
    }

    .table-row-drag-marker {
      left: 0;
    }
  }

  /* Selected status */
  &.ProseMirror-selectednode {
    table {
      background-color: color-mix(in srgb, var(--background-color-accent-primary) 20%, transparent);
    }
  }
  /* End selected status */
}

/* Column resizer */
.table-wrapper table .column-resize-handle {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 2px;
  height: calc(100% + 2px);
  z-index: 5;
  background-color: var(--border-color-accent-strong);
  pointer-events: none;
}
/* End column resizer */

.resize-cursor .table-wrapper .table-controls .rows-control,
.table-wrapper.controls--disabled .table-controls .rows-control,
.resize-cursor .table-wrapper .table-controls .columns-control,
.table-wrapper.controls--disabled .table-controls .columns-control {
  opacity: 0;
  pointer-events: none;
}

/* Insert buttons */
.table-wrapper {
  .table-column-insert-button,
  .table-row-insert-button {
    position: absolute;
    background-color: var(--background-color-layer-1);
    @apply text-tertiary border border-subtle-1;
    border-radius: 4px;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    outline: none;
    z-index: 9;
    transition: all 0.2s ease;

    &:hover {
      background-color: var(--background-color-layer-1-hover);
      @apply text-primary;
    }

    &.dragging {
      opacity: 1;
      pointer-events: auto;
      background-color: color-mix(in srgb, var(--background-color-accent-primary) 20%, transparent);
      @apply text-primary;
    }

    svg {
      width: 12px;
      height: 12px;
    }
  }

  .table-column-insert-button {
    top: 0;
    right: -16px;
    width: 16px;
    height: 100%;
    transform: translateX(50%);
    cursor: col-resize;
  }

  .table-row-insert-button {
    bottom: -16px;
    left: 0;
    width: 100%;
    height: 16px;
    transform: translateY(50%);
    cursor: row-resize;
  }

  /* Show buttons on table hover */
  &:hover {
    .table-column-insert-button,
    .table-row-insert-button {
      opacity: 1;
      pointer-events: auto;
    }
  }
}
/* End insert buttons */