@import url("./typography.css");
@import url("./foundation.css");
@import url("./button.css");
@import url("./icon.css");
@import url("./form.css");
@import url("./table.css");
@import url("./pagination.css");
@import url("./spinner.css");
@import url("./alert.css");

:root {
	/* content */
	--breakpoint_sm: 360px;
	--breakpoint_md: 768px;
	--breakpoint_desktop: 1440px;

	--max-width__mobile: 320px;
	--max-width__tablet: 688px;
	--max-width__desktop: 1328px;

	/* color */
	--color_black: rgba(0, 0, 0, 0.85);
	--color_white: white;

	--primary-color: #74e478;

	/* shape / border / shadow */
	--border_black_1: 1px solid var(--color_black);
	--border_black_2: 2px solid var(--color_black);
	--border_black_3: 3px solid var(--color_black);
	--border_dark_1: 1px solid var(--gray_600);
	--border_dark_2: 2px solid var(--gray_600);
	--border_dark_3: 3px solid var(--gray_600);
	--border_gray_1: 1px solid var(--gray_300);
	--border_gray_2: 2px solid var(--gray_300);
	--border_gray_3: 3px solid var(--gray_300);
	--border_light_1: 1px solid var(--gray_200);
	--border_light_2: 2px solid var(--gray_200);
	--border_light_3: 3px solid var(--gray_200);
	--border_beige_1: 1px solid var(--beige_200);
	--border_beige_2: 2px solid var(--beige_200);
	--border_beige_3: 3px solid var(--beige_200);
	--border_primary_1: 1px solid var(--primary_600);
	--border_primary_2: 2px solid var(--primary_600);
	--border_primary_3: 3px solid var(--primary_600);
	--border_green_1: 1px solid var(--green_700);
	--border_green_2: 2px solid var(--green_700);
	--border_green_3: 3px solid var(--green_700);

	--curved: 5px;
	--rounded: 24px;
	--circle: 50%;

	--shadow: 0 3px 6px var(--gray_500);
	--shadow_primary: 0 3px 6px var(--primary_500);
}

html,
body {
	/* width: 100vw; */
	height: 100%;
	/* height: 100vh; */
	/* overflow: hidden; */
}

html::-webkit-scrollbar {
	display: none;
}

.visible {
	visibility: visible !important;
}

.max-width__full {
	max-width: 100% !important;
	width: 100% !important;
}

/* flex responsive */
/* mobile-vertical */
@media screen and (min-width: 320px) and (max-width: 449px) {
	.flex-row.mobile {
		flex-direction: column;
	}

	.flex-col.mobile {
		flex-direction: row;
	}
}
/* mobile-horizontal */
@media screen and (min-width: 450px) and (max-width: 767px) {
	.flex-row.mobile {
		flex-direction: row;
	}

	.flex-col.mobile {
		flex-direction: column;
	}
}

@media screen and (min-width: 360px) {
}

@media screen and (min-width: 768px) {
}

@media screen and (min-width: 1440px) {
}