@import "overlayscrollbars/styles/overlayscrollbars.css";
@import "vars.css";

* {
    box-sizing: border-box;
    transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
    transition-duration: 240ms;
    transition-property: background-color;
}

*::before,
*::after {
    transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
    transition-duration: 240ms;
}

body {
    max-width: none;
    max-height: none;
    overflow: hidden;
    color: var(--t42-body-color);
    background-color: var(--t42-background);
}

input {
    font-family: var(--io-font-family);
}

#t42-group-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-width: 0;
    overflow: hidden;
    background-color: transparent;
    /* DONT TOUCH THIS */
}

#t42-frames-container {
    position: relative;
    display: flex;
    flex-grow: 1;
    height: 100%;
    background-color: transparent;
}

.t42-caption-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
}

.t42-react-caption-bar {
    display: flex;
    flex-grow: 1;
    height: 100%;
}

.t42-caption {
    align-items: center;
    overflow: hidden;
    font-size: var(--io-font-size);
    line-height: var(--t42-line-height);
    white-space: nowrap;
    text-align: left;
    user-select: none;
    transition-property: color;
}

.t42-caption-editor {
    display: inline-block;
    min-width: var(--t42-caption-editor-min-width);
    height: var(--t42-caption-editor-height);
    margin: var(--t42-caption-editor-margin);
    padding: var(--t42-caption-editor-padding);
    border: var(--t42-caption-editor-border);
    border-radius: var(--t42-caption-editor-border-radius);
    overflow-x: hidden;
    color: var(--t42-caption-editor-color);
    font-size: var(--t42-caption-editor-font-size);
    white-space: nowrap;
    outline: 0;
}

.t42-caption-editor.t42-group-caption-bar-element,
.t42-caption-editor.t42-frame-caption-bar-element {
    margin: var(--t42-title-margin);
    outline: 0;
    --webkit-app-region: no-drag;
}

.t42-title {
    margin: var(--t42-title-margin);
    color: var(--t42-title-color);
    line-height: var(--t42-line-height);
}

.t42-move-area {
    display: flex;
    flex-grow: 1;
    align-items: center;
    height: 100%;
    min-width: var(--t42-move-area-min-width);
    -webkit-app-region: drag;
}

.t42-buttons-container {
    display: flex;
    flex-direction: row;
}

.t42-external-buttons-container {
    display: flex;
}

.t42-tab-bar-header-frame .t42-buttons-container {
    padding: var(--t42-tab-buttons-container-padding);
}

.t42-html-buttons-container {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    display: flex;
    background-color: var(--t42-html-buttons-bar-background);
    -webkit-app-region: no-drag;
    z-index: 10;
}

.t42-html-buttons-container ul:first-of-type {
    padding-left: var(--spacing-4);
}

.t42-html-buttons-bar-element {
    background-color: var(--t42-html-buttons-bar-background);
}

.t42-buttons {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none;
}

.t42-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.t42-standard-button {
    position: relative;
}

.t42-custom-button {
    position: relative;
    width: var(--t42-custom-button-size);
    height: var(--t42-custom-button-size);
    background-size: cover;
}

.t42-standard-button::before,
.t42-tab-channel-selector-content::before,
.t42-frame-channel-selector-content::before,
.t42-tab-close-button-content::before {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--spacing-16);
    font-family: "io-icons";
    transition-property: color;
    content: "";
}

.t42-standard-button-frame {
    position: relative;
}

.t42-standard-button-image {
    fill: var(--t42-standard-button-color);
}

.t42-caption-bar-button-lock,
.t42-caption-bar-button-unlock,
.t42-caption-bar-button-feedback,
.t42-caption-bar-button-clone,
.t42-caption-bar-button-sticky,
.t42-caption-bar-button-extract,
.t42-caption-bar-button-overflow,
.t42-caption-bar-button-collapse,
.t42-caption-bar-button-expand,
.t42-caption-bar-button-frame-downloads,
.t42-caption-bar-button-frame-minimize,
.t42-caption-bar-button-frame-maximize,
.t42-caption-bar-button-frame-restore,
.t42-caption-bar-button-frame-close {
    margin: var(--t42-tab-bar-button-margin);
    border-radius: var(--t42-tab-bar-button-radius);
}

.t42-caption-bar-button-lock .t42-standard-button::before,
.t42-caption-bar-button-unlock .t42-standard-button::before,
.t42-caption-bar-button-feedback .t42-standard-button::before,
.t42-caption-bar-button-clone .t42-standard-button::before,
.t42-caption-bar-button-frame-downloads .t42-standard-button::before,
.t42-caption-bar-button-frame-minimize .t42-standard-button::before,
.t42-caption-bar-button-frame-maximize .t42-standard-button::before,
.t42-caption-bar-button-frame-restore .t42-standard-button::before,
.t42-caption-bar-button-frame-close .t42-standard-button::before {
    font-size: var(--spacing-14);
}

.t42-caption-bar-button:hover .t42-standard-button-close::before {
    color: var(--t42-caption-bar-button-close-hover-text);
}

.t42-standard-button-collapse::before {
    content: "\e918";
}

.t42-standard-button-expand::before {
    content: "\e90e";
}

.t42-standard-button-downloads {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.t42-standard-button-downloads::before {
    content: "\e980";
}

.t42-standard-button-downloads::after {
    content: "";
    margin-left: auto;
    height: var(--t42-progress-bar-height);
    width: var(--t42-progress-bar-width);
    border-radius: var(--t42-progress-bar-border-radius);
    transform: translateY(var(--t42-progress-bar-top-offset));
    background-color: var(--t42-progress-bar-background-color);
    background-image: linear-gradient(to right,
            var(--t42-progress-bar-current-color),
            var(--t42-progress-bar-current-color));
    background-size: calc(var(--progress) * 1%) 100%;
    background-repeat: no-repeat;
    background-position: left top;
    transition: background-size var(--t42-progress-bar-animation-duration) ease;
}

.t42-standard-button-downloads.t42-standard-button-downloads-download-not-started::after {
    visibility: hidden;
}

.t42-standard-button-downloads-download-paused {
    --t42-progress-bar-current-color: var(--t42-progress-bar-paused-color);
}

.t42-standard-button-downloads-download-in-progress {
    --t42-progress-bar-current-color: var(--t42-progress-bar-progress-color);
}

.t42-standard-button-downloads-download-ready {
    --t42-progress-bar-current-color: var(--t42-progress-bar-ready-color);
}

.t42-standard-button-minimize::before {
    content: "\e904";
}

.t42-standard-button-frame-minimize::before {
    content: "\e965";
}

.t42-standard-button-maximize::before {
    content: "\e906";
}

.t42-standard-button-frame-maximize::before {
    content: "\e92a";
}

.t42-standard-button-close::before {
    content: "\e908";
}

.t42-tab-close-button-content::before {
    content: "\e916";
}

.t42-tab-close-button-content::before {
    width: var(--t42-tab-bar-tab-close-button-size);
    height: var(--t42-tab-bar-tab-close-button-size);
    font-size: var(--t42-tab-bar-tab-close-button-size);
}

.t42-standard-button-restore::before {
    content: "\e912";
}

.t42-standard-button-frame-restore::before {
    content: "\e928";
}

.t42-standard-button-extract::before {
    content: "\e924";
}

.t42-standard-button-lock::before {
    content: "\e90f";
}

.t42-standard-button-unlock::before {
    content: "\e901";
}

.t42-standard-button-feedback::before {
    content: "\e91c";
}

.t42-standard-button-clone::before {
    content: "\e91f";
}

.t42-standard-button-overflow::before {
    content: "\e91d";
}

.t42-standard-button-sticky::before {
    display: block;
    width: var(--spacing-14);
    height: var(--spacing-14);
    line-height: var(--spacing-14);
    content: var(--sticky-icon-off);
}

.t42-caption-bar-button:hover .t42-standard-button-sticky::before {
    content: var(--sticky-icon-off-hover);
}

.t42-caption-bar-button.active .t42-standard-button-sticky::before {
    width: var(--spacing-16);
    height: var(--spacing-16);
    line-height: var(--spacing-16);
    content: var(--sticky-icon-on);
}

.t42-caption-bar-button.active:hover .t42-standard-button-sticky::before {
    content: var(--sticky-icon-on-hover);
}

.t42-tab-channel-selector-content::before,
.t42-frame-channel-selector-content::before {
    font-size: var(--spacing-14);
    content: "\e902";
}

.t42-caption-bar-container {
    position: relative;
    display: flex;
}

.t42-caption-bar-container::after {
    position: absolute;
    z-index: 1;
    display: block;
    bottom: 0;
    width: 100%;
    background-color: var(--t42-caption-separator-color);
    content: "";
}

.t42-group-caption-bar-container::after {
    height: var(--t42-group-caption-separator-size);
}

.t42-frame-caption-bar-container::after {
    height: var(--t42-frame-caption-separator-size);
}

.t42-group-caption-bar {
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: var(--t42-group-caption-height);
}

.t42-group-caption-bar-element {
    background-color: var(--t42-group-caption-background);
}

.t42-group-caption-bar-element:focus-visible {
    outline: 0;
}


.t42-group-caption-bar-button {
    width: var(--t42-group-caption-button-width);
    height: var(--t42-group-caption-button-height);
}

.t42-frame {
    position: absolute;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    border-color: var(--t42-frame-border-color);
    border-style: solid;
    border-width: var(--t42-frame-border-size);
    overflow: hidden;
    background-color: transparent;
}

.t42-frame-html {
    /* Don't touch this! We don't have borders for 'html' mode frames */
    border-width: 0;
}

.t42-focused-frame {
    border-color: var(--t42-focused-frame-border-color);
}

.t42-frame-caption-bar {
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: var(--t42-frame-caption-bar-height);
}

.t42-frame-caption-bar-frame .t42-buttons-container {
    padding: var(--t42-flat-buttons-container-padding);
}

.t42-frame-caption-bar-element {
    background-color: var(--t42-frame-caption-background);
}

.t42-frame-channel-selector {
    align-self: center;
    justify-content: center;
    width: var(--t42-frame-channel-selector-size);
    height: var(--t42-frame-channel-selector-size);
    margin: var(--t42-frame-channel-selector-margin);
    border-radius: var(--t42-frame-channel-selector-border-radius);
}

.t42-frame-channel-selector-content {
    width: var(--t42-frame-channel-selector-size);
    height: var(--t42-frame-channel-selector-size);
}

.t42-frame-channel-selector-content .t42-standard-button-image {
    fill: var(--t42-channels-fill-color);
}

.t42-frame-caption-bar-button {
    width: var(--t42-frame-caption-height);
    height: var(--t42-frame-caption-height);
}

.t42-frame-window-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: transparent;
}

.t42-frame-window {
    display: flex;
    flex-grow: 1;
    background-color: var(--t42-background);
    -webkit-app-region: transparent;
}

.t42-frame-window-header {
    display: flex;
    flex-grow: 0;
    background-color: var(--t42-background);
}

.t42-frame-window-footer {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    background-color: var(--t42-background);
}

.t42-tab-bar {
    position: relative;
    display: flex;
    flex-direction: column;
}

.t42-tab-bar::after {
    position: absolute;
    bottom: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: var(--t42-tab-bar-separator-size);
    background-color: var(--t42-caption-separator-color);
    content: "";
}

.t42-tab-bar-header {
    --t42-caption-bar-button-height: var(--t42-tab-bar-height);

    position: relative;
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--t42-tab-bar-height);
    overflow: hidden;
}

.t42-tab-bar-element {
    background-color: var(--t42-tab-bar-background);
    transition-property: background-color;
}

.t42-tab-bar-button {
    width: var(--t42-tab-bar-button-size);
    height: var(--t42-tab-bar-button-size);
}

.t42-caption-bar-button {
    position: relative;
    color: var(--t42-standard-button-color);
    background-color: var(--t42-caption-bar-button-background);
}

.t42-caption-bar-button:hover {
    color: var(--t42-standard-button-hover-color);
    background-color: var(--t42-caption-bar-button-hover-background);
}

.t42-caption-bar-button-close:hover {
    background-color: var(--t42-caption-bar-button-close-hover-background);
}

.t42-caption-bar-button-maximize,
.t42-caption-bar-button-minimize,
.t42-caption-bar-button-downloads,
.t42-caption-bar-button-restore,
.t42-caption-bar-button-close {
    width: var(--t42-caption-bar-button-width);
    height: var(--t42-caption-bar-button-height);
}

.t42-caption-bar-button-frame-maximize,
.t42-caption-bar-button-frame-minimize,
.t42-caption-bar-button-frame-downloads,
.t42-caption-bar-button-frame-restore,
.t42-caption-bar-button-frame-close {
    --t42-caption-bar-button-close-hover-background: var(--t42-caption-bar-button-hover-background);
    --t42-caption-bar-button-close-hover-text: var(--text-states-active);
    width: var(--t42-tab-bar-button-size);
    height: var(--t42-tab-bar-button-size);
}

.t42-caption-bar-button-frame {
    position: relative;
}

.t42-tabs,
.t42-tabs-pinned:not(:empty) {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 1;
    align-items: center;
    padding: var(--t42-tab-bar-padding);
    overflow: hidden;
    list-style-type: none;
    -webkit-app-region: drag;
}

.t42-react-tab {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}

.t42-tab {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 1;
    align-items: center;
    width: 150px;
    min-width: var(--t42-tab-bar-tab-min-width);
    max-width: var(--t42-tab-bar-tab-width);
    height: var(--t42-tab-bar-tab-height);
    margin: var(--t42-tab-bar-tab-margin);
    padding: var(--t42-tab-bar-tab-padding);
    border-radius: var(--t42-tab-bar-tab-border-radius);
    background-color: var(--t42-tab-bar-tab-background);
    container-type: size;
    container-name: normal-tabs;
    -webkit-app-region: no-drag;
    /* transition-property: all;
    transition-duration: 260ms;
    transition-timing-function: ease-in-out; */
}

.t42-tab::before {
    position: absolute;
    left: calc(var(--spacing-2) * -1);
    z-index: 10;
    display: block;
    width: var(--t42-tab-bar-tab-separator-size);
    height: var(--t42-tab-bar-tab-separator-height);
    background-color: var(--t42-tab-bar-tab-separator-color);
    opacity: 1;
    transition: 0.3s;
    transition-property: opacity;
    content: "";
}

.t42-tab:first-of-type::before {
    content: none;
}

.t42-tab:hover {
    --t42-tab-bar-background: var(--t42-tab-bar-tab-background-hover);
    --t42-tab-bar-tab-text: var(--t42-caption-text-hover-color);
    background-color: var(--t42-tab-bar-tab-background-hover);
}

.t42-tab-channel-selector {
    justify-content: center;
    width: var(--t42-tab-bar-tab-channels-width);
    height: var(--t42-tab-bar-tab-channels-height);
    margin: var(--t42-tab-bar-tab-channels-margin);
    border-radius: var(--t42-tab-bar-tab-channels-border-radius);
    background-color: transparent;
    transition-property: width, marign;
}

.t42-tab-caption {
    flex-grow: 1;
    color: var(--t42-tab-bar-tab-text);
    mask-image: var(--t42-caption-text-fade-effect);
}

.t42-tab-caption-editor {
    min-width: unset;
    mask-image: none;
}

.t42-tab-caption-editor:focus-visible {
    outline: 0;
}

.t42-tab-close-button {
    margin: var(--t42-tab-bar-tab-close-button-margin);
    transition-property: margin, background-color;
}

.t42-tab-close-button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--t42-tab-bar-tab-close-button-content-width);
    height: var(--t42-tab-bar-tab-close-button-content-height);
    border-radius: var(--t42-tab-bar-tab-close-button-content-border-radius);
    background-color: var(--t42-tab-bar-tab-close-button-background);
    transition-duration: var(--t42-tab-bar-tab-close-button-transition-duration);
    transition-property: all;
}

.t42-tab-close-button-content svg {
    padding: var(--t42-tab-bar-tab-close-button-padding);
    transition-property: fill;
}

.t42-tab-close-button-content .t42-standard-button-image {
    fill: var(--t42-tab-bar-tab-text);
}

.t42-tab-close-button-content:hover {
    color: var(--t42-tab-bar-tab-text-hover);
    background-color: var(--t42-tab-bar-tab-close-button-bg-hover);
}

.t42-tab-close-button-content:hover::before {
    color: var(--t42-tab-bar-tab-text-hover);
}

.t42-tab-close-button-content:hover .t42-standard-button-image {
    fill: var(--t42-tab-bar-tab-text-hover);
}

.t42-selected-tab-element {
    background-color: var(--t42-tab-bar-selected-tab-background);
}

.t42-selected-tab:hover {
    --t42-tab-bar-background: var(--t42-tab-bar-selected-tab-background);
    --t42-tab-bar-tab-text: var(--t42-tab-bar-selected-tab-text);
    --t42-tab-bar-tab-background-hover: var(--t42-tab-bar-selected-tab-background);
}

.t42-selected-tab::before,
.t42-selected-tab+.t42-tab::before {
    opacity: var(--t42-tab-bar-tab-selected-separator-opacity);
}

.t42-selected-tab::before {
    background-color: var(--t42-tab-bar-tab-selected-separator-color);
}

.t42-selected-tab-caption {
    color: var(--t42-tab-bar-selected-tab-text);
    transition-property: width, flex-grow;
}

.t42-selected-tab-close-button-content .t42-standard-button-image {
    fill: var(--t42-tab-bar-selected-tab-text);
}

.t42-channel-selector-direction {
    width: auto;
    min-width: var(--t42-tab-bar-tab-channels-width);
    height: var(--t42-channel-selector-direction-height);
    gap: var(--t42-channel-selector-direction-gap);
}

.t42-channel-selector-direction .icon {
    gap: var(--t42-channel-selector-direction-gap);
    width: var(--t42-channel-selector-direction-width);
}

.t42-channel-selector-content-light,
.t42-channel-selector-content-light::before,
.t42-channel-selector-content-light i::before {
    color: var(--t42-frame-channel-icon-color-white);
}

.t42-channel-selector-content-dark,
.t42-channel-selector-content-dark::before,
.t42-channel-selector-content-dark i::before {
    color: var(--t42-frame-channel-icon-color-black);
}

@keyframes approaching-edge-animation {
    from {
        background-color: var(--t42-approaching-edge-start-color);
    }

    to {
        background-color: var(--t42-approaching-edge-end-color);
    }
}

.t42-approaching-edge {
    position: absolute;
    z-index: 100;
    display: block;
    background-color: var(--t42-approaching-edge-start-color);
    animation: approaching-edge-animation;
    animation-duration: var(--t42-approaching-edge-animation-duration);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.t42-horizontal-approaching-edge {
    height: var(--t42-approaching-edge-size);
}

.t42-vertical-approaching-edge {
    width: var(--t42-approaching-edge-size);
}

.t42-sizing-border-group {
    position: absolute;
    z-index: 100;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none;
    background-color: var(--t42-sizing-border-group-color);
    pointer-events: none;
}

.t42-vertical-sizing-border-group {
    flex-direction: column;
    cursor: ew-resize;
}

.t42-horizontal-sizing-border-group {
    flex-direction: row;
    cursor: ns-resize;
}

.t42-sizing-border-group:hover {
    background-color: var(--t42-hover-sizing-border-group-color);
    z-index: 150;
}

.t42-active-sizing-border-group {
    z-index: 200;
    background-color: var(--t42-active-sizing-border-group-color);
}

.t42-active-sizing-border-group:hover {
    background-color: var(--t42-active-sizing-border-group-color);
}

.t42-sizing-border {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    pointer-events: auto;
}

.t42-frame-sizing-border {
    flex-grow: 0;
}

.t42-cross-sizing-border {
    flex-grow: 1;
    cursor: ne-resize;
}

.t42-active-sizing-border {
    background-color: transparent;
}

.t42-skip-focus {
    /* We used non-standard rule to have non-empty style */
    -moz-user-focus: ignore;
}

@keyframes clipMe {

    0%,
    100% {
        clip: rect(0, 25vh, 2px, 0);
    }

    25% {
        clip: rect(0, 2px, 25vh, 0);
    }

    50% {
        clip: rect(calc(25vh - 2px), 25vh, 25vh, 0);
    }

    75% {
        clip: rect(0, 25vh, 25vh, calc(25vh - 2px));
    }
}

.loader-container {
    display: flex;
    flex-grow: 1;
}

.loader-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    background: var(--t42-background);
}

.loader-wrapper .loader {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background:
        radial-gradient(farthest-side, #999d9e 94%, rgba(0, 0, 0, 0)) center top / 4px 4px no-repeat,
        conic-gradient(rgba(0, 0, 0, 0) 15%, #999d9e);
    -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000000 0);
}

.loader-wrapper .loader-text {
    margin: 0 auto;
    padding: 0 0.833rem;
    overflow: hidden;
    color: var(--io-secondary-primary);
    text-align: center;
    text-overflow: ellipsis;
}

.loader.active {
    animation: s3 1.5s infinite linear;
}

@keyframes s3 {
    to {
        transform: rotate(1turn);
    }
}

@keyframes flash {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: var(--t42-tab-bar-tab-flashing-background);
    }

    100% {
        background-color: transparent;
    }
}

.t42-tab-flashing {
    animation: flash 500ms linear infinite;
}

.t42-tab-flashing .t42-tab-bar-element,
.t42-tab-flashing .t42-tab-caption {
    color: var(--t42-tab-bar-tab-flashing-color);
    background-color: transparent;
}

@container normal-tabs (max-width: 50px) {
    .t42-tab-channel-selector {
        --t42-tab-bar-tab-channels-margin: 0;
    }
}

@container normal-tabs (max-width: 40px) {
    .t42-tab-close-button {
        margin: auto;
    }
}

@container normal-tabs (max-width: 30px) {
    .t42-selected-tab-caption {
        flex-grow: 0;
        width: 0;
    }
}

.os-scrollbar-horizontal {
    z-index: 1001;
}

.t42-tabs-overflow .t42-tab {
    min-width: var(--t42-tab-bar-tab-overflowable-min-width);
}

.t42-tabs-overflow .t42-tabs {
    overflow: auto;
}

.t42-tabs-overflow[data-overlayscrollbars-viewport~="overflowXScroll"].t42-tabs {
    -webkit-app-region: no-drag;
}

.t42-tabs-overflow.t42-tabs-fade-right {
    -webkit-mask-image: linear-gradient(-90deg,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
            rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
            rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size));
}

.t42-tabs-overflow.t42-tabs-fade-left {
    -webkit-mask-image: linear-gradient(90deg,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
            rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
            rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size));
}

.t42-tabs-overflow.t42-tabs-fade-both {
    -webkit-mask-image: linear-gradient(90deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
            rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
            rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size),
            rgba(0, 0, 0, 1) calc(100% - var(--t42-tab-bar-fade-size)),
            rgba(0, 0, 0, 0.8) calc(100% - (var(--t42-tab-bar-fade-size) / 100 * 80)),
            rgba(0, 0, 0, 0.3) calc(100% - (var(--t42-tab-bar-fade-size) / 100 * 30)),
            rgba(0, 0, 0, 0) 100%);
}

.t42-page-popup {
    position: absolute;
    z-index: 999;
    margin-top: var(--t42-wg-tab-over-top-offset);
    -webkit-app-region: opaque;
}

.t42-external-page-popup {
    position: absolute;
    z-index: 999;
    background-color: transparent;
    height: fit-content;
}

.t42-external-page-popup .t42-tab-overflow-popup {
    --t42-wg-tab-over-max-height: none;
}

.t42-tab-overflow-popup {
    display: flex;
    flex-direction: column;
    min-width: var(--t42-wg-tab-over-min-width);
    max-width: var(--t42-wg-tab-over-max-width);
    max-height: var(--t42-wg-tab-over-max-height);
    padding: var(--t42-wg-tab-over-padding);
    border: var(--t42-wg-tab-over-border);
    border-radius: var(--t42-wg-tab-over-border-radius);
    overflow: auto;
    background-color: var(--t42-wg-tab-over-background);
    -webkit-app-region: opaque;
}

.renderer-mode-keycolor .t42-tab-overflow-popup {
    border-radius: 0px;
}

.t42-tab-overflow-popup li {
    display: flex;
    gap: var(--t42-wg-tab-over-item-gap);
    align-items: center;
    height: var(--t42-wg-tab-over-item-height);
    padding: var(--t42-wg-tab-over-item-padding);
    transition-duration: 80ms;
    transition-property: background-color;
}

.t42-tab-overflow-popup li span {
    flex-grow: 1;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: clip;
}

.t42-tab-overflow-popup li:not(.title):hover {
    color: var(--t42-wg-tab-over-item-color-hover);
    background-color: var(--t42-wg-tab-over-item-background-hover);
}

.t42-tab-overflow-popup hr {
    height: var(--t42-wg-tab-over-separator-size);
    margin: var(--t42-wg-tab-over-separator-space);
    border: 0;
    background-color: var(--t42-wg-tab-over-separator-color);
}

.t42-tab-overflow-popup .title {
    color: var(--t42-wg-tab-over-item-title-color);
    font-size: var(--t42-wg-tab-over-item-title-size);
    letter-spacing: var(--t42-wg-tab-over-item-title-spacing);
}

.t42-tabs-pinned {
    min-width: 0;
    flex-shrink: 0;
}

.t42-tabs-pinned .t42-tab {
    --t42-tab-bar-tab-margin: var(--t42-wg-pin-tab-margin);
    --t42-tab-bar-tab-height: var(--t42-wg-pin-tab-height);
    border-radius: var(--t42-wg-pin-tab-border-radius);
    width: var(--t42-wg-pin-tab-width);
}

.t42-tabs-pinned .t42-tab-caption {
    mask-image: none;
}

.t42-tabs-pinned .t42-tab {
    container-name: pinned;
}

@container pinned (min-width:1px) {
    .t42-tab-close-button {
        background-color: transparent;
    }
}

.t42-tabs-pinned .t42-tab-fade,
.t42-tabs-overflow .t42-tab-fade {
    overflow: hidden;
    width: 0;
    padding: 0;
    min-width: 0;
    margin: 0;
}

.t42-multi-channel-selector-content {
    width: var(--t42-tab-bar-tab-channels-width);
    height: var(--t42-tab-bar-tab-channels-height);
    border-radius: var(--t42-tab-bar-tab-channels-border-radius);
}

.t42-multi-channel-selector-2 {
    background-image: conic-gradient(var(--t42-multi-channel-selector-2-color-1) 0deg,
            var(--t42-multi-channel-selector-2-color-1) 180deg,
            var(--t42-multi-channel-selector-2-color-2) 180deg,
            var(--t42-multi-channel-selector-2-color-2) 0deg);
    mask-image: var(--t42-multi-channel-selector-2-mask);
}

.t42-multi-channel-selector-3 {
    background-image: conic-gradient(var(--t42-multi-channel-selector-3-color-1) 0deg,
            var(--t42-multi-channel-selector-3-color-1) 120deg,
            var(--t42-multi-channel-selector-3-color-2) 120deg,
            var(--t42-multi-channel-selector-3-color-2) 240deg,
            var(--t42-multi-channel-selector-3-color-3) 240deg,
            var(--t42-multi-channel-selector-3-color-3) 0deg);
    mask-image: var(--t42-multi-channel-selector-3-mask);
}

.t42-multi-channel-selector-4 {
    background-image: conic-gradient(var(--t42-multi-channel-selector-4-color-1) 0deg,
            var(--t42-multi-channel-selector-4-color-1) 90deg,
            var(--t42-multi-channel-selector-4-color-2) 90deg,
            var(--t42-multi-channel-selector-4-color-2) 180deg,
            var(--t42-multi-channel-selector-4-color-3) 180deg,
            var(--t42-multi-channel-selector-4-color-3) 270deg,
            var(--t42-multi-channel-selector-4-color-4) 270deg,
            var(--t42-multi-channel-selector-4-color-4) 0deg);
    mask-image: var(--t42-multi-channel-selector-4-mask);
}