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

browser-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: clip;
    transition: 0.2s opacity cubic-bezier(0.19, 1, 0.22, 1), 0.3s width cubic-bezier(0.19, 1, 0.22, 1);
    will-change: width, opacity;
}

browser-tab-icon:not([progress]):not([pendingicon])[hideicon] .browser-tab-image {
    visibility: hidden;
}

browser-tab-icon .browser-tab-image,
browser-tab-icon .browser-tab-spinner {
    display: flex;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    -moz-context-properties: fill;
    fill: currentColor;
    user-select: none;
    pointer-events: none;
}

browser-tab-icon[progress] .browser-tab-image,
browser-tab-icon:not([progress]) .browser-tab-spinner {
    visibility: hidden;
    position: absolute;
}

browser-tab-icon[customizablearg-progress="false"] .browser-tab-spinner {
    visibility: hidden !important;
}

browser-tab-icon[customizablearg-progress="false"] .browser-tab-image {
    visibility: visible !important;
}

browser-tab-icon .browser-tab-spinner {
    mask-size: cover;
    background-color: currentColor;
}

/* Busy */
browser-tab-icon[progress="1"] .browser-tab-spinner {
    mask-image: url(chrome://dot/skin/icons/tab-loading-busy.svg);
}

/* In Transit */
browser-tab-icon[progress="2"] .browser-tab-spinner {
    mask-image: url(chrome://dot/skin/icons/tab-loading-transit.svg);
    background-color: var(--browser-accent-color);
}

@media (prefers-reduced-motion: reduce) {
    browser-tab-icon[progress="1"] .browser-tab-spinner {
        mask-image: url(chrome://dot/skin/icons/hourglass.svg);
    }

    browser-tab-icon[progress="2"] .browser-tab-spinner {
        mask-image: url(chrome://dot/skin/icons/hourglass-filled.svg);
    }
}

:host(browser-tab) browser-tab-icon {
    --tab-icon-padding: 4px;
    --width: calc(16px + var(--tab-icon-padding));

    width: var(--width);
    opacity: 1;

    justify-content: flex-start;

    margin-inline-start: calc(var(--tab-padding-start) - var(--tab-icon-padding)) !important;
    padding-inline-start: var(--tab-icon-padding);
}

/* If the tab needs the icon hidden, we can only hide it if the tab isn't doing anything or is loading the favicon */
:host(browser-tab[hideicon]:not([progress]):not([pendingicon])) browser-tab-icon {
    --width: 0px;
}