@use "scss/colors";
@use "scss/variables";

.table {
  td {
    padding-top: 0;
    padding-bottom: 0;
  }

  tr {
    vertical-align: top;
  }
}

.draft {
  padding-left: variables.$spacing-md;
}

.draftInProgress {
  padding: 0 variables.$spacing-md;
  white-space: nowrap;
}

.versionItem {
  border-radius: variables.$border-radius-sm;
  padding: variables.$spacing-md;
  border: none;
  background: none;
  display: block;
  text-align: left;

  &:hover {
    cursor: pointer;
    background: colors.$grey-50;
  }

  &--active:hover {
    cursor: initial;
    background: none;
  }
}

.activeVersion {
  background: colors.$grey-50;
  color: colors.$dark-blue;
  border-radius: variables.$border-radius-sm;
  padding: variables.$spacing-sm;
  text-transform: uppercase;
}

.nameCell {
  width: 100%;
  padding: 0;

  // This height is ignored due to this being inside of a `display: table-row` element.
  // But a concrete value is necessary to allow the child div to take up the full height of this cell.
  height: 1px;

  .nameLink {
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: variables.$spacing-md;
    padding: variables.$spacing-md variables.$spacing-lg;

    svg {
      flex-shrink: 0;
    }
  }
}

.actions {
  width: 100%;
}

$rowHeight: 38px; // hardcode height to keep cells aligned with first line of 'name' column

.cell {
  height: $rowHeight;
}

.versionHeader {
  display: flex;
  height: $rowHeight;
  align-items: center;
}

.updatedAtCell {
  white-space: nowrap;
}

.baseConnectorInfo {
  white-space: nowrap;
}

.contributionInfo {
  padding: 0 0 variables.$spacing-lg variables.$spacing-2xl;
}

.contributionIcon {
  flex-shrink: 0;
  align-self: flex-start;
}

$iconWidth: 16px;

.contributionText {
  align-self: flex-end;
  padding-top: variables.$spacing-sm;
  white-space: nowrap;
}

.connectorIcon {
  width: $iconWidth;
  height: $iconWidth;
}
