.record-list {
  list-style: none;
  margin-block: var(--space-l);
}

.record-list__entry {
  display: grid;
  grid-template-columns: 3fr 1fr max-content;
  justify-content: space-between;
  padding-block: var(--space-m);
  align-items: center;

  & ~ & {
    border-top: 1px solid var(--color-subtle);
  }
}

.list-entry__attributes {
  font-size: var(--font-size-xs);
}

.list-entry__text-status {
  position: relative;
  width: 12ch;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  line-height: var(--font-size-xs);;
  border-radius: .5rem;
  background-color: hsl(0 0% 80% / 0.5);
  padding: var(--space-xxs);
  cursor: default;

  &[data-status=finished] {
    background-color: hsl(125 90% 50% / 0.5);
  }

  &[data-status=running] {
    background-color: hsl(50 100% 50% / 0.5);
  }

  &[data-status=error] {
    background-color: hsl(0 78% 63% / 0.5);
  }
}

.list-entry__text-status--alert::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: hsl(0 78% 63%);
  top: -4px;
  right: -4px;
  border: 2px solid white;
  box-sizing: unset;
}

.list-entry__item-subtext {
  font-size: var(--font-size-xs);
  font-weight: bold;
}