_layout.scss

@use "../helpers/mixins/breakpoints" as m;
// overflow
@each $breakpoint, $screen-size in m.$breakpoints {
	@include m.mq($breakpoint) {
		@if $breakpoint != "" {
			$breakpoint: "-" + $breakpoint;
		}

		//overflow
		.overflow#{$breakpoint}-auto {
			overflow: auto;
		}
		.overflow#{$breakpoint}-hidden {
			overflow: hidden;
		}
		.overflow#{$breakpoint}-clip {
			overflow: clip;
		}
		.overflow#{$breakpoint}-visible {
			overflow: visible;
		}
		.overflow#{$breakpoint}-scroll {
			overflow: scroll;
		}
		.overflow#{$breakpoint}-x-auto {
			overflow-x: auto;
		}
		.overflow#{$breakpoint}-y-auto {
			overflow-y: auto;
		}
		.overflow#{$breakpoint}-x-hidden {
			overflow-x: hidden;
		}
		.overflow#{$breakpoint}-y-hidden {
			overflow-y: hidden;
		}
		.overflow#{$breakpoint}-x-visible {
			overflow-x: visible;
		}
		.overflow#{$breakpoint}-y-visible {
			overflow-y: visible;
		}
		.overflow#{$breakpoint}-x-scroll {
			overflow-x: scroll;
		}
		.overflow#{$breakpoint}-y-scroll {
			overflow-y: scroll;
		}
		.overflow#{$breakpoint}-x-clip {
			overflow-x: clip;
		}
		.overflow#{$breakpoint}-y-clip {
			overflow-y: clip;
		}

		//object fit
		.object#{$breakpoint}-contain {
			object-fit: contain;
		}
		.object#{$breakpoint}-cover {
			object-fit: cover;
		}
		.object#{$breakpoint}-fill {
			object-fit: fill;
		}
		.object#{$breakpoint}-none {
			object-fit: none;
		}
		.object#{$breakpoint}-scale-down {
			object-fit: scale-down;
		}

		// Floats
		.float#{$breakpoint}-left {
			float: left;
		}
		.float#{$breakpoint}-right {
			float: right;
		}
		.float#{$breakpoint}-none {
			float: none;
		}

		// vertical alignment
		.align#{$breakpoint}-baseline {
			vertical-align: baseline;
		}
		.align#{$breakpoint}-top {
			vertical-align: top;
		}
		.align#{$breakpoint}-middle {
			vertical-align: middle;
		}
		.align#{$breakpoint}-bottom {
			vertical-align: bottom;
		}
		.align#{$breakpoint}-text-top {
			vertical-align: text-top;
		}
		.align#{$breakpoint}-text-bottom {
			vertical-align: text-bottom;
		}
		.align#{$breakpoint}-sub {
			vertical-align: sub;
		}
		.align#{$breakpoint}-super {
			vertical-align: sup;
		}

		//visibility
		.visible#{$breakpoint} {
			visibility: visible;
		}
		.hidden#{$breakpoint} {
			visibility: hidden;
		}
		.collapse#{$breakpoint} {
			visibility: collapse;
		}

		// border collapse
		.border#{$breakpoint}-collapse {
			border-collapse: collapse;
		}
		.border#{$breakpoint}-separate {
			border-collapse: separate;
		}

		// table layout
		.table#{$breakpoint}-auto {
			table-layout: auto;
		}
		.table#{$breakpoint}-fixed {
			table-layout: fixed;
		}

		// z-index
		.z#{$breakpoint}-auto {
			z-index: auto;
		}

		.z#{$breakpoint}-tooltip {
			z-index: 1500;
		}

		.z#{$breakpoint}-toast {
			z-index: 1400;
		}

		.z#{$breakpoint}-drawer {
			z-index: 1350;
		}

		.z#{$breakpoint}-drawer-backdrop {
			z-index: 1300;
		}

		.z#{$breakpoint}-modal {
			z-index: 1250;
		}

		.z#{$breakpoint}-modal-backdrop {
			z-index: 1200;
		}

		.z#{$breakpoint}-navbar {
			z-index: 1100;
		}

		@for $index from 0 through 10 {
			.z#{$breakpoint}-#{$index * 10} {
				z-index: $index * 10;
			}
		}
	}
}

// clearfix
.clearfix {
	&::after {
		content: "";
		display: block;
		clear: both;
	}
}