@use 'sass:map';
@use 'sass:string';
@use '../../base/maps/tokens' as *;
@use '../../base/mixins/breakpoints' as break;

.chipbar {
	margin: 0 string.unquote('-#{var(--padding-large)}');

	.chips {
		width: fit-content;
		margin: 0 auto;
		padding: 0 var(--padding-large);
		display: flex;
		gap: var(--padding-small) var(--padding-extra-small);
		flex-wrap: wrap;

		@include break.max-mobile {
			width: 100%;
			flex-wrap: nowrap;
			overflow-x: auto;
			scrollbar-width: none;
		}
	}

	@include break.max-mobile {
		margin: 0;
	}
}