/* 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/. */

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

@import url("chrome://dot/skin/input-base.css");

button,
select,
xul|button,
html|button,
html|select {
    appearance: none;

    min-height: 24px;
    min-width: 16px;

    border: none;
    border-radius: 6px;

    font: message-box;

    color: var(--button-color, currentColor);
    background-color: var(--button-background, var(--button-default-color));

    outline: var(--button-outline);
    outline-offset: var(--button-outline-offset);

    transition: var(--button-transition);

    z-index: var(--button-z-index);
}

button,
xul|button,
html|button {
    padding: 6px 24px;
}

select,
html|select {
    padding: 6px 14px;

    background-image: url(chrome://dot/skin/icons/chevron-down.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    -moz-context-properties: fill;
    fill: currentColor;
}

button:hover:not(:disabled),
select:focus:not(:disabled),
xul|button:hover:not(:disabled),
html|button:hover:not(:disabled),
html|select:hover:not(:disabled),
html|select:focus:not(:disabled),
button[checked]:not(:disabled),
xul|button[checked]:not(:disabled),
html|button[checked]:not(:disabled) {
    --button-background: var(--button-hover-color);
}

/* 
 * Since we are applying the background using CSS variables, 
 * it would change the background of children in menu elements,
 * which is why we are simply applying the hover bg straight up. 
 */
::slotted(menu[_moz-menuactive]:not([disabled])) {
    background-color: var(--button-hover-color) !important;
}

button:is(:hover, :focus-visible):is(:active, [active], [mouseactive]):not(:disabled),
select:is(:focus-visible):is(:active, [active], [mouseactive]):not(:disabled),
xul|button:is(:hover, :focus-visible):is(:active, [active], [mouseactive]):not(:disabled),
html|button:is(:hover, :focus-visible):is(:active, [active], [mouseactive]):not(:disabled),
html|select:is(:focus-visible):is(:active, [active], [mouseactive]):not(:disabled),
:host(dialog) xul|button:is(:hover, :focus):is(:active, [active], [mouseactive]):not(:disabled) {
    --button-background: var(--button-active-color);
}

button:disabled .browser-button-container,
select:disabled,
xul|button:disabled .browser-button-container,
html|button:disabled .browser-button-container,
html|select:disabled,
button[disabled] .browser-button-container,
select[disabled],
xul|button[disabled] .browser-button-container,
html|button[disabled] .browser-button-container,
html|select[disabled] {
    filter: opacity(var(--button-disabled-opacity));
    pointer-events: none;
}

button:focus-visible:not(:is(:active, [active], [mouseactive])),
select:focus-visible,
xul|button:focus-visible:not(:is(:active, [active], [mouseactive])),
html|button:focus-visible:not(:is(:active, [active], [mouseactive])),
html|select:focus-visible,
:host(dialog) xul|button:focus:not(:is(:active, [active], [mouseactive])) {
    --button-background: var(--button-hover-color);

    --button-outline: 2px solid AccentColor;
    --button-outline-offset: 2px;

    --button-z-index: 2147483647;
}

button:focus-visible:is(:active, [active], [mouseactive]),
xul|button:focus-visible:is(:active, [active], [mouseactive]),
html|button:focus-visible:is(:active, [active], [mouseactive]),
:host(dialog) xul|button:focus:is(:active, [active], [mouseactive]) {
    --button-outline: 2px solid AccentColor;
    --button-outline-offset: 0px;

    --button-outline-offset-transition-duration: 100ms;
}

button[primary],
xul|button[primary],
html|button[primary] {
    --button-base-color: AccentColor;
    --button-mix-color: currentColor;
    --button-color: white;

    --button-override-default-color-mix: 100%;
    --button-override-hover-color-mix: 85%;
    --button-override-active-color-mix: 70%;
    --button-override-checked-color-mix: 70%;
    --button-override-checked-hover-color-mix: 60%;
    --button-override-checked-active-color-mix: 55%;
}

@media (prefers-contrast) {

    button:not(:disabled, [inert]),
    select:not(:disabled),
    xul|button:not(:disabled, [inert]),
    html|button:not(:disabled, [inert]),
    html|select:not(:disabled) {
        outline: 1px solid var(--browser-high-contrast-color);
    }
}