@import '@alfalab/core-components-vars/src/index.css';
@import '../../vars.css';

.component {
    position: relative;
    display: inline-flex;
}

.fullWidthScroll {
    margin: var(--gap-0) var(--gap-16);
}

.container {
    overflow: hidden;

    /* focus-outline fix */
    margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
    padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);
}

.title {
    white-space: nowrap;
}

.desktop.desktop {
    &.transparentView.transparentView {
        .title.title {
            margin-left: var(--secondary-tablist-transparent-gaps);
        }
    }
}

/* sizes */

.xxs {
    & .title + .title,
    & .skeleton + .skeleton {
        margin-left: var(--secondary-tablist-xxs-gaps);
    }
}

.xs {
    & .title + .title,
    & .skeleton + .skeleton {
        margin-left: var(--secondary-tablist-xs-gaps);
    }
}

.s {
    & .title + .title,
    & .skeleton + .skeleton {
        margin-left: var(--secondary-tablist-s-gaps);
    }
}

.m {
    & .title + .title,
    & .skeleton + .skeleton {
        margin-left: var(--secondary-tablist-m-gaps);
    }
}

.l {
    & .title + .title,
    & .skeleton + .skeleton {
        margin-left: var(--secondary-tablist-l-gaps);
    }
}

.xl {
    & .title + .title,
    & .skeleton + .skeleton {
        margin-left: var(--secondary-tablist-xl-gaps);
    }
}