/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* ===== button.css =====================================================
  == Styles used by the XUL button element.
  ======================================================================= */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* :::::::::: button :::::::::: */

button {
    appearance: auto;
    -moz-default-appearance: button;
    margin: 1px 5px 2px;
    min-width: 6.3em;
    color: ButtonText;
    background-color: ButtonFace;
    text-shadow: none;
    border: 1px solid ThreeDLightShadow;
    /* TODO: In Windows 11 perhaps we want some border-radius */
}

.button-box {
    @media (-moz-windows-classic) {
        border: 3px solid transparent;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-inline-start: 3px;
        padding-inline-end: 4px;
    }
}

button:where(:hover) {
    background-color: -moz-ButtonHoverFace;
}

button:where(:hover:active) {
    background-color: -moz-ButtonActiveFace;
}

.button-text {
    margin: 0;
    text-align: center;
}

/* .......... focused state .......... */

button:focus-visible {
    outline: var(--default-focusring);
    outline-offset: calc(-1 * var(--default-focusring-width) - 2px);
}

@media (prefers-color-scheme: dark) {
    button:focus-visible {
        outline: 1px auto;
        outline-offset: initial;
    }
}

/* .......... default/hover/focused state .......... */

@media (prefers-contrast) and (-moz-windows-compositor) {

    /* This is for high-contrast black and white themes on Windows 8 and later,
     where the native appearance renders a different background (which
     appears to be equivalent to the Highlight color) if the button is in the
     default, hovered or focused state. However, if these states overlap with
     the active, disabled, open or checked state, the appearance reverts back
     to the default background. */
    button:where([default="true"], :hover, :focus):where(:not(:active, [disabled="true"], [open="true"], [checked="true"])) {
        color: HighlightText;
    }
}

/* .......... disabled state .......... */

button:where([disabled="true"]) {
    color: GrayText;
    background-color: ButtonFace;
}

@media (-moz-windows-classic) {
    button:where([disabled="true"]) {
        color: ThreeDShadow;
        text-shadow: 1px 1px ThreeDHighlight;
    }
}

/* ::::: menu buttons ::::: */

.button-menu-dropmarker {
    appearance: none;
    list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
    -moz-context-properties: fill;
    fill: currentColor;
    width: 12px;
    height: 12px;
}

/* ::::: plain buttons ::::: */

button.plain {
    margin: 0 !important;
    padding: 0 !important;
}

button[type="disclosure"] {
    margin: 0;
    appearance: none;
    list-style-image: url("chrome://global/skin/icons/arrow-right-12.svg");
    -moz-context-properties: fill;
    fill: currentColor;
    min-width: 0;
}

button[type="disclosure"][open="true"] {
    list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
}