:root {
    --mud-palette-surface: var(--surface) !important;
    --mud-palette-background: var(--background) !important;
    --mud-palette-drawer-background: var(--background) !important;
    --mud-palette-appbar-background: var(--background) !important;
    --mud-palette-primary: var(--accent) !important;
}

.mud-tabs {
    box-shadow: unset !important;
    color: var(--muted) !important;
    font-size: var(--text-sm) !important;
}

    .mud-tabs .mud-tabs-tabbar, .mud-tabs.mud-tabs-rounded .mud-tabs-tabbar {
        border-radius: calc(var(--radius-2xl) + .25rem) !important;
        background-color: var(--default);
        border: unset;
    }

.mud-tab-slider {
    border-radius: var(--radius-3xl);
    background-color: var(--segment) !important;
    width: 100%;
    z-index: -1;
    transition-timing-function: var(--ease-fluid-out) !important;
}

    .mud-tab-slider.mud-tab-slider-horizontal {
        height: 100%;
    }

    .mud-tab-slider.mud-tab-slider-vertical {
        width: 100%;
    }

.mud-tab.mud-tab-active {
    color: var(--segment-foreground) !important;
}

.mud-tabs-tabbar-content {
    padding: calc(var(--spacing) * 1);
}

.mud-tab {
    padding: 0px;
    padding-inline: calc(var(--spacing) * 4);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    min-height: unset;
    min-width: fit-content !important;
    height: calc(var(--spacing) * 8);
    color: var(--muted);
    text-transform: unset;
}

    .mud-tab svg.mud-icon-root {
        font-size: var(--text-sm) !important;
    }

    .mud-tabs-tabbar .mud-tabs-tabbar-inner {
        min-height: unset;
    }

@media(hover: hover)and (pointer: fine) {
    .mud-tab:hover {
        cursor: pointer;
        background-color: unset !important;
        opacity: .7;
    }
}

@media(hover: hover)and (pointer: fine) {
    .mud-tab.mud-tab-active:hover {
        background-color: unset !important;
        opacity: unset;
    }
}

.mud-tabs-tabbar.mud-paper-outlined{
    border: unset;
}

.mud-tabs.mud-paper-outlined {
    border: unset;
}

div.mud-tabs-header div.mud-tooltip-root button.mud-icon-button, div.mud-tabs-scroll-button button.mud-icon-button {
    padding-top: unset;
    padding-bottom: unset;
}

div.mud-tabs-header div.mud-tooltip-root, div.mud-tabs-scroll-button {
    display: flex;
}

/* blocking click and drag&drop */
.mud-drop-item-preview-start {
    display: none;
}

/* horizontal dropitem */
.mud-dropitem-placeholder:has(:not(.mud-tabs-vertical)) {
    padding-top: unset !important;
    padding-bottom: unset !important;
}

/* vertical dropitem */
.mud-dropitem-placeholder:has(.mud-tabs-vertical) {
    padding-left: unset !important;
    padding-right: unset !important;
}

/* focus event hightlight */
.mud-tab:focus-visible{
    --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
    border-radius: var(--radius-3xl);
}

/* horizontal seperator */
.mud-drop-item:nth-child(n+2 of .mud-drop-item:not(.mud-drop-item-preview-start)):before, .mud-tooltip-root:not(:first-child):before {
    content: "";
    transition: opacity .15s var(--ease-smooth);
    border-radius: 4px;
    position: absolute;
    width: 1px;
    height: 50%;
    top: 25%;
    left: 0;
}

/* vertical seperator */
.mud-tabs-vertical .mud-drop-item:nth-child(n+2 of .mud-drop-item:not(.mud-drop-item-preview-start)):before, .mud-tabs-vertical .mud-tooltip-root:not(:first-child):before {
    width: 90%;
    height: 1px;
    top: 0;
    left: 5%;
}

/* for seperator position */
.mud-drop-item, .mud-tooltip-root {
    position: relative;
}

/* seperator color */
.mud-drop-item:not(:first-child):before, .mud-tooltip-root:not(:first-child):before {
    background-color: var(--muted)
}

@supports (color: color-mix(in lab,red,red)) {
    .mud-drop-item:not(:first-child):before, .mud-tooltip-root:not(:first-child):before {
        background-color: color-mix(in oklab,var(--muted)25%,transparent)
    }
}

/* remove seperator whene element is selected */
.mud-tooltip-root:has(> .mud-tab-active) + .mud-tooltip-root::before, .mud-tooltip-root:has(> .mud-tab-active)::before {
    opacity: 0
}

/* remove seperator whene element is selected drag&drop*/
.mud-drop-item:has(.mud-tooltip-root > .mud-tab-active) + .mud-drop-item::before, .mud-drop-item:has(.mud-tooltip-root > .mud-tab-active)::before {
    opacity: 0
}