/* My account: the licence and download views.
 *
 * Its own stylesheet under its own handle. The storefront plugin's stylesheet
 * is dequeued by the theme, so anything placed there never reaches these pages.
 */

/* WooCommerce renders the download button with `button alt`, and the theme
 * styles `.button` but not the alt variant - so the one button a customer is
 * meant to press came out in WooCommerce's default purple while every other
 * button on the page was the theme's blue.
 *
 * WooCommerce's own rule is `.woocommerce a.button.alt`, which is 0-3-1. A
 * three-class selector loses to it by a single element, so the selector below
 * carries `.woocommerce a` as well. Measured on the running site rather than
 * reasoned about: the first attempt had exactly three classes and lost.
 *
 * The colour is taken from the variable the theme's own buttons use rather than
 * copied, so this follows along if the theme is restyled. The fallback is what
 * that variable resolved to when this was written.
 */
.woocommerce a.woocommerce-MyAccount-downloads-file.button.alt,
.woocommerce a.woocommerce-MyAccount-downloads-file.button.alt:hover {
    background: var(--ith-orange, #009deb);
    color: #fff;
}

/* Centring the label in the button.
 *
 * The theme gives buttons min-height 48px with 13px of padding and a 16px line
 * box. On an inline-block that leaves 13px above the text and 19px below, so
 * the label sits three pixels high - visible, and worse on the shorter labels.
 * Measured on the running site, not assumed.
 *
 * Flex centres the line box in whatever height the button ends up with, so this
 * keeps holding if the theme changes its padding.
 */
.woocommerce a.woocommerce-MyAccount-downloads-file.button.alt,
.woocommerce .np-licenses__download button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* The Licenses table: the version sat beside the button and wrapped onto its
 * own line mid-phrase. It belongs under the button, quietly.
 */
.np-licenses__download {
    margin: 0;
}

.np-licenses__version {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    opacity: .7;
    white-space: nowrap;
}

.np-licenses__no-download {
    opacity: .7;
}

/* The licence key, folded away until asked for.
 *
 * A `details` element, so this styling is cosmetic: with no stylesheet at all
 * the browser's own disclosure triangle still opens it and the key is still
 * reachable. Nothing here may be load-bearing.
 */
.np-key {
    display: inline-block;
}

.np-key__toggle {
    cursor: pointer;
    font-size: 13px;
    opacity: .75;
    list-style: none;
    user-select: none;
}

/* Safari still draws the default marker through `list-style`, so it is removed
 * on its own pseudo-element too.
 */
.np-key__toggle::-webkit-details-marker {
    display: none;
}

.np-key__toggle::before {
    content: "\25B8\00a0"; /* right-pointing triangle, then a space */
    display: inline-block;
    transition: transform .12s ease;
}

.np-key[open] .np-key__toggle::before {
    transform: rotate(90deg);
}

.np-key[open] .np-key__toggle {
    opacity: .6;
}

.np-key__value {
    display: inline-block;
    margin-top: 4px;
    white-space: nowrap;
    user-select: all; /* one click selects the whole key, ready to copy */
}