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

@import url("chrome://dot/content/widgets/browser-toolbar-button.css");
@import url("chrome://dot/content/widgets/browser-toolbar-overflow.css");

:host(browser-toolbar) {
    --toolbar-width: var(--area-width, inherit);
    --toolbar-height: var(--area-height, inherit);
    --toolbar-background: var(--area-background);
}

:host(browser-toolbar) {
    display: flex;
    align-items: stretch;

    width: var(--toolbar-width);
    height: var(--toolbar-height);

    min-height: var(--toolbar-min-height);

    background-color: var(--toolbar-background, transparent);
    color: var(--lwt-text-color);

    --padding: 4px;

    -moz-window-dragging: drag;

    --toolbar-min-height: 28px;

    --csd-visibility: none;

    overflow: hidden;
}

:host(browser-toolbar[initial]) {
    --csd-visibility: flex;
}

:host(browser-toolbar[accent]) {
    background-color: var(--lwt-accent-color);
    z-index: 200;
}

:host(browser-toolbar[collapse]) {
    display: none;
}

@media (prefers-contrast) {
    :host(browser-toolbar:not([initial]))::before {
        content: "";
        position: absolute;
        width: calc(100% + var(--padding));
        height: 1px;
        background-color: var(--browser-high-contrast-color);
        left: calc(0px - var(--padding));
    }
}

:host(browser-toolbar) .customizable-container {
    display: flex;
    align-items: center;
    flex: 1;
    width: 0px;
    gap: 4px;
    overflow: hidden;
}

:host(browser-toolbar[orientation=horizontal])>* {
    padding-inline: var(--padding);
}

:host(browser-toolbar[orientation=vertical])>* {
    padding-block: var(--padding);
}

:host(browser-toolbar) .customizable-container [hidden] {
    visibility: collapse;
}

:host(browser-toolbar) browser-window-controls {
    display: var(--csd-visibility);
}

:host(browser-toolbar) browser-window-controls[position="end"] {
    position: sticky;

    right: 0;
    top: 0;

    background-color: var(--toolbar-background);
    height: var(--toolbar-height);

    & button {
        z-index: 2147483647;
    }
}