.tabbar {
    --color-tab-fill: rgb(var(--color-secondary-200-rgb));
    --color-tab-stoke: rgb(var(--color-secondary-550-rgb));
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
}

    .tabbar .bottom-line {
        width: 100%;
        height: 7px;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
        border-top: 1px solid var(--color-tab-stoke);
    }



    .tabbar .tabs {
        display: flex;
        flex-direction: row;
        gap: var(--size-spacing-4);
        margin-left: var(--size-spacing-16);
        z-index: 2;
        height: 33px;
        position: absolute;
        left: 0;
        top: 0;
        
    }

    .tabbar .tab {
        display: flex;
        flex-direction: row;
        background-color: var(--color-tab-fill);
        padding: var(--size-spacing-6) var(--size-spacing-8);
        border-radius: var(--size-radius-base) var(--size-radius-base) 0 0;
        height: 32px;
        width: fit-content;
        box-sizing: border-box;
        border: 1px solid var(--color-tab-fill);
        border-bottom: none;
        user-select: none;
        cursor: pointer;
    }

        .tabbar .tab p {
            color: rgb(var(--color-neutral-300-rgb));
        }

        .tabbar .tab.pressed {
            border: 1px solid var(--color-tab-stoke);
            height: 33px;
            border-bottom: none;
            background: linear-gradient( to bottom, rgb(var(--color-secondary-300-rgb)) 0%, rgb(var(--color-secondary-200-rgb)) 100% );
        }

            .tabbar .tab.pressed p {
                color: rgb(var(--color-neutral-900-rgb));
            }

    .tabbar .tabarea{
        display: flex;
        flex-direction: column;
    }

    .tabbar .tabarea .footer{
        height: 2px;
    }