/* 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-tab-button.css");

browser-tab {
    display: flex;
    justify-content: flex-start;

    min-width: auto;

    margin: 0;

    appearance: none;

    user-select: none;
    -moz-window-dragging: no-drag;

    will-change: transform;

    overflow: clip;

    --base-transition: 0.3s max-width cubic-bezier(0.19, 1, 0.22, 1), 0.3s width cubic-bezier(0.19, 1, 0.22, 1);
    transition: var(--base-transition);

    will-change: width, min-width, max-width;
}

browser-tab[anime-animating="closing"] {
    pointer-events: none;
}

browser-tab:not([anime-animating]) {
    min-width: var(--tab-min-width);
}

browser-tab>*:not(.browser-tab-background) {
    z-index: 1;
}

browser-tab .browser-tab-background {
    display: flex;
    position: absolute;

    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    background-color: var(--tab-background);

    border-radius: var(--browser-ui-density) var(--browser-ui-density) 0 0;

    transition: 0.3s background-color cubic-bezier(0.19, 1, 0.22, 1),
        0.4s box-shadow cubic-bezier(0.19, 1, 0.22, 1);

    overflow: clip;

    z-index: -1;
}

browser-tab:hover {
    --tab-background: rgba(128, 128, 128, 0.125);
    --tab-label-mask-size: 1em;
}

browser-tab[selected],
browser-tab[tooltipopen="browser-tabs-tooltip"] {
    --tab-background: var(--toolbar-bgcolor);
}

browser-tab .browser-tab-contents {
    display: flex;
    align-items: center;
    flex: 1;
    gap: var(--browser-ui-density);
    overflow: hidden;
}

browser-tab .browser-tab-background .browser-tab-burst {
    background-color: color-mix(in srgb,
            var(--burst-color, transparent),
            transparent 100%);
    width: var(--tab-load-percent, 0%);
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition:
        0.6s opacity cubic-bezier(0.19, 1, 0.22, 1),
        0.3s background-color,
        0s width;
    z-index: 0;
}

browser-tab[progress="2"] .browser-tab-background .browser-tab-burst {
    --burst-color: var(--browser-accent-color) 20%;
}

@media (prefers-reduced-motion: reduce) {
    .browser-tab-background .browser-tab-burst {
        visibility: hidden;
    }
}

browser-tab[progress] .browser-tab-background .browser-tab-burst {
    opacity: 1;
    transition:
        0.6s opacity cubic-bezier(0.19, 1, 0.22, 1),
        0.1s width cubic-bezier(0.19, 1, 0.22, 1);
}

browser-tab:not([dragging]) {
    transition: var(--base-transition), 0.3s transform cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform;
}

browser-tab::after,
browser-tab::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 1px;
    background-image: linear-gradient(0deg,
            transparent var(--height),
            var(--color) var(--height),
            var(--color) calc(100% - var(--height)),
            transparent calc(100% - var(--height)));
    top: 0;
    z-index: 1;
    transition: 0.4s opacity cubic-bezier(0.19, 1, 0.22, 1);
    --color: rgba(128, 128, 128, 0.25);
    --height: 20%;
}

browser-tab::after {
    right: 0;
}

browser-tab[selected]::after,
browser-tab[precedes-selected]::after,
browser-tab:hover::after,
browser-tab[precedes-hover]::after,
browser-tab[selected]::before,
browser-tab[selected]+browser-tab::before,
browser-tab:hover::before,
browser-tab:hover+browser-tab::before,
browser-tab[closing]::before,
browser-tab[closing]::after {
    opacity: 0;
}

browser-tab[dragging] {
    z-index: 100;
    transform: translate(var(--tab-drag-x, 0px), var(--tab-drag-y, 0px));
}

browser-tab[dragging][dragging-shadow] .browser-tab-background {
    box-shadow: 0px 0px 4px 0px rgba(128, 128, 128, 0.75);
}

browser-tab[dragging][dragging-feedback] {
    transition: var(--base-transition), 1s box-shadow cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
}

browser-tab[dragging][dragging-feedback="left"] {
    box-shadow: -4px 0px 4px 0px rgba(128, 128, 128, 0.5);
}

browser-tab[pinned] {
    --tab-max-width: 36px !important;
    --tab-min-width: 36px !important;
    max-width: 36px;
    min-width: 36px;
}

@media (prefers-contrast) {

    browser-tab[selected] .browser-tab-background,
    browser-tab:not([selected]):hover .browser-tab-background {
        border: 1px solid var(--browser-high-contrast-color);
        width: calc(100% - 1px * 2);
    }

    browser-tab::after,
    browser-tab::before,
    browser-tab:last-of-type:not(:hover):not([selected])::after {
        --height: 0%;
        --color: var(--browser-high-contrast-color);
        opacity: 1;
        transition-duration: 0s;
    }
}

@media not (prefers-contrast) {
    browser-tab::before {
        display: none;
    }
}

browser-tab .browser-tab-icons {
    display: flex;
}

browser-tab::part(customizable) {
    width: calc(100% - var(--tab-padding-start) - var(--tab-padding-end));
    min-width: 0px;

    gap: 2px;
    align-items: center;

    overflow: inherit;
    padding: 0;

    --tab-padding-start: calc(var(--browser-ui-density) * 1.25);
    --tab-padding-end: calc(var(--browser-ui-density) * 0.75);

    --button-scale-factor: 0.5;
    --button-icon-size: 14px;
}

:host(browser-tab) .customizable-container> :first-child {
    margin-inline-start: var(--tab-padding-start);
}

:host(browser-tab) .customizable-container> :last-child {
    margin-inline-end: var(--tab-padding-end);
}