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

@each $device-key, $device-map in $brandui-device-breakpoints-new {
	$device-value: map.get($device-map, 'value');
	$device-prefix: map.get($device-map, 'prefix');

	@media (max-width: string.unquote('#{$device-value}px')) {
		// Device Breakpoints Start

		.#{$device-prefix}flex-start {
			align-items: flex-start;
			display: flex;
			justify-content: flex-start;
		}

		.#{$device-prefix}flex-center {
			align-items: center;
			display: flex;
			justify-content: center;
		}

		.#{$device-prefix}flex-space-between {
			align-items: center;
			display: flex;
			justify-content: space-between;
		}

		.#{$device-prefix}flex-space-around {
			align-items: center;
			display: flex;
			justify-content: space-around;
		}

		.#{$device-prefix}flex-space-evenly {
			align-items: center;
			display: flex;
			justify-content: space-evenly;
		}

		.#{$device-prefix}flex-left {
			align-items: center;
			display: flex;
			justify-content: left;
		}

		.#{$device-prefix}flex-right {
			align-items: center;
			display: flex;
			justify-content: right;
		}

		.#{$device-prefix}flex-stretch {
			align-items: stretch;
			display: flex;
			justify-content: flex-start;
		}

		.#{$device-prefix}flex-end {
			align-items: flex-end;
			display: flex;
			justify-content: flex-end;
		}

		.#{$device-prefix}flex-wrap {
			flex-wrap: wrap;
		}

		.#{$device-prefix}flex-wrap-reverse {
			flex-wrap: wrap-reverse;
		}

		.#{$device-prefix}flex-nowrap {
			flex-wrap: nowrap;
		}

		.#{$device-prefix}flex-row {
			flex-direction: row;
		}

		.#{$device-prefix}flex-row-reverse {
			flex-direction: row-reverse;
		}

		.#{$device-prefix}flex-col {
			flex-direction: column;
		}

		.#{$device-prefix}flex-col-reverse {
			flex-direction: column-reverse;
		}

		.#{$device-prefix}flex-initial {
			flex-direction: initial;
		}

		.#{$device-prefix}flex-shrink-0 {
			flex-shrink: 0;
		}

		.#{$device-prefix}flex-shrink {
			flex-shrink: 1;
		}

		.#{$device-prefix}flex-grows-0 {
			flex-grow: 0;
		}

		.#{$device-prefix}flex-grow {
			flex-grow: 1;
		}

		.#{$device-prefix}flex-basis {
			flex-basis: 1;
		}

		.#{$device-prefix}flex-basis-auto {
			flex-basis: auto;
		}

		.#{$device-prefix}flex-basis-50 {
			flex-basis: 50%;
		}

		.#{$device-prefix}flex-basis-33 {
			flex-basis: 33.33%;
		}

		.#{$device-prefix}flex-basis-25 {
			flex-basis: 25%;
		}

		.#{$device-prefix}content-center {
			align-content: center;
		}

		.#{$device-prefix}content-start {
			align-content: flex-start;
		}

		.#{$device-prefix}content-end {
			align-content: flex-end;
		}

		.#{$device-prefix}content-between {
			align-content: space-between;
		}

		.#{$device-prefix}content-around {
			align-content: space-around;
		}

		.#{$device-prefix}content-evenly {
			align-content: space-evenly;
		}

		.#{$device-prefix}items-start {
			align-items: flex-start;
		}

		.#{$device-prefix}items-end {
			align-items: flex-end;
		}

		.#{$device-prefix}items-center {
			align-items: center;
		}

		.#{$device-prefix}items-baseline {
			align-items: baseline;
		}

		.#{$device-prefix}items-stretch {
			align-items: stretch;
		}

		.#{$device-prefix}self-auto {
			align-self: auto;
		}

		.#{$device-prefix}self-start {
			align-self: flex-start;
		}

		.#{$device-prefix}self-end {
			align-self: flex-end;
		}

		.#{$device-prefix}self-center {
			align-self: center;
		}

		.#{$device-prefix}self-stretch {
			align-self: stretch;
		}

		.#{$device-prefix}self-baseline {
			align-self: baseline;
		}

		.#{$device-prefix}justify-start {
			justify-content: flex-start;
		}

		.#{$device-prefix}justify-end {
			justify-content: flex-end;
		}

		.#{$device-prefix}justify-center {
			justify-content: center;
		}

		.#{$device-prefix}justify-between {
			justify-content: space-between;
		}

		.#{$device-prefix}justify-around {
			justify-content: space-around;
		}

		.#{$device-prefix}justify-evenly {
			justify-content: space-evenly;
		}

		.#{$device-prefix}justify-items-start {
			justify-items: start;
		}

		.#{$device-prefix}justify-items-end {
			justify-items: end;
		}

		.#{$device-prefix}justify-items-center {
			justify-items: center;
		}

		.#{$device-prefix}justify-items-stretch {
			justify-items: stretch;
		}

		.#{$device-prefix}justify-self-auto {
			justify-self: auto;
		}

		.#{$device-prefix}justify-self-start {
			justify-self: start;
		}

		.#{$device-prefix}justify-self-end {
			justify-self: end;
		}

		.#{$device-prefix}justify-self-center {
			justify-self: center;
		}

		.#{$device-prefix}justify-self-stretch {
			justify-self: stretch;
		}

		@for $i from 1 through 12 {
			.#{$device-prefix}cols-#{$i} {
				width: calc((100% / 12) * #{$i});
			}
		}

		// Device Breakpoints End
	}
}