@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/screen-sizes";
@use "../../styles/internal/component";

.db-section {
	&:not([data-width]),
	&[data-width="full"] {
		padding-inline: variables.$db-spacing-fixed-md;
	}

	&[data-width="medium"] {
		padding-inline: max(
			calc(
				#{variables.$db-spacing-fixed-md} +
					(100vw - #{screen-sizes.$db-breakpoint-md}) / 2
			),
			#{variables.$db-spacing-fixed-md}
		);
	}

	&[data-width="large"] {
		padding-inline: max(
			calc(
				#{variables.$db-spacing-fixed-md} +
					(100vw - #{screen-sizes.$db-breakpoint-lg}) / 2
			),
			#{variables.$db-spacing-fixed-md}
		);
	}

	@include component.get-data-spacing(
		"padding-block",
		component.$responsive-spacings
	);
}