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

tooltip[is=browser-tabs-tooltip] {
    .tooltip-label {
        display: none;
    }

    .tabs-tooltip-container {
        display: flex;
        flex-direction: column;

        max-width: var(--tabs-tooltip-width);
        max-height: calc(150px + var(--tabs-tooltip-height));
        border-radius: 8px;

        overflow: clip;

        box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108);
        outline: 1px solid var(--arrowpanel-border-color);

        padding-block-start: var(--tabs-tooltip-height);

        transition: 0.3s background-color;

        .tabs-tooltip-preview-container {
            display: flex;
            flex-direction: column;

            background-color: var(--tabs-tooltip-background, var(--toolbar-bgcolor));

            width: calc(100% - 4px * 2);
            max-height: var(--tabs-tooltip-preview-height);

            --tabs-tooltip-preview-padding: 4px;

            overflow: clip;

            padding-inline: var(--tabs-tooltip-preview-padding);

            transition: 0.1s max-height cubic-bezier(0.77, 0, 0.18, 1), 0.3s background-color;

            .tabs-tooltip-preview-canvas {
                border-radius: 6px;
                border: 1px solid rgba(0, 0, 0, 0.05);
                margin-block-end: var(--tabs-tooltip-preview-padding);
            }
        }
    }
}