:root {
    --primary-tablist-bottom-border-color: var(--color-light-neutral-translucent-500);
}

.component {
    position: relative;
    display: flex;
    flex-shrink: 0;
}

.primary {
    align-items: flex-start;
    justify-content: flex-end;
}

.primary:after {
        content: '';
        display: block;
        position: absolute;
        bottom: 1px;
        height: 1px;
        width: 100%;
        background-color: var(--primary-tablist-bottom-border-color);
    }

.primary {

    .button:first-child {
        padding-left: var(--gap-8);
        margin-right: var(--gap-8);
    }
}

.primary.xl .button:first-child {
        margin-right: var(--gap-4);
    }

.secondary {
    align-items: center;
    justify-content: center;
}

.secondary:before {
        content: '';
        display: block;
        position: absolute;
        top: var(--gap-0);
        left: var(--gap-0);
        width: 1px;
        background-color: transparent;
        transition: background-color 0.3s ease;
        bottom: var(--gap-0);
    }

.secondary.xs {
        width: 76px;

        .button:first-child {
            margin-right: var(--gap-4);
        }
    }

.borderVisible:before {
    background-color: var(--color-light-neutral-translucent-300);
}