:root {
	/* === COLOR - BASE - RGB === */
	--fwk--color--rgb-blue: 13, 110, 253;
	--fwk--color--rgb-indigo: 102, 16, 242;
	--fwk--color--rgb-purple: 111, 66, 193;
	--fwk--color--rgb-pink: 214, 51, 132;
	--fwk--color--rgb-red: 220, 53, 69;
	--fwk--color--rgb-brown: 148, 83, 23;
	--fwk--color--rgb-orange: 223, 108, 13;
	--fwk--color--rgb-yellow: 255, 193, 7;
	--fwk--color--rgb-green: 25, 135, 84;
	--fwk--color--rgb-teal: 32, 201, 151;
	--fwk--color--rgb-cyan: 13, 202, 240;
	--fwk--color--rgb-black: 0, 0, 0;
	--fwk--color--rgb-grey-900: 33, 37, 41;
	--fwk--color--rgb-grey-800: 52, 58, 64;
	--fwk--color--rgb-grey-700: 73, 80, 87;
	--fwk--color--rgb-grey-600: 108, 117, 125;
	--fwk--color--rgb-grey-500: 173, 181, 189;
	--fwk--color--rgb-grey-400: 206, 212, 218;
	--fwk--color--rgb-grey-300: 222, 226, 230;
	--fwk--color--rgb-grey-200: 233, 236, 239;
	--fwk--color--rgb-grey-100: 248, 249, 250;
	--fwk--color--rgb-white: 255, 255, 255;
	--fwk--color--rgb-blue-200: 207, 226, 255;
	--fwk--color--rgb-blue-100: 231, 241, 255;
	--fwk--color--rgb-indigo-200: 225, 208, 253;
	--fwk--color--rgb-indigo-100: 240, 232, 254;
	--fwk--color--rgb-purple-200: 227, 218, 243;
	--fwk--color--rgb-purple-100: 241, 237, 249;
	--fwk--color--rgb-pink-200: 247, 215, 231;
	--fwk--color--rgb-pink-100: 251, 235, 243;
	--fwk--color--rgb-red-200: 248, 215, 218;
	--fwk--color--rgb-red-100: 252, 235, 237;
	--fwk--color--rgb-brown-200: 234, 221, 209;
	--fwk--color--rgb-brown-100: 245, 238, 232;
	--fwk--color--rgb-orange-200: 249, 226, 207;
	--fwk--color--rgb-orange-100: 252, 241, 231;
	--fwk--color--rgb-yellow-200: 255, 243, 206;
	--fwk--color--rgb-yellow-100: 255, 249, 231;
	--fwk--color--rgb-green-200: 209, 231, 221;
	--fwk--color--rgb-green-100: 232, 243, 238;
	--fwk--color--rgb-teal-200: 211, 245, 235;
	--fwk--color--rgb-teal-100: 233, 250, 245;
	--fwk--color--rgb-cyan-200: 207, 245, 252;
	--fwk--color--rgb-cyan-100: 231, 250, 254;

	/* === COLOR - BASE === */
	--fwk--color--blue: rgb(var(--fwk--color--rgb-blue));
	--fwk--color--indigo: rgb(var(--fwk--color--rgb-indigo));
	--fwk--color--purple: rgb(var(--fwk--color--rgb-purple));
	--fwk--color--pink: rgb(var(--fwk--color--rgb-pink));
	--fwk--color--red: rgb(var(--fwk--color--rgb-red));
	--fwk--color--brown: rgb(var(--fwk--color--rgb-brown));
	--fwk--color--orange: rgb(var(--fwk--color--rgb-orange));
	--fwk--color--yellow: rgb(var(--fwk--color--rgb-yellow));
	--fwk--color--green: rgb(var(--fwk--color--rgb-green));
	--fwk--color--teal: rgb(var(--fwk--color--rgb-teal));
	--fwk--color--cyan: rgb(var(--fwk--color--rgb-cyan));
	--fwk--color--black: rgb(var(--fwk--color--rgb-black));
	--fwk--color--grey-900: rgb(var(--fwk--color--rgb-grey-900));
	--fwk--color--grey-800: rgb(var(--fwk--color--rgb-grey-800));
	--fwk--color--grey-700: rgb(var(--fwk--color--rgb-grey-700));
	--fwk--color--grey-600: rgb(var(--fwk--color--rgb-grey-600));
	--fwk--color--grey-500: rgb(var(--fwk--color--rgb-grey-500));
	--fwk--color--grey-400: rgb(var(--fwk--color--rgb-grey-400));
	--fwk--color--grey-300: rgb(var(--fwk--color--rgb-grey-300));
	--fwk--color--grey-200: rgb(var(--fwk--color--rgb-grey-200));
	--fwk--color--grey-100: rgb(var(--fwk--color--rgb-grey-100));
	--fwk--color--white: rgb(var(--fwk--color--rgb-white));
	--fwk--color--blue-200: rgb(var(--fwk--color--rgb-blue-200));
	--fwk--color--blue-100: rgb(var(--fwk--color--rgb-blue-100));
	--fwk--color--indigo-200: rgb(var(--fwk--color--rgb-indigo-200));
	--fwk--color--indigo-100: rgb(var(--fwk--color--rgb-indigo-100));
	--fwk--color--purple-200: rgb(var(--fwk--color--rgb-purple-200));
	--fwk--color--purple-100: rgb(var(--fwk--color--rgb-purple-100));
	--fwk--color--pink-200: rgb(var(--fwk--color--rgb-pink-200));
	--fwk--color--pink-100: rgb(var(--fwk--color--rgb-pink-100));
	--fwk--color--red-200: rgb(var(--fwk--color--rgb-red-200));
	--fwk--color--red-100: rgb(var(--fwk--color--rgb-red-100));
	--fwk--color--brown-200: rgb(var(--fwk--color--rgb-brown-200));
	--fwk--color--brown-100: rgb(var(--fwk--color--rgb-brown-100));
	--fwk--color--orange-200: rgb(var(--fwk--color--rgb-orange-200));
	--fwk--color--orange-100: rgb(var(--fwk--color--rgb-orange-100));
	--fwk--color--yellow-200: rgb(var(--fwk--color--rgb-yellow-200));
	--fwk--color--yellow-100: rgb(var(--fwk--color--rgb-yellow-100));
	--fwk--color--green-200: rgb(var(--fwk--color--rgb-green-200));
	--fwk--color--green-100: rgb(var(--fwk--color--rgb-green-100));
	--fwk--color--teal-200: rgb(var(--fwk--color--rgb-teal-200));
	--fwk--color--teal-100: rgb(var(--fwk--color--rgb-teal-100));
	--fwk--color--cyan-200: rgb(var(--fwk--color--rgb-cyan-200));
	--fwk--color--cyan-100: rgb(var(--fwk--color--rgb-cyan-100));

	/* === COLOR - BUTTON === */
	--fwk--button--primary--color-fore: var(--fwk--color--white);
	--fwk--button--primary--color-back: var(--fwk--color--blue);
	--fwk--button--primary--color-hover: rgba(var(--fwk--color--rgb-blue), 0.7);
	--fwk--button--secondary--color-fore: var(--fwk--color--white);
	--fwk--button--secondary--color-back: var(--fwk--color--grey-600);
	--fwk--button--secondary--color-hover: rgba(var(--fwk--color--rgb-grey-600), 0.7);
	--fwk--button--success--color-fore: var(--fwk--color--white);
	--fwk--button--success--color-back: var(--fwk--color--green);
	--fwk--button--success--color-hover: rgba(var(--fwk--color--rgb-green), 0.7);
	--fwk--button--alert--color-fore: var(--fwk--color--white);
	--fwk--button--alert--color-back: var(--fwk--color--red);
	--fwk--button--alert--color-hover: rgba(var(--fwk--color--rgb-red), 0.7);
	--fwk--button--warning--color-fore: var(--fwk--color--grey-900);
	--fwk--button--warning--color-back: var(--fwk--color--yellow);
	--fwk--button--warning--color-hover: rgba(var(--fwk--color--rgb-yellow), 0.7);
	--fwk--button--info--color-fore: var(--fwk--color--grey-900);
	--fwk--button--info--color-back: var(--fwk--color--cyan);
	--fwk--button--info--color-hover: rgba(var(--fwk--color--rgb-cyan), 0.7);
}

/* ==================== COLORS ==================== */
.fwk-blue {
	color: var(--fwk--color--blue) !important;
}

.fwk-indigo {
	color: var(--fwk--color--indigo) !important;
}

.fwk-purple {
	color: var(--fwk--color--purple) !important;
}

.fwk-pink {
	color: var(--fwk--color--pink) !important;
}

.fwk-red {
	color: var(--fwk--color--red) !important;
}

.fwk-brown {
	color: var(--fwk--color--brown) !important;
}

.fwk-orange {
	color: var(--fwk--color--orange) !important;
}

.fwk-yellow {
	color: var(--fwk--color--yellow) !important;
}

.fwk-green {
	color: var(--fwk--color--green) !important;
}

.fwk-teal {
	color: var(--fwk--color--teal) !important;
}

.fwk-cyan {
	color: var(--fwk--color--cyan) !important;
}

.fwk-black {
	color: var(--fwk--color--black) !important;
}

.fwk-gray-900,
.fwk-grey-900 {
	color: var(--fwk--color--grey-900) !important;
}

.fwk-gray-800,
.fwk-grey-800 {
	color: var(--fwk--color--grey-800) !important;
}

.fwk-gray-700,
.fwk-grey-700 {
	color: var(--fwk--color--grey-700) !important;
}

.fwk-gray-600,
.fwk-grey-600 {
	color: var(--fwk--color--grey-600) !important;
}

.fwk-gray-500,
.fwk-grey-500 {
	color: var(--fwk--color--grey-500) !important;
}

.fwk-gray-400,
.fwk-grey-400 {
	color: var(--fwk--color--grey-400) !important;
}

.fwk-gray-300,
.fwk-grey-300 {
	color: var(--fwk--color--grey-300) !important;
}

.fwk-gray-200,
.fwk-grey-200 {
	color: var(--fwk--color--grey-200) !important;
}

.fwk-gray-100,
.fwk-grey-100 {
	color: var(--fwk--color--grey-100) !important;
}

.fwk-white {
	color: var(--fwk--color--white) !important;
}

.fwk-blue-200 {
	color: var(--fwk--color--blue-200) !important;
}

.fwk-blue-100 {
	color: var(--fwk--color--blue-100) !important;
}

.fwk-indigo-200 {
	color: var(--fwk--color--indigo-200) !important;
}

.fwk-indigo-100 {
	color: var(--fwk--color--indigo-100) !important;
}

.fwk-purple-200 {
	color: var(--fwk--color--purple-200) !important;
}

.fwk-purple-100 {
	color: var(--fwk--color--purple-100) !important;
}

.fwk-pink-200 {
	color: var(--fwk--color--pink-200) !important;
}

.fwk-pink-100 {
	color: var(--fwk--color--pink-100) !important;
}

.fwk-red-200 {
	color: var(--fwk--color--red-200) !important;
}

.fwk-red-100 {
	color: var(--fwk--color--red-100) !important;
}

.fwk-brown-200 {
	color: var(--fwk--color--brown-200) !important;
}

.fwk-brown-100 {
	color: var(--fwk--color--brown-100) !important;
}

.fwk-orange-200 {
	color: var(--fwk--color--orange-200) !important;
}

.fwk-orange-100 {
	color: var(--fwk--color--orange-100) !important;
}

.fwk-yellow-200 {
	color: var(--fwk--color--yellow-200) !important;
}

.fwk-yellow-100 {
	color: var(--fwk--color--yellow-100) !important;
}

.fwk-green-200 {
	color: var(--fwk--color--green-200) !important;
}

.fwk-green-100 {
	color: var(--fwk--color--green-100) !important;
}

.fwk-teal-200 {
	color: var(--fwk--color--teal-200) !important;
}

.fwk-teal-100 {
	color: var(--fwk--color--teal-100) !important;
}

.fwk-cyan-200 {
	color: var(--fwk--color--cyan-200) !important;
}

.fwk-cyan-100 {
	color: var(--fwk--color--cyan-100) !important;
}

/* ===== background ====== */
.fwk-blue-bg {
	background-color: var(--fwk--color--blue) !important;
}

.fwk-indigo-bg {
	background-color: var(--fwk--color--indigo) !important;
}

.fwk-purple-bg {
	background-color: var(--fwk--color--purple) !important;
}

.fwk-pink-bg {
	background-color: var(--fwk--color--pink) !important;
}

.fwk-red-bg {
	background-color: var(--fwk--color--red) !important;
}

.fwk-brown-bg {
	background-color: var(--fwk--color--brown) !important;
}

.fwk-orange-bg {
	background-color: var(--fwk--color--orange) !important;
}

.fwk-yellow-bg {
	background-color: var(--fwk--color--yellow) !important;
}

.fwk-green-bg {
	background-color: var(--fwk--color--green) !important;
}

.fwk-teal-bg {
	background-color: var(--fwk--color--teal) !important;
}

.fwk-cyan-bg {
	background-color: var(--fwk--color--cyan) !important;
}

.fwk-black-bg {
	background-color: var(--fwk--color--black) !important;
}

.fwk-gray-900-bg,
.fwk-grey-900-bg {
	background-color: var(--fwk--color--grey-900) !important;
}

.fwk-gray-800-bg,
.fwk-grey-800-bg {
	background-color: var(--fwk--color--grey-800) !important;
}

.fwk-gray-700-bg,
.fwk-grey-700-bg {
	background-color: var(--fwk--color--grey-700) !important;
}

.fwk-gray-600-bg,
.fwk-grey-600-bg {
	background-color: var(--fwk--color--grey-600) !important;
}

.fwk-gray-500-bg,
.fwk-grey-500-bg {
	background-color: var(--fwk--color--grey-500) !important;
}

.fwk-gray-400-bg,
.fwk-grey-400-bg {
	background-color: var(--fwk--color--grey-400) !important;
}

.fwk-gray-300-bg,
.fwk-grey-300-bg {
	background-color: var(--fwk--color--grey-300) !important;
}

.fwk-gray-200-bg,
.fwk-grey-200-bg {
	background-color: var(--fwk--color--grey-200) !important;
}

.fwk-gray-100-bg,
.fwk-grey-100-bg {
	background-color: var(--fwk--color--grey-100) !important;
}

.fwk-white-bg {
	background-color: var(--fwk--color--white) !important;
}

.fwk-blue-200-bg {
	background-color: var(--fwk--color--blue-200) !important;
}

.fwk-blue-100-bg {
	background-color: var(--fwk--color--blue-100) !important;
}

.fwk-indigo-200-bg {
	background-color: var(--fwk--color--indigo-200) !important;
}

.fwk-indigo-100-bg {
	background-color: var(--fwk--color--indigo-100) !important;
}

.fwk-purple-200-bg {
	background-color: var(--fwk--color--purple-200) !important;
}

.fwk-purple-100-bg {
	background-color: var(--fwk--color--purple-100) !important;
}

.fwk-pink-200-bg {
	background-color: var(--fwk--color--pink-200) !important;
}

.fwk-pink-100-bg {
	background-color: var(--fwk--color--pink-100) !important;
}

.fwk-red-200-bg {
	background-color: var(--fwk--color--red-200) !important;
}

.fwk-red-100-bg {
	background-color: var(--fwk--color--red-100) !important;
}

.fwk-brown-200-bg {
	background-color: var(--fwk--color--brown-200) !important;
}

.fwk-brown-100-bg {
	background-color: var(--fwk--color--brown-100) !important;
}

.fwk-orange-200-bg {
	background-color: var(--fwk--color--orange-200) !important;
}

.fwk-orange-100-bg {
	background-color: var(--fwk--color--orange-100) !important;
}

.fwk-yellow-200-bg {
	background-color: var(--fwk--color--yellow-200) !important;
}

.fwk-yellow-100-bg {
	background-color: var(--fwk--color--yellow-100) !important;
}

.fwk-green-200-bg {
	background-color: var(--fwk--color--green-200) !important;
}

.fwk-green-100-bg {
	background-color: var(--fwk--color--green-100) !important;
}

.fwk-teal-200-bg {
	background-color: var(--fwk--color--teal-200) !important;
}

.fwk-teal-100-bg {
	background-color: var(--fwk--color--teal-100) !important;
}

.fwk-cyan-200-bg {
	background-color: var(--fwk--color--cyan-200) !important;
}

.fwk-cyan-100-bg {
	background-color: var(--fwk--color--cyan-100) !important;
}

/* ===== invert ===== */
.fwk-invert {
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-blue-invert {
	color: var(--fwk--color--white);
	background-color: var(--fwk--color--blue);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-indigo-invert {
	color: var(--fwk--color--white);
	background-color: var(--fwk--color--indigo);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-purple-invert {
	color: var(--fwk--color--white);
	background-color: var(--fwk--color--purple);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-pink-invert {
	color: var(--fwk--color--white);
	background-color: var(--fwk--color--pink);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-red-invert {
	color: var(--fwk--color--white);
	background-color: var(--fwk--color--red);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-brown-invert {
	color: var(--fwk--color--white);
	background-color: var(--fwk--color--brown);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-orange-invert {
	color: var(--fwk--color--white);
	background-color: var(--fwk--color--orange);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-yellow-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--yellow);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-green-invert {
	color: var(--fwk--color--white);
	background-color: var(--fwk--color--green);
	padding: 0px 3px;
	border-radius: 3px;
}

.fwk-teal-invert {
	color: var(--fwk--color--white);
	background-color: var(--fwk--color--teal);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-cyan-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--cyan);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-black-invert {
	color: var(--fwk--color--grey-100);
	background-color: var(--fwk--color--black);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-gray-900-invert,
.fwk-grey-900-invert {
	color: var(--fwk--color--grey-100);
	background-color: var(--fwk--color--grey-900);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-gray-800-invert,
.fwk-grey-800-invert {
	color: var(--fwk--color--grey-100);
	background-color: var(--fwk--color--grey-800);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-gray-700-invert,
.fwk-grey-700-invert {
	color: var(--fwk--color--grey-100);
	background-color: var(--fwk--color--grey-700);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-gray-600-invert,
.fwk-grey-600-invert {
	color: var(--fwk--color--grey-100);
	background-color: var(--fwk--color--grey-600);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-gray-500-invert,
.fwk-grey-500-invert {
	color: var(--fwk--color--black);
	background-color: var(--fwk--color--grey-500);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-gray-400-invert,
.fwk-grey-400-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--grey-400);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-gray-300-invert,
.fwk-grey-300-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--grey-300);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-gray-200-invert,
.fwk-grey-200-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--grey-200);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-gray-100-invert,
.fwk-grey-100-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--grey-100);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-white-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--white);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-blue-200-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--blue-200);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-blue-100-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--blue-100);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-indigo-200-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--indigo-200);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-indigo-100-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--indigo-100);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-purple-200-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--purple-200);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-purple-100-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--purple-100);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-pink-200-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--pink-200);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-pink-100-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--pink-100);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-red-200-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--red-200);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-red-100-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--red-100);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-brown-200-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--brown-200);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-brown-100-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--brown-100);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-orange-200-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--orange-200);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-orange-100-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--orange-100);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-yellow-200-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--yellow-200);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-yellow-100-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--yellow-100);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-green-200-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--green-200);
	padding: 0px 3px;
	border-radius: 3px;
}

.fwk-green-100-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--green-100);
	padding: 0px 3px;
	border-radius: 3px;
}

.fwk-teal-200-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--teal-200);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-teal-100-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--teal-100);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-cyan-200-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--cyan-200);
	padding: 0px 2px;
	border-radius: 2px;
}

.fwk-cyan-100-invert {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--cyan-100);
	padding: 0px 2px;
	border-radius: 2px;
}

/* ===== box ====== */
.fwk-blue-box {
	color: var(--fwk--color--blue);
	background-color: var(--fwk--color--blue-100);
	padding: 5px 10px;
	border: 1px solid var(--fwk--color--blue);
	border-radius: 4px;
}

.fwk-indigo-box {
	color: var(--fwk--color--indigo);
	background-color: var(--fwk--color--indigo-100);
	padding: 5px 10px;
	border: 1px solid var(--fwk--color--indigo);
	border-radius: 4px;
}

.fwk-purple-box {
	color: var(--fwk--color--purple);
	background-color: var(--fwk--color--purple-100);
	padding: 5px 10px;
	border: 1px solid var(--fwk--color--purple);
	border-radius: 4px;
}

.fwk-pink-box {
	color: var(--fwk--color--pink);
	background-color: var(--fwk--color--pink-100);
	padding: 5px 10px;
	border: 1px solid var(--fwk--color--pink);
	border-radius: 4px;
}

.fwk-red-box {
	color: var(--fwk--color--red);
	background-color: var(--fwk--color--red-100);
	padding: 5px 10px;
	border: 1px solid var(--fwk--color--red);
	border-radius: 5px;
}

.fwk-brown-box {
	color: var(--fwk--color--brown);
	background-color: var(--fwk--color--brown-100);
	padding: 5px 10px;
	border: 1px solid var(--fwk--color--brown);
	border-radius: 5px;
}

.fwk-orange-box {
	color: var(--fwk--color--orange);
	background-color: var(--fwk--color--orange-100);
	padding: 5px 10px;
	border: 1px solid var(--fwk--color--orange);
	border-radius: 5px;
}

.fwk-yellow-box {
	color: var(--fwk--color--yellow);
	background-color: var(--fwk--color--yellow-100);
	padding: 5px 10px;
	border: 1px solid var(--fwk--color--yellow);
	border-radius: 5px;
}

.fwk-green-box {
	color: var(--fwk--color--green);
	background-color: var(--fwk--color--green-100);
	padding: 5px 10px;
	border: 1px solid var(--fwk--color--green);
	border-radius: 5px;
}

.fwk-teal-box {
	color: var(--fwk--color--teal);
	background-color: var(--fwk--color--teal-100);
	padding: 5px 10px;
	border: 1px solid var(--fwk--color--teal);
	border-radius: 5px;
}

.fwk-cyan-box {
	color: var(--fwk--color--cyan);
	background-color: var(--fwk--color--cyan-100);
	padding: 5px 10px;
	border: 1px solid var(--fwk--color--cyan);
	border-radius: 5px;
}

.fwk-black-box {
	color: var(--fwk--color--grey-100);
	background-color: var(--fwk--color--grey-700);
	padding: 5px 10px;
	border: 1px solid var(--fwk--color--black);
	border-radius: 5px;
}

.fwk-white-box {
	color: var(--fwk--color--grey-900);
	background-color: var(--fwk--color--grey-100);
	padding: 5px 10px;
	border: 1px solid var(--fwk--color--grey-900);
	border-radius: 5px;
}

/* ==================== [fwk-link] ==================== */
.fwk-link {
	display: inline-flex;
	column-gap: 5px;
	align-items: center;
}

.fwk-link i {
	color: var(--wp--preset--color--raft-accent-secondary);
	font-size: 0.9em;
	line-height: 0.9em;
}

/* ===== Post Editor Metabox ===== */
.fwk-metabox {
	display: grid;
	grid-template-columns: max-content auto;
	box-sizing: content-box;
	row-gap: 3px;
}

.fwk-metabox-title {
	grid-column: span 2;
	font-size: 14px;
	padding: 10px 10px 5px 0px;
	font-weight: 700;
}

.fwk-metabox-title:first-child {
	padding-top: 0px;
}

.fwk-metabox-label {
	font-weight: 500;
	padding: 5px 10px 5px 5px;
	background-color: #f0f0f0;
}

.fwk-metabox-value {
	padding: 5px;
	background-color: #f0f0f0;

	p {
		margin: 0px;
	}

	input:not([type="checkbox"]),
	textarea {
		width: 100%;
		height: 100%;
	}
}

/* ==================== [fwk-button] ==================== */
.fwk-button {
	display: inline-block;
	line-height: 1.8em;
	padding: 2px 10px;
	border-radius: 6px;
	background-color: var(--fwk--button--primary--color-back);
	border: 2px solid var(--fwk--button--primary--color-back);
	color: var(--fwk--button--primary--color-fore);
	text-decoration: none;

	&.fwk-small {
		line-height: 1.4em;
		padding: 1px 8px;
		border-radius: 6px;
	}

	&:focus {
		outline: none;
		box-shadow: none;
	}

	&:hover {
		background-color: var(--fwk--button--primary--color-hover);
		color: var(--fwk--button--primary--color-fore);
		text-decoration: none;
	}

	&.fwk-primary {
		color: var(--fwk--button--primary--color-fore);
		background-color: var(--fwk--button--primary--color-back);
		border-color: var(--fwk--button--primary--color-back);

		&:hover {
			background-color: var(--fwk--button--primary--color-hover);
		}
	}

	&.fwk-secondary {
		color: var(--fwk--button--secondary--color-fore);
		background-color: var(--fwk--button--secondary--color-back);
		border-color: var(--fwk--button--secondary--color-back);

		&:hover {
			background-color: var(--fwk--button--secondary--color-hover);
		}
	}

	&.fwk-success {
		color: var(--fwk--button--success--color-fore);
		background-color: var(--fwk--button--success--color-back);
		border-color: var(--fwk--button--success--color-back);

		&:hover {
			background-color: var(--fwk--button--success--color-hover);
		}
	}

	&.fwk-alert {
		color: var(--fwk--button--alert--color-fore);
		background-color: var(--fwk--button--alert--color-back);
		border-color: var(--fwk--button--alert--color-back);

		&:hover {
			background-color: var(--fwk--button--alert--color-hover);
		}
	}

	&.fwk-warning {
		color: var(--fwk--button--warning--color-fore);
		background-color: var(--fwk--button--warning--color-back);
		border-color: var(--fwk--button--warning--color-back);

		&:hover {
			background-color: var(--fwk--button--warning--color-hover);
		}
	}

	&.fwk-info {
		color: var(--fwk--button--info--color-fore);
		background-color: var(--fwk--button--info--color-back);
		border-color: var(--fwk--button--info--color-back);

		&:hover {
			background-color: var(--fwk--button--info--color-hover);
		}
	}
}

/* ==================== [fwk-badge] ==================== */
.fwk-badge {
	display: inline-block;
	padding: 0px 4px;
	border-radius: 4px;
	background-color: var(--fwk--color--grey-600);
	color: var(--fwk--color--white);
	text-decoration: none;
}

/* ==================== [fwk-linethrough] ==================== */
.fwk-linethrough {
	text-decoration: line-through;
}