@import '../../../../../../client/scss/settings';
@import '../../../../../../client/scss/tools';

.typed-table-block {
  &__wrapper {
    overflow-x: auto;
    // Reserve space for the add column menu.
    min-height: 20rem;
  }

  table {
    margin: 2.5rem 0 1rem 2.5rem;
  }

  th,
  td {
    padding: 0.25rem;
  }

  th {
    position: relative;
    border: 2px solid $color-grey-2;

    button.prepend-column,
    button.append-column {
      position: absolute;
      // Remove once we drop support for Safari 13.
      // stylelint-disable-next-line property-disallowed-list
      left: -0.9rem;
      inset-inline-start: -0.9rem;
      top: -2rem;
    }

    button.delete-column {
      position: absolute;
      // Remove once we drop support for Safari 13.
      // stylelint-disable-next-line property-disallowed-list
      right: 0.625rem;
      inset-inline-end: 0.625rem;
      top: 0.875rem;
    }

    input.column-heading {
      padding-inline-end: 3rem;
      font-weight: bold;
    }
  }

  td {
    position: relative;
    border-inline-start: 1px solid $color-grey-2;
  }

  th:first-child,
  th:last-child,
  td:first-child {
    border-width: 0;
  }

  tbody tr,
  tfoot tr {
    position: relative;
    border-top: 1px dotted $color-grey-2;

    button.prepend-row {
      // Remove once we drop support for Safari 13.
      // stylelint-disable-next-line property-disallowed-list
      left: -2rem;
      inset-inline-start: -2rem;
      position: absolute;
      top: -0.9rem;
    }

    button.delete-row {
      margin-inline-start: 0.25rem;
    }

    td:not(.control-cell) {
      vertical-align: top;
      min-width: 20rem;
    }
  }

  ul.add-column-menu {
    position: absolute;
    top: 0;
    // Remove once we drop support for Safari 13.
    // stylelint-disable-next-line property-disallowed-list
    left: -0.9rem;
    inset-inline-start: -0.9rem;
    z-index: 100;
    min-width: 10rem;
    background-color: $color-white;

    button {
      width: 100%;
      margin: 1px;
    }
  }

  .control-cell ul.add-column-menu {
    top: 0;
  }
}
