/* Copyright 2025 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #scheme=relative
 * #css_wrapper_metadata_end */

:host {
    --favicon-size: 16px;

    flex-grow: 1;
    flex-basis: 0;
    max-width: 233px;
    min-width: 0;
}

.tab {
    color: var(--color-tab-foreground-inactive-frame-active);
    background-color: var(--color-tab-background-inactive-frame-active);
    border-radius: 12px 12px 0 0;
    height: 34px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    position: relative;
    transition: transform 300ms ease;
}

:host([inactive-frame]) .tab {
    color: var(--color-tab-foreground-inactive-frame-inactive);
    background-color: var(--color-tab-background-inactive-frame-inactive);
}

:host(:not([drag-in-progress]):not([active])) .tab:hover {
    background-color: var(--color-tab-background-highlighted);
    transition: background-color 100ms ease-in-out;
}

:host(:not([drag-in-progress]):not([active])) .tab:not(:hover) {
    transition: background-color 300ms ease-in-out;
}

:host([active]) .tab {
    color: var(--color-tab-foreground-active-frame-active);
    background-color: var(--color-tab-background-active-frame-active);
}

:host([inactive-frame][active]) .tab {
    color: var(--color-tab-foreground-active-frame-inactive);
    background-color: var(--color-tab-background-active-frame-inactive);
}

#favicon {
    height: var(--favicon-size);
    width: var(--favicon-size);
    background-size: contain;
    background-image: var(--favicon-url);
}

.close {
    border:none;
    --cr-icon-button-icon-size: 14px;
    --cr-icon-button-size: 16px;
    --cr-icon-button-margin-end: 0px;
}

cr-icon {
    --iron-icon-width: 16px;
    --iron-icon-height: 16px;
}

#title {
    flex: 1 1 0%;
    text-align: left;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
}

#bottomCorners {
    position: absolute;
    width: calc(100% + 24px);
    height: 12px;
    left: -12px;
    bottom: 0;
}

.corner {
    width: 12px;
    height: 12px;
    position: absolute;
    bottom: 0;
}

#leftCorner {
    left: 0;
    background-image: radial-gradient(circle at 0 0, transparent 0,
        transparent 12px, var(--color-tab-background-active-frame-active) 13px);
}

:host([inactive-frame]) #leftCorner {
    background-image: radial-gradient(circle at 0 0, transparent 0,
        transparent 12px, var(--color-tab-background-active-frame-inactive) 13px);
}

#rightCorner {
    right: 0;
    background-image: radial-gradient(circle at 100% 0, transparent 0,
        transparent 12px, var(--color-tab-background-active-frame-active) 13px);
}

:host([inactive-frame]) #rightCorner {
    background-image: radial-gradient(circle at 100% 0, transparent 0,
        transparent 12px, var(--color-tab-background-active-frame-inactive) 13px);
}