/* =============================================================================
   downloads.css - Digital Downloads addon styles

   Linked after theme.css. The store lays its products out with the theme's
   .card-grid > .custom-column > .inner-column > .card grid; this file adds
   what the cards and pages need on top: the price and file lines, the
   Owned tag, the consent box, the licence text and notices, and the panels
   of the inline disclosures; then the admin pages: the All products link,
   the Product, File and Danger zone cards with their headings and hints, the file
   picker, the version history, the status chips and the admin tables.
   Built from the style.css and theme.css tokens, so it follows the theme
   and dark mode.
   ============================================================================= */

.downloads-card {
    display: flex;
    flex-direction: column;
}

.downloads-card h2 {
    margin-top: 0;
    font-size: 1.25rem;
    line-height: 1.25;
}

.downloads-card .form-actions {
    margin-top: auto;
}

.downloads-price {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.downloads-meta {
    margin: 0 0 8px 0;
    color: var(--gray);
    font-size: .875rem;
}

/* Descriptions and licence texts keep the line breaks the admin typed */
.downloads-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.downloads-tag {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--on-accent);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}

.downloads-notice {
    font-weight: 600;
}

.downloads-notice-error {
    color: var(--error-text);
}

/* The checkbox beside its sentence, both on one line that wraps */
.downloads-consent {
    display: flex;
    align-items: flex-start;
    font-weight: 400;
}

.downloads-consent input {
    flex: 0 0 auto;
    width: auto;
    margin: 4px 12px 0 0;
}

.downloads-consent span {
    flex: 1 1 auto;
    min-width: 0;
}

/* The panels the ui.js inline disclosures show and hide (Read the
   licence, Translations): hidden until their button opens them */
.downloads-disclosure-panel {
    display: none;
}

.downloads-disclosure-panel.open {
    display: block;
}

.downloads-licence p {
    margin: 12px 0 0 0;
}

.downloads-translations {
    margin-bottom: 16px;
}

.downloads-translations .downloads-disclosure-panel {
    margin-top: 12px;
}

.downloads-translations .downloads-disclosure-panel > div {
    margin-top: 12px;
}

/* -----------------------------------------------------------------------------
   Admin pages
   -------------------------------------------------------------------------- */

/* The small All products link above the page title */
.downloads-back {
    margin: 0 0 12px 0;
    font-size: .875rem;
}

.downloads-back a {
    color: var(--gray);
    text-decoration: none;
}

.downloads-back a:hover,
.downloads-back a:focus-visible {
    color: var(--black);
    text-decoration: underline;
}

/* The cards of the edit and sales pages: Product, File, Danger zone. A
   card's title is a section heading, not a second page title. */
.downloads-section {
    min-width: 0;
    overflow-wrap: anywhere;
}

.downloads-section h2 {
    margin: 0 0 16px 0;
    font-size: 1.125rem;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .downloads-section h2 {
        font-size: 1.25rem;
    }
}

.downloads-subheading {
    margin: 24px 0 12px 0;
    font-size: 1rem;
    line-height: 1.25;
}

.downloads-section > .downloads-subheading:first-child {
    margin-top: 0;
}

/* A hint under its control: the control's 16px bottom margin is pulled
   in so the hint reads as part of the field */
.downloads-hint {
    margin: -8px 0 16px 0;
    line-height: 1.4;
}

/* The current file and the empty states: an inset box inside the card */
.downloads-current,
.downloads-empty {
    margin: 0 0 16px 0;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--light);
}

.downloads-empty {
    border-style: dashed;
    color: var(--gray);
}

.downloads-current p {
    margin: 0 0 4px 0;
}

.downloads-current > :last-child {
    margin-bottom: 0;
}

.downloads-current-name {
    font-weight: 600;
}

.downloads-current-meta {
    color: var(--gray);
    font-size: .875rem;
}

.downloads-hash {
    color: var(--gray);
    font-size: .75rem;
    overflow-wrap: anywhere;
}

/* The file picker: the real input stays in the page for keyboards and
   screen readers but out of sight; its label is drawn as the button and
   the chosen file's name sits beside it, wrapping when long */
.downloads-picker {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}

.downloads-picker input.downloads-picker-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
}

.downloads-picker label.downloads-picker-button {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    margin-inline-end: 12px;
    cursor: pointer;
}

.downloads-picker-input:focus-visible + .downloads-picker-button {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.downloads-picker-input:disabled + .downloads-picker-button {
    opacity: .5;
    cursor: default;
}

.downloads-picker-name {
    flex: 1 1 160px;
    min-width: 0;
    padding: 8px 0;
    color: var(--gray);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.downloads-picker-name.downloads-picker-chosen {
    color: var(--black);
}

/* The version history: one row per version, newest first; from 768px the
   version takes a quarter of the row and its details the rest */
.downloads-versions {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.downloads-versions li {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

.downloads-versions li:first-child {
    border-top: 0;
}

.downloads-versions-name {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.downloads-versions-meta {
    display: block;
    min-width: 0;
    color: var(--gray);
    font-size: .875rem;
}

@media (min-width: 768px) {
    .downloads-versions li {
        display: flex;
        align-items: flex-start;
    }

    .downloads-versions-name {
        flex: 0 0 25%;
        min-width: 0;
        margin-bottom: 0;
    }

    .downloads-versions-meta {
        flex: 0 0 75%;
    }
}

/* Status chips: Published (and the Current version) in green, Draft in
   a quiet grey */
.downloads-chip {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--light);
    color: var(--dark);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.downloads-chip-published {
    border-color: var(--green-strong);
    background: var(--green-strong);
    color: var(--on-accent);
}

/* Danger zone: a red edge on the card and an outlined red button */
.downloads-danger {
    border-color: rgba(var(--red-rgb), .45);
}

.downloads-danger .downloads-button-danger {
    border: 1px solid var(--error-text);
    background: transparent;
    color: var(--error-text);
}

.downloads-danger .downloads-button-danger:not([disabled]):hover {
    background: rgba(var(--red-rgb), .1);
    background-image: none;
}

.downloads-danger .downloads-button-danger:focus-visible {
    outline: 2px solid var(--error-text);
    outline-offset: 2px;
}

/* Admin tables: muted second lines, a readable first column, and the
   row's link and actions (the core row-link, row-action and actions menu)
   kept on one line */
.downloads-table small,
.downloads-muted {
    color: var(--gray);
}

.downloads-table td:first-child {
    min-width: 180px;
}

.downloads-table .downloads-col-file {
    min-width: 160px;
    overflow-wrap: anywhere;
}

.downloads-actions {
    white-space: nowrap;
}

.downloads-toolbar {
    margin: 0 0 16px 0;
}