.MesaComponent {
  th {
    background:  rgba(0, 0, 10, 0.02);;
    transition: background 0.25s;
    position: relative;
    color: #444;
    text-align: left;

    &[draggable="true"] {
      cursor: -moz-grab;
      cursor: -webkit-grab;
      cursor: grab;
      &:active {
        // cursor: -moz-grabbing;
        // cursor: -webkit-grabbing;
        // cursor: grabbing;
      }
    }

    &:active {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
    }
    &:hover {
      background: rgba(0, 0, 20, 0.07);
    }
  }

  td {
    vertical-align: top;
    /*overflow: auto;*/
  }

  th, td {
    margin: 0;
    padding: 10px;
    margin-top: -1px;
    border-right: none;
    border-top: 1px solid transparent;
    border-right: 1px solid $borderColor;
    border-bottom: none;

    p {
      margin-top: 0;
    }

    &:first-of-type {
      border-left: 1px solid $borderColor;
    }
  }

  th.SelectionCell, td.SelectionCell {
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 4em;
  }

  .HeadingCell--Dragging {
    background: rgba(0, 0, 0, 0.2);
    color: #444;
    opacity: 0.75;
  }
  .HeadingCell--DragTarget {
    border-right-style: dashed;
    border-right-color: rgba(0, 0, 0, 0.3);
    padding-right: 12px;
    border-right-width: 3px;
    * {
      pointer-events: none;
    }
  }
  .HeadingCell--Dragging.HeadingCell-DragTarget {
    border-right-style: solid;
    border-right-width: 1px;
    padding-right: 15px;
  }
}