/**
 * enyo-modern-compat.css
 *
 * Patches for Enyo 0.10 controls in modern Chrome/WebKit and Firefox.
 *
 * Chrome/WebKit: old WebKit applied border-width to layout even without
 * border-style.  Modern Chrome requires explicit border-style: solid so that
 * border-width reserves space in the box model.  Also adds unprefixed
 * border-image alongside -webkit-border-image.
 *
 * Firefox: does not support -webkit-border-image at all.  Needs the standard
 * border-image property (with fill where a background is required) plus
 * explicit background-color/gradient on elements whose background was
 * supplied by the webOS OS compositor rather than CSS.
 *
 * Rules that only apply to Firefox are wrapped in
 * @supports (-moz-appearance: none) — Chrome and Safari ignore that block.
 *
 * Load this file AFTER enyo-build.css.
 */

/* ── Buttons ─────────────────────────────────────────────────────────── */
.enyo-button {
    border-style: solid;
    border-image: url(build/palm/themes/Onyx/images/button-up.png) 4 4 4 4 fill stretch stretch;
}

.enyo-button.enyo-button-down,
.enyo-button.enyo-button-depressed {
    border-image: url(build/palm/themes/Onyx/images/button-down.png) 4 4 4 4 fill stretch stretch;
}

/* ── Radio buttons and tab buttons ───────────────────────────────────── */
.enyo-radiobutton,
.enyo-tabbutton {
    border-style: solid;
}

/* ── Toggle buttons ──────────────────────────────────────────────────── */
.enyo-toggle-button-bar.on {
    border-style: solid;
    border-image: url(build/palm/themes/Onyx/images/toggle-button.png) 1 30 97 8 repeat repeat;
}

.enyo-toggle-button-bar.off {
    border-style: solid;
    border-image: url(build/palm/themes/Onyx/images/toggle-button.png) 33 8 65 30 repeat repeat;
}

.enyo-toggle-button-bar.disabled.on {
    border-style: solid;
    border-image: url(build/palm/themes/Onyx/images/toggle-button.png) 65 30 33 8 repeat repeat;
}

.enyo-toggle-button-bar.disabled.off {
    border-style: solid;
    border-image: url(build/palm/themes/Onyx/images/toggle-button.png) 97 8 1 30 repeat repeat;
}

/* ── Row groups ──────────────────────────────────────────────────────── */
.enyo-group {
    border-style: solid;
    border-image: url(build/palm/themes/Onyx/images/group-unlabeled.png) 14 14 repeat repeat;
}

.enyo-group.labeled {
    border-style: solid;
    border-image: url(build/palm/themes/Onyx/images/group-labeled.png) 36 14 14 14 repeat repeat;
}

/* ── Popups — shared ─────────────────────────────────────────────────── */
/* border-style: solid is required in modern Chrome/WebKit so that
   border-width: 24px reserves space in the box model, giving the popup
   its rounded-corner border area and interior padding.                    */
.enyo-popup {
    border-style: solid;
    border-image: url(build/palm/themes/Onyx/images/popup.png) 24 24 24 24 stretch stretch;
}

/* ── Firefox-only: popup backgrounds and menus ───────────────────────── */
/* Chrome renders all popup variants correctly via -webkit-border-image
   from enyo-build.css.  Firefox needs the standard border-image property,
   and for elements whose background was provided by the webOS OS compositor
   (appmenu) an explicit CSS background must be supplied.
   @supports (-moz-appearance: none) is true only in Firefox.              */
@supports (-moz-appearance: none) {

    /* Standard popup: add fill so Firefox shows the popup background */
    .enyo-popup {
        border-image: url(build/palm/themes/Onyx/images/popup.png) 24 24 24 24 fill stretch stretch;
    }

    /* Dropdown / list-selector menus */
    .enyo-popup.enyo-popup-menu {
        border-style: solid;
        border-image: url(build/palm/themes/Onyx/images/menu-background.png) 20 20 20 20 fill stretch stretch;
    }

    /* App menu — appmenu.png is a transparent-centre frame; the dark
       interior background was provided by the OS compositor on real webOS. */
    .enyo-popup.enyo-appmenu {
        border-style: solid;
        border-image: url(build/palm/themes/Onyx/images/appmenu.png) 12 24 20 24 stretch stretch;
        background: linear-gradient(to bottom, #3d3d3d, #111111);
        background-clip: padding-box;
    }

    /* Row groups also need fill in Firefox */
    .enyo-group {
        border-image: url(build/palm/themes/Onyx/images/group-unlabeled.png) 14 14 fill repeat repeat;
    }

    .enyo-group.labeled {
        border-image: url(build/palm/themes/Onyx/images/group-labeled.png) 36 14 14 14 fill repeat repeat;
    }
}