// 1. Use the `clip` value to prevent the content from unwanted vertical scrolling during keyboard navigation.
// 2. Decorative bottom border.

@use "../../styles/tools/reset";
@use "theme";

@layer components.tabs {
    .list {
        @include reset.list();

        position: relative;
        display: inline-flex;
        min-width: 100%;
        padding-right: theme.$padding-x;
        padding-left: theme.$padding-x;
        overflow-y: clip; // 1.
        white-space: nowrap;

        // 2.
        &::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            height: theme.$border-bottom-width;
            background-color: theme.$border-bottom-color;
        }
    }
}