.canvasVarConfig__container {
  width: 100%;
  position: relative;

  &.canvasVarConfig-isEditMode {
    .canvasVarConfig__innerContainer {
      transform: translateX(-50%);
    }
  }
}

.canvasVarConfig__list {
  table {
    background-color: transparent;
  }

  thead tr th,
  thead tr td {
    border-bottom: none;
    border-top: none;
  }

  tbody tr td {
    border-top: none;
    border-bottom: none;
  }

  tbody tr:hover {
    background-color: transparent;
  }

  tbody tr:last-child td {
    border-bottom: none;
  }
}

.canvasVarConfig__innerContainer {
  width: calc(200% + 48px); // Account for the extra padding

  position: relative;

  display: flex;
  flex-direction: row;
  align-content: stretch;

  .canvasVarConfig__editView {
    margin-left: 0;
  }

  .canvasVarConfig__listView {
    margin-right: 0;
  }
}

.canvasVarConfig__editView {
  width: 50%;
  height: 100%;

  flex-shrink: 0;
}

.canvasVarConfig__listView {
  width: 50%;

  flex-shrink: 0;
}