/*
 * Checkout Components
 * Order summary line items, dividers, and course thumbnails
 */

@layer components {
  /* Checkout order summary */
  .checkout-item {
    display: flex;
    align-items: flex-start;
    gap: var(--block-space-3quarter);
  }

  .checkout-item__icon {
    flex-shrink: 0;
    inline-size: 2rem;
    block-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-lighter);
    border-radius: var(--radius);

    & .icon {
      inline-size: var(--icon-sm);
      block-size: var(--icon-sm);
      color: var(--color-gray-dark);
    }
  }

  .checkout-item__details {
    flex: 1;
    min-width: 0;
  }

  .checkout-item__title {
    color: var(--color-gray-darker);
    line-height: var(--leading-tight);
  }

  .checkout-item__meta {
    font-size: var(--text-small);
    color: var(--color-gray-dark);
  }

  .checkout-item__price {
    flex-shrink: 0;
    color: var(--color-gray-darker);
    white-space: nowrap;
  }

  .checkout-divider {
    border: none;
    border-top: var(--border-subtle);
    margin-block: var(--block-space-half);
  }

  .checkout-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--text-normal);
  }

  .checkout-line--total {
    font-size: var(--text-large);
    color: var(--color-gray-darker);
  }
}