/**
 * Tab
 */

.tabs .tab {
    position: relative;
    display: block;
    transition-property: var(
        --tabs--tab--transition-property,
        var(--tabs--transition-property, background-color, border-color, color)
    );
    transition-duration: var(
        --tabs--tab--transition-duration,
        var(--tabs--transition-duration, var(--transition-duration))
    );
    transition-timing-function: var(
        --tabs--tab--transition-timing-function,
        var(--tabs--transition-timing-function, var(--transition-timing-function))
    );
    color: var(--tabs--tab--color, var(--tabs--color));
    background: var(--tabs--tab--background, var(--tabs--background));
    border-color: var(
        --tabs--tab--border-color,
        var(--tabs--tab--border-top-color, var(--tabs--border-top-color, var(--border-top-color)))
            var(
                --tabs--tab--border-right-color,
                var(--tabs--border-right-color, var(--border-right-color))
            )
            var(
                --tabs--tab--border-bottom-color,
                var(--tabs--border-bottom-color, var(--border-bottom-color))
            )
            var(
                --tabs--tab--border-left-color,
                var(--tabs--border-left-color, var(--border-left-color))
            )
    );
    border-style: var(
        --tabs--tab--border-style,
        var(--tabs--tab--border-top-style, var(--tabs--border-top-style, var(--border-top-style)))
            var(
                --tabs--tab--border-right-style,
                var(--tabs--border-right-style, var(--border-right-style))
            )
            var(
                --tabs--tab--border-bottom-style,
                var(--tabs--border-bottom-style, var(--border-bottom-style))
            )
            var(
                --tabs--tab--border-left-style,
                var(--tabs--border-left-style, var(--border-left-style))
            )
    );
    border-width: var(
        --tabs--tab--border-width,
        var(--tabs--tab--border-top-width, var(--tabs--border-top-width, var(--border-top-width)))
            var(
                --tabs--tab--border-right-width,
                var(--tabs--border-right-width, var(--border-right-width))
            )
            var(
                --tabs--tab--border-bottom-width,
                var(--tabs--border-bottom-width, var(--border-bottom-width))
            )
            var(
                --tabs--tab--border-left-width,
                var(--tabs--border-left-width, var(--border-left-width))
            )
    );
    border-radius: var(
        --tabs--tab--border-radius,
        var(
            --tabs--border-radius,
            var(
                    --tabs--tab--border-top-left-radius,
                    var(--tabs--border-top-left-radius, var(--border-top-left-radius))
                )
                var(
                    --tabs--tab--border-top-right-radius,
                    var(--tabs--border-top-right-radius, var(--border-top-right-radius))
                )
                var(
                    --tabs--tab--border-bottom-right-radius,
                    var(--tabs--border-bottom-right-radius, var(--border-bottom-right-radius))
                )
                var(
                    --tabs--tab--border-bottom-left-radius,
                    var(--tabs--border-bottom-left-radius, var(--border-bottom-left-radius))
                )
        )
    );

    > .tab-body {
        display: block;
        position: relative;
        font-size: var(--tabs--tab--font-size, var(--tabs--font-size, var(--font-size)));
        padding: var(
            --tabs--tab--padding,
            var(--tabs--tab--padding-top, var(--tabs--padding-top, var(--padding-top)))
                var(--tabs--tab--padding-right, var(--tabs--padding-right, var(--padding-right)))
                var(--tabs--tab--padding-bottom, var(--tabs--padding-bottom, var(--padding-bottom)))
                var(--tabs--tab--padding-left, var(--tabs--padding-left, var(--padding-left)))
        );
    }
}