@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

@each $item in tokens.$displays {
	.display-#{$item} {
		display: #{$item} !important;
	}
}

@include mixins.tablet {
	@each $item in tokens.$displays {
		.display-#{$item}-tablet {
			display: #{$item} !important;
		}
	}
}

@include mixins.desktop {
	@each $item in tokens.$displays {
		.display-#{$item}-desktop {
			display: #{$item} !important;
		}
	}
}

@include mixins.widescreen {
	@each $item in tokens.$displays {
		.display-#{$item}-widescreen {
			display: #{$item} !important;
		}
	}
}

[hidden] {
	display: none !important;
}