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

/* Base */
@import url("chrome://dot/skin/browser-dialog.css");
@import url("chrome://dot/skin/browser-layouts.css");
@import url("chrome://dot/skin/browser-theme.css");

/* Components */
@import url("chrome://dot/content/widgets/browser-button.css");
@import url("chrome://dot/content/widgets/browser-tab.css");
@import url("chrome://dot/content/widgets/browser-web-panel.css");
@import url("chrome://dot/content/widgets/browser-status.css");
@import url("chrome://dot/content/widgets/browser-window-controls.css");
@import url("chrome://dot/content/widgets/browser-icon.css");
@import url("chrome://dot/content/widgets/browser-tabs.css");
@import url("chrome://dot/content/widgets/browser-spring.css");
@import url("chrome://dot/content/widgets/browser-customizable-area.css");
@import url("chrome://dot/content/widgets/browser-tab-label.css");
@import url("chrome://dot/content/widgets/browser-tab-icon.css");
@import url("chrome://dot/content/widgets/browser-web-contents.css");
@import url("chrome://dot/content/widgets/browser-customizable-template.css");
@import url("chrome://dot/content/widgets/browser-customizable-area-empty.css");
@import url("chrome://dot/content/widgets/browser-context-menu.css");
@import url("chrome://dot/content/widgets/browser-debug-hologram.css");
@import url("chrome://dot/content/widgets/browser-group.css");
@import url("chrome://dot/content/widgets/browser-separator.css");
@import url("chrome://dot/content/widgets/browser-tooltip.css");
@import url("chrome://dot/content/widgets/browser-tabs-tooltip.css");

/* XUL */
@import url("chrome://dot/skin/input.css");
@import url("chrome://dot/skin/tooltip.css");

/* Define LWT variables */
:root {
    --devtools-splitter-color: var(--chrome-content-separator-color, var(--fdn-border-colour));
}

:root {
    /*
     * Compact = 4px
     * Default = 8px
     * Touch = 16px
     */
    --browser-ui-density: 8px;

    --browser-high-contrast-color: color-mix(in srgb, currentColor 100%, transparent 50%);
}

:root {
    font: message-box;
}

html,
body {
    display: flex;
    flex-direction: column;
    color: -moz-dialogtext;
    font: message-box;
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 400px;
    min-height: 250px;
    overflow: clip;
    user-select: none;
}

browser-application {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: var(--lwt-text-color);
    background-color: var(--toolbar-bgcolor);
    accent-color: var(--browser-accent-color);
}

:root[chromemargin]:not([chromemargin=""]) browser-application {
    -moz-window-dragging: drag;
}

a {
    color: var(--fdn-colours-link);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

a:hover,
a:focus-visible {
    text-decoration: none;
}

main a:not(.fdn-not-visited, .fdn-button):visited {
    color: var(--fdn-colours-visited-link);
}

pre {
    font-family: monospace;
}

hr.fdn-separator {
    width: 0;
    height: 0;
    margin: 0;
    border: 0;
    color: inherit;
    margin-block: 0;
    margin-inline: 0;
    background-color: var(--fdn-border-colour);
}

.fdn-separator.h {
    width: 100%;
    height: 1px;
}

.fdn-separator.v {
    width: 1px;
    height: 100%;
}

.fdn-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    border: 1px solid var(--fdn-border-secondary-colour);
}

/* Overflow helper classes */
.overflow-hidden {
    overflow: hidden;
}

.overflow-clip {
    overflow: clip;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-visible {
    overflow: visible;
}

.auxiliary-dragging * {
    cursor: -moz-grabbing;
}

.auxiliary-resizing * {
    cursor: ew-resize;
}

#appcontent {
    display: flex;
    min-height: 0;
    height: 100%;
    position: relative;
    z-index: 300;
    -moz-window-dragging: no-drag;
    color-scheme: unset;
}

#appcontent:not([status]) browser-status {
    display: none;
}

:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Hide the toolbar if it has been requested to be hidden */
:root[chromehidden~="toolbar"] browser-toolbar[name=toolbar] {
    display: none;
}

/* Hide the menubar if it has been requested to be hidden */
:root[chromehidden~="menubar"] browser-toolbar[name=menubar] {
    display: none;
}

@media (prefers-reduced-motion) {

    *,
    *::before,
    *::after {
        transition-duration: 0ms !important;
        transition-timing-function: linear !important;
        transition-delay: 0ms !important;
        animation-duration: 0ms !important;
        animation-timing-function: linear !important;
        animation-delay: 0ms !important;
    }
}