@use '~flux/components/css/mixin';

.tab {
    position: relative;
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    gap: 18px;
}

.baseTabBar {
    position: relative;
    z-index: 0;
}

.tabBarDefault {
    composes: baseTabBar;

    --tab-padding: 12px;

    box-shadow: inset 0 -2px var(--surface-stroke);
}

.tabBarPills {
    composes: baseTabBar;

    padding: 3px;
    border-radius: var(--radius);
}

.tabBarArrow {
    position: absolute;
    display: flex;
    top: 2px;
    height: calc(100% - 6px);
    width: 30px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    color: var(--foreground);
    cursor: pointer;
    outline: 0;
    transition: background var(--transition-default);
    z-index: 1;

    @include mixin.hover {
        background: var(--surface-stroke);
    }
}

.tabBarArrowStart {
    composes: tabBarArrow;

    left: 3px;
}

.tabBarArrowEnd {
    composes: tabBarArrow;

    right: 3px;
}

.baseTabBarTabs {
    position: relative;
    display: flex;
    align-items: center;
    overflow: auto;
    scrollbar-width: none;
}

.tabBarTabsDefault {
    composes: baseTabBarTabs;

    --mask-start: 0%;
    --mask-end: 100%;
    --mask: linear-gradient(to right, transparent, black var(--mask-start), black, black var(--mask-end), transparent);

    margin-left: -3px;
    margin-right: -3px;
    padding-left: 3px;
    padding-right: 3px;
    gap: 27px;

    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);

    &.isStartMasked {
        --mask-start: 60px;
    }

    &.isEndMasked {
        --mask-end: calc(100% - 60px);
    }
}

.tabBarTabsPills {
    composes: baseTabBarTabs;

    gap: 0;
}

.baseTabBarItem {
    // A tab owns its text, so a badge or an icon in a slot lands on a known 24px
    // line box instead of one derived from whatever the tab bar sits in.
    @include mixin.text(default);

    display: inline-flex;
    align-items: center;
    background: unset;
    border: 0;
    color: var(--foreground);
    contain: layout;
    cursor: pointer;
    font-weight: 500;
    outline: 0;
    white-space: nowrap;

    &::before {
        position: absolute;
        inset: 0;
        content: '';
        pointer-events: none;
        transition: var(--transition-default) mixin.focus-ring-transition-properties();
    }

    @include mixin.focus-ring-pseudo(before, -2px);

    // Inset offset zodat de focus-ring niet wordt weggeclipt
    // door de overflow: auto op .tabBarTabs.
    &::before {
        outline-offset: -2px;
    }

    &:disabled,
    &[aria-disabled=true] {
        box-shadow: none;
        opacity: .5;
        pointer-events: none;
    }
}

.tabBarItemDefault {
    composes: baseTabBarItem;

    padding: var(--tab-padding) 0;
    gap: 9px;
    border-bottom: 2px solid transparent;
    transition: var(--transition-default);
    transition-property: border-color, color;

    &::before {
        border-radius: var(--radius);
    }

    @include mixin.hover {
        border-color: var(--foreground);
    }
}

.tabBarItemDefaultActive {
    composes: tabBarItemDefault;

    color: var(--foreground-prominent);
}

.tabBarItemPills {
    composes: baseTabBarItem;

    position: relative;
    height: 36px;
    padding: 0 12px;
    gap: 6px;
    border-radius: calc(var(--radius) - 2px);
    transition: color 300ms var(--swift-out);
    z-index: 1;

    &::before {
        border-radius: calc(var(--radius) - 2px);
    }

    @include mixin.hover {
        color: var(--foreground-prominent);
    }
}

.tabBarItemPillsActive {
    composes: tabBarItemPills;

    color: var(--foreground-prominent);
    cursor: default;
}

.baseTabBarHighlight {
    position: absolute;
    pointer-events: none;
    transition: 300ms var(--swift-out);
    transition-property: left, width;
}

.tabBarHighlightDefault {
    composes: baseTabBarHighlight;

    bottom: 0;
    height: 2px;
    background: var(--primary-600);
    z-index: 1;
}

.tabBarHighlightPills {
    composes: baseTabBarHighlight;

    top: 0;
    bottom: 0;
    background: var(--gray-100);
    border-radius: calc(var(--radius) - 2px);
    z-index: 0;
}

.tabs {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    overflow: visible;
}

.tabsBar {
    margin-bottom: 18px;
}

.basePaneStructure > .tabBarDefault,
.basePaneStructure > .tabs > .tabBarDefault,
.basePaneStructure > .form > .tabBarDefault,
.basePaneStructure > .form > .tabs > .tabBarDefault {
    --tab-padding: 18px;

    padding-left: 18px;
    padding-right: 18px;
    background: var(--gray-50);

    &:first-child {
        border-radius: var(--radius) var(--radius) 0 0;
    }

    &:not(:first-child) {
        border-top: 1px solid var(--surface-stroke);
    }
}

.basePaneStructure > .paneHeader + .tabBarDefault,
.basePaneStructure > .paneHeader + .tabs > .tabBarDefault,
.basePaneStructure > .form > .paneHeader + .tabBarDefault,
.basePaneStructure > .form > .paneHeader + .tabs > .tabBarDefault {
    &:not(:first-child) {
        border-top: 0;
    }
}

.paneHeader:has(+ .tabBarDefault),
.paneHeader:has(+ .tabs > .tabBarDefault) {
    background: var(--gray-50);
}

.basePaneStructure > .tabBarPills,
.basePaneStructure > .tabs > .tabBarPills,
.basePaneStructure > .form > .tabBarPills,
.basePaneStructure > .form > .tabs > .tabBarPills {
    padding-left: 6px;
    padding-right: 6px;

    &:first-child {
        padding-top: 6px;
    }
}

.basePaneStructure > .tabs > .tabsBar {
    margin-bottom: 0;
}