---
const { url, title, time } = Astro.props;
---

<a href={url}>
  <div class="decorativetab"></div>
  <article>
    <h3>{title}</h3>
    <time class="barcodetext" datetime={time}>{time}</time>
  </article>
</a>

<style>
  a {
    display: flex;
    border: 10px double;
    text-decoration: none;
    margin-bottom: 13px;
  }

  article {
    flex: 1 1;
    padding: 13px 15px;
    overflow: hidden;
  }

  article h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  time {
    font-weight: bold;
    font-size: 2rem;
  }

  .decorativetab {
    width: 16px;
    border-right: 10px double;
    transition: width 200ms;
  }

  a:hover {
    color: var(--yellow);
  }

  a:hover .decorativetab {
    width: 64px;
  }

  @media (prefers-reduced-motion: reduce) {
    .decorativetab {
      transition: none;
    }
  }
</style>