@layer components {
  /*
   * List row
   *
   * Example usage:
   * <div class="list-row">
   *   <div class="item">
   *     <div>Default left content</div>
   *     <div class="right">Right content (optional)</div>
   *   </div>
   *   <div class="item">
   *     <div>Another item</div>
   *   </div>
   * </div>
   */
  
  .list-row {
    display: flex;
    flex-direction: column;
    width: 100%;
  
    .item {
      display: flex;
      align-items: center;
      padding: 1rem 0;
      border-bottom: 1px solid var(--color-grey-100);
  
      > div {
        text-align: left;
        flex: 1;
      }
  
      .right {
        text-align: right;
        flex: 0 0 auto;
        margin-left: 1rem;
        white-space: nowrap;
      }
  
      &:last-child {
        border-bottom: none;
      }
  
      @media (max-width: 639.98px) {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
  
        .right {
          margin-left: 0;
          align-self: flex-end;
        }
      }
    }
  }
}