.handsontable {
  .ht__highlight {
    background: var(--sn-light-grey) !important;
  }
  th {
    background: var(--sn-super-light-grey) !important;
    border-color: var(--sn-light-grey) !important;
  }

  td.area:before {
    background: var(--sn-science-blue) !important;
  }

  td {
    border-color: var(--sn-light-grey) !important;
  }
}

.common-table-format {
  display: block;
  page-break-inside: avoid;
  width: 100%;
  overflow: auto;

  &.simple-table {
    th,
    td:first-child {
      background: $color-concrete;
      font-weight: normal;
    }
  }

  tr:first-child {
    height: 27px;
  }

  th:first-child {
    width: 50px;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    width: max-content;
  }

  tr {
    text-align: left;
    vertical-align: top;

    td,
    th {
      border: 1px solid $color-silver;
      padding: 5px;

      span {
        display: inline-block;
        min-height: 19px;
      }

      &.htCenter {
        text-align: center;
      }

      &.htRight {
        text-align: right;
      }

      &.htJustify {
        text-align: justify;
      }

      &.htMiddle {
        vertical-align: middle;
      }

      &.htBottom {
        vertical-align: bottom;
      }

    }

    th {
      background: $color-concrete;
    }
  }
}
