/*
 * downloads.css — the `downloads` element type.
 *
 * WHERE THESE RULES COME FROM. The old partial
 * (X:\v72.future-magic\themes\fuma19\partial.downloads.phtml) carried all of
 * them as inline `style` attributes: the section's grey ground, the 4px gap
 * under each button, and the link's padding and lack of underline. They moved
 * out here under plan 04 decision 6 — a type's look belongs in a stylesheet,
 * where it can be retuned without editing a template.
 *
 * Linked by the glob in themes/default/sections/section.styles.phtml, which
 * runs after css/custom.min.css. Nothing links it from the partial.
 *
 * WHY THE LINK CARRIES BUTTON CHROME. The old markup put the <a> INSIDE a
 * <button> and let the browser's default button styling do the work. That
 * nesting is invalid — an interactive element inside another — so plan 04 step
 * G makes the <a> the element and moves the look here. The declarations below
 * are the values a browser's own default button uses, spelled out: the CSS
 * system colours ButtonFace / ButtonText / ButtonBorder, which is what the UA
 * stylesheet reads, so the result follows the platform and the user's theme
 * exactly as the old <button> did.
 */

.downloads {
    background-color: #CCC;
}

.downloads__link {
    display: inline-block;
    margin-bottom: 4px;
    padding: 4px;

    /* what the old <button> got from the UA stylesheet */
    background-color: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonBorder;
    border-radius: 2px;
    font: inherit;

    text-decoration: none;
    cursor: pointer;
}

.downloads__link:hover,
.downloads__link:focus {
    text-decoration: underline;
}