/**
 * Tabs
 */

.tabs {
    position: relative;
    display: block;

    .tabs-header {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
        border-color: var(
            --tabs--header--border-color,
            var(
                    --tabs--header--border-top-color,
                    var(--tabs--border-top-color, var(--border-top-color))
                )
                var(
                    --tabs--header--border-right-color,
                    var(--tabs--border-right-color, var(--border-right-color))
                )
                var(
                    --tabs--header--border-bottom-color,
                    var(--tabs--border-bottom-color, var(--border-bottom-color))
                )
                var(
                    --tabs--header--border-left-color,
                    var(--tabs--border-left-color, var(--border-left-color))
                )
        );
        border-style: var(
            --tabs--header--border-style,
            var(
                    --tabs--header--border-top-style,
                    var(--tabs--border-top-style, var(--border-top-style))
                )
                var(
                    --tabs--header--border-right-style,
                    var(--tabs--border-right-style, var(--border-right-style))
                )
                var(
                    --tabs--header--border-bottom-style,
                    var(--tabs--border-bottom-style, var(--border-bottom-style))
                )
                var(
                    --tabs--header--border-left-style,
                    var(--tabs--border-left-style, var(--border-left-style))
                )
        );
        border-width: var(
            --tabs--header--border-width,
            var(
                    --tabs--header--border-top-width,
                    var(--tabs--border-top-width, var(--border-top-width))
                )
                var(
                    --tabs--header--border-right-width,
                    var(--tabs--border-right-width, var(--border-right-width))
                )
                var(
                    --tabs--header--border-bottom-width,
                    var(--tabs--border-bottom-width, var(--border-bottom-width))
                )
                var(
                    --tabs--header--border-left-width,
                    var(--tabs--border-left-width, var(--border-left-width))
                )
        );
        font-size: var(--tabs--header--font-size, var(--tabs--font-size, var(--font-size)));
        border-radius: var(
            --tabs--header--border-radius,
            var(
                --tabs--border-radius,
                var(
                        --tabs--header--border-top-left-radius,
                        var(--tabs--border-top-left-radius, var(--border-top-left-radius))
                    )
                    var(
                        --tabs--header--border-top-right-radius,
                        var(--tabs--border-top-right-radius, var(--border-top-right-radius))
                    )
                    var(
                        --tabs--header--border-bottom-right-radius,
                        var(--tabs--border-bottom-right-radius, var(--border-bottom-right-radius))
                    )
                    var(
                        --tabs--header--border-bottom-left-radius,
                        var(--tabs--border-bottom-left-radius, var(--border-bottom-left-radius))
                    )
            )
        );
        margin-bottom: var(
            --tabs--header--margin-bottom,
            var(--tabs--margin-bottom, var(--margin-bottom))
        );
        overflow: auto;
        color: var(--tabs--header--color, var(--tabs--color));
        background: var(--tabs--header--background, var(--tabs--background));
    }

    &.-stretch {
        .tabs-header {
            .tab-title {
                flex-grow: 1;
            }
        }
    }
}