$event-table--field-margin: $ix-marg-b;

.event-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;

  .event-table--table {
    flex: 1 1 100%;
  }

  .event-table-header {
    flex: 0 0 auto;
  }
}


.event-table-header, .event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  > * {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.event-table-header {
  padding: 0 $event-table--field-margin;
  margin-bottom: $ix-marg-c;
}

.event-table-header--field {
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: $g11-sidewalk;
  margin: 0 $event-table--field-margin;
}

.event-row, .event-loading-row, .event-footer-row, .event-error-row {
  height: calc(100% - 4px);
  width: 100%;
  border-radius: $radius;
  display: flex;
  align-items: center;
  font-size: $ix-text-base;
  padding: 0 $event-table--field-margin;
}

.event-row, .event-loading-row {
  background: $g3-castle;
}

.event-footer-row, .event-error-row {
  justify-content: center;
  font-weight: 600;
  user-select: none;
}

.event-footer-row {
  color: $g11-sidewalk;
}

.event-error-row {
  color: $c-curacao;
}

.event-row--field, .event-loading-row--placeholder {
  margin: 0 $event-table--field-margin;
}

.event-row--field {
  overflow: hidden;
}

@keyframes glow {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.5;
  }
}

.event-loading-row--placeholder {
  background-color: $g6-smoke;
  border-radius: $radius-small;
  animation-name: glow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
