/*
# Contextual Edger */
/*
	Notes: Maybe edgers need a non-contextual style implementation.

		Probably makes sense to have both, a contextual edger and non-contextual utility that never changes.
		Sometimes dark should be dark on both light mode and on dark mode.

	Note:
		I think what the following was, was a way of using a flip switch class while also using a modifier. 
		In other words, if you you are in dark mode, you could choose to keep any given edger as a dark color. 

		.sft-dark-mode.sft-edger.sft-edger--dark

		Also note: The following code hasn't actually implemented that logic, and it also appears to have some 
		misleading naming and code, as in this line doesn't really make sense:
		.sft-light-mode.sft-edger.sft-edger--dark,

		But nonetheless, I think for simplicity sake, we're going to implement this in a simpler way, without any flip switch contexts.
		That's how we'll do it for the first pass. 

*/

/* 
Let's not use these classes for the time being: START */

	/*
	## Default mode */
		.sft-edger,
		.sft-light-mode.sft-edger,
		.sft-light-mode .sft-edger {
			border-style: solid;
			border-width: 1px;
			border-color: hsla(0, 0%, 0%, 0.1);
		}

		/* Dark modifier */
		.sft-edger.sft-edger--dark,
		.sft-light-mode.sft-edger.sft-edger--dark,
		.sft-light-mode .sft-edger.sft-edger--dark {
			border-style: solid;
			border-width: 1px;
			border-color: hsla(0, 0%, 0%, 0.2);
		}


		/*
		### Single side edgers */
			.sft-top-edger,
			.sft-light-mode.sft-top-edger,
			.sft-light-mode .sft-top-edger {
				border-style: solid;
				border-width: 0;
				border-top-width: 1px;
				border-color: hsla(0, 0%, 0%, 0.1);
			}


			.sft-bottom-edger,
			.sft-light-mode.sft-bottom-edger,
			.sft-light-mode .sft-bottom-edger {
				border-style: solid;
				border-width: 0;
				border-bottom-width: 1px;
				border-color: hsla(0, 0%, 0%, 0.1);
			}
			/* Modifier */
			.sft-bottom-edger.sft-bottom-edger--dark,
			.sft-light-mode.sft-bottom-edger.sft-bottom-edger--dark,
			.sft-light-mode .sft-bottom-edger.sft-bottom-edger--dark {
				border-style: solid;
				border-width: 0;
				border-bottom-width: 1px;
				border-color: hsla(0, 0%, 0%, 0.31);
			}




			.sft-left-edger,
			.sft-light-mode.sft-left-edger,
			.sft-light-mode .sft-left-edger {
				border-style: solid;
				border-width: 0;
				border-left-width: 1px;
				border-color: hsla(0, 0%, 0%, 0.1);
			}
			.sft-right-edger,
			.sft-light-mode.sft-right-edger,
			.sft-light-mode .sft-right-edger {
				border-style: solid;
				border-width: 0;
				border-right-width: 1px;
				border-color: hsla(0, 0%, 0%, 0.1);
			}

	/*
	## Dark mode */
		.sft-dark-mode.sft-edger,
		.sft-dark-mode .sft-edger {
			border-style: solid;
			border-width: 1px;
			border-color: hsla(0, 0%, 100%, 0.1);
		}


/*


/* 
Let's not use these classes for the time being: END */


/*	
# Non-contextual Edger */
/* 

	Notes about the following code:

		The following code is intended to be marked up with the use of the no-border utility classes.
		There's a reason why it's intended this way, and it doesn't have to do with "best logic" or anything.
		It has to do with having the code written in a compact way. 

		Also note, if we were to make use of Sass, we could write the following code, where we have the different 
		side edgers here, but I'm opting to keep Sass out. 
		
*/
	/*
	## Dark edger */
		.sft-dark-edger {
			border-style: solid;
			border-width: 1px;
			/* border-color: hsla(0, 0%, 0%, 0.1); */

			border-color: var(--sft-dark-edger-alpha-5);
		}

		.sft-dark-edger--dark-1 {
			border-color: var(--sft-dark-edger-alpha-1);
		}
		.sft-dark-edger--dark-2 {
			border-color: var(--sft-dark-edger-alpha-2);
		}
		.sft-dark-edger--dark-3 {
			border-color: var(--sft-dark-edger-alpha-3);
		}
		.sft-dark-edger--dark-4 {
			border-color: var(--sft-dark-edger-alpha-4);
		}
		.sft-dark-edger--dark-5 {
			border-color: var(--sft-dark-edger-alpha-5);
		}
		.sft-dark-edger--dark-6 {
			border-color: var(--sft-dark-edger-alpha-6);
		}
		.sft-dark-edger--dark-7 {
			border-color: var(--sft-dark-edger-alpha-7);
		}
		.sft-dark-edger--dark-8 {
			border-color: var(--sft-dark-edger-alpha-8);
		}
		.sft-dark-edger--dark-9 {
			border-color: var(--sft-dark-edger-alpha-9);
		}
		.sft-dark-edger--dark-10 {
			border-color: var(--sft-dark-edger-alpha-10);
		}


	/*
	## Light edger */
		.sft-light-edger {
			border-style: solid;
			border-width: 1px;
			border-color: hsla(0, 0%, 100%, 0.1);
		}