.time__entries {
  display: grid;
  grid-template-columns: minmax(100px, auto) minmax(100px, auto) 1fr;
  width: 100%;

  .time__entry-cell,
  .time__entry-header {
    --bottom-border-size;

    padding: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    border-bottom: var(--bottom-border-size, 1px) solid var(--color-subtle-dark);
  }

  .time__entry-header {
    --bottom-border-size: 2px;

    background-color: var(--color-subtle-light);
  }
}

.start-button {
  .start-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("/assets/clock-c1fe04e4.svg");
    background-size: cover;
    filter: invert(0);
    transition: 
      background-image 300ms ease,
      filter 300ms ease;

    @media (prefers-color-scheme: dark) {
      filter: invert(1);
    }
  }

  &:hover .start-icon {
    background-image: url("/assets/record-start-fc8495f4.svg");

    @media (prefers-color-scheme: dark) {
      filter: invert(0);
      background-image: url("/assets/record-start-dark-9a4b477e.svg");
    }
  }
}

.stop {
  content: url("/assets/record-stop-b52e198b.svg");

  @media (prefers-color-scheme: dark) {
    content: url("/assets/record-stop-dark-c0c3ca89.svg");
  }
}