/* =============================================================================
   stripe.css - Stripe addon styles
   =============================================================================
   Ships with the Stripe addon. Copy to includes/css/stripe.css and link it in
   index.html after theme.css. Styles the My purchases page: one bordered
   entry per purchase, its name and amount on one line, the date and the
   payment state below, then the receipt and the links.
   ============================================================================= */

.stripe-purchases {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stripe-purchase {
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid var(--silver);
    border-radius: var(--radius-lg);
    background: var(--white);
}

.stripe-purchase-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.stripe-purchase-name {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-end: 12px;
    overflow-wrap: anywhere;
}

.stripe-purchase-amount {
    flex: 0 0 auto;
    font-weight: 700;
}

.stripe-purchase-meta {
    margin: 4px 0 0 0;
    color: var(--gray);
}

.stripe-purchase-date {
    margin-inline-end: 12px;
}

/* The state in the text colour, or the error colour (which follows the
   light and dark modes) for a payment that never landed or was given back */
.stripe-purchase-status {
    font-weight: 700;
    color: var(--black);
}

.stripe-purchase-status-expired,
.stripe-purchase-status-refunded {
    color: var(--error-text);
}

/* The line under a purchase: links, codes and states on the left, the
   actions (the core actions menu, or one small row-action button) at the
   end */
.stripe-purchase-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 0 0;
}

.stripe-purchase-links-main {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    margin: 0;
}

.stripe-purchase-links .actions-menu-holder,
.stripe-purchase-links .row-action {
    flex: 0 0 auto;
    margin-inline-start: 8px;
}

.stripe-purchase-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 16px 4px 0;
    overflow-wrap: anywhere;
}

.stripe-purchase-link-text {
    color: var(--gray);
}

/* A label that is not a link (beside a code) reads quietly */
.stripe-purchase-label {
    color: var(--gray);
}

/* A copyable code: the thing to read, in a code face, never split */
.stripe-purchase-code {
    white-space: nowrap;
    overflow-wrap: normal;
    margin-inline-start: 8px;
    padding: 0;
    background: none;
    color: var(--black);
    font-weight: 700;
    letter-spacing: .05em;
}

/* A state (Unused, Redeemed): quiet text after the code */
.stripe-purchase-tag {
    color: var(--gray);
}