@import "../../../styles/mixins";

$class: ".gov-chips";

#{$class} {
    position: relative;

    ul, ul:first-child {
        padding-left: 0;
        margin-top: 0;
    }

    ul {
        @include flex($gap: var(--spacing-s-nudge), $wrap: wrap);
        gov-chip, .gov-chip {
            .element {
                white-space: nowrap;
            }
        }
    }

    &--scroll {
        ul {
            overflow-x: auto;
            padding: rem-calc(3);
            @include flex($gap: var(--spacing-s-nudge), $wrap: nowrap);
            @include scrollbar();
        }

        &:after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 100%;
            background: linear-gradient(270deg, var(--background-page) 0%, rgba(245, 245, 245, 0.00) 100%);
        }
    }
}