.apos-table {
  width: 100%;
  border-collapse: collapse;
  line-height: var(--a-line-base);
}

.apos-table__header {
  margin-bottom: $spacing-base;
  padding: 12.5px 15px;
  border-bottom: 1px solid var(--a-base-8);
  color: var(--a-base-3);
  text-align: left;
}

.apos-table__header--title {
  width: 100%;
}

.apos-table__header-icon {
  @include apos-align-icon();

  & {
    margin-right: 5px;
  }
}

.apos-table__header-label,
.apos-table__cell-field {
  @include apos-button-reset();
  @include type-base;

  &:hover {
    cursor: default;
  }
}

.apos-table__header-label {
  display: flex;
  align-items: center;
  white-space: nowrap;

  &.apos-is-hidden {
    visibility: hidden;
    position: absolute;
  }
}

span.apos-table__header-label:hover { /* stylelint-disable-line selector-no-qualifying-type */
  cursor: auto;
}

.apos-table :deep(.apos-choice-label) {
  margin-top: 0;
}

.apos-table__cell,
.apos-table__row {
  @include apos-transition($what: all, $duration: 0.05s);
}

.apos-table__cell {
  padding: 5px 15px;
  border-bottom: 1px solid var(--a-base-10);
}

.apos-table__cell--context-menu  {
  padding-right: 0;
  padding-left: 0;
}

.apos-table__cell-field--context-menu  {
  width: 100%;
}

.apos-table__cell:not(.apos-table__cell--title) {
  white-space: nowrap;
}

.apos-table__link {
  color: var(--a-primary);
}

.apos-table__row:hover {
  box-shadow: 0 8px 12px -12px rgb(0 0 0 / 30%);
}

.apos-table__row:hover .apos-table__cell,
.apos-table__row.apos-is-selected .apos-table__cell {
  background-color: var(--a-base-10);
  border-bottom: 1px solid var(--a-base-7);
}

.apos-table__cell-field {
  margin: 0;
}

// might have to be expanded kinda magic
.apos-table__cell-field--title {
  max-width: 50vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
