/* Global button properties */  
button {
    min-width: 150px;
    padding: 1rem;
    font-size: 16px;
    letter-spacing: 1px;
    border-width: 2px;
    border-radius: 0px;
    font-family: -apple-system, BlinkMacSystemFont, "Roboto", Helvetica Neue,
        Helvetica, Arial, sans-serif;
    transition: 0.2s;
    }
    /* Remove annoying default properties */
    button:focus { 
        outline: none;
    }
    button:active {
        border-style: solid;
    }

/* Individual border properties */
button.set-1 {
  border-width: 2px;
  border-style: solid;
  border-radius: 0px;
}

button.set-2 {
  border-width: 2px;
  border-style: solid;
  border-radius: 8px;
}

button.set-3 {
  border-width: 2px;
  border-style: solid;
  border-radius: 50px;
}

button.set-4 {
  border-width: 2px;
  border-style: solid;
  border-radius: 25% 10%;
}
/* Individual button colour properties --light mode */
.button.primary {
  color: #5183f5;
  border-color: #5183f5;
  background: #e2eafd;
}
.button.primary:hover {
  border-color: #5183f5;
  background: #b1c8fb;
}
.button.primary:active {
  border-color: #2161f2;
  background: #5183f5;
  color: white;
}
.button.secondary {
  color: #f59551;
  border-color: #f59551;
  background: #fdede2;
}
.button.secondary:hover {
  border-color: #f27821;
  background: #fbd0b1;
}
.button.secondary:active {
  border-color: #f27821;
  background: #f59551;
  color: white;
}
.button.success {
  color: #0cd498;
  border-color: #51f5c4;
  background: #e2fdf5;
}
.button.success:hover {
  border-color: #21f2b4;
  background: #b1fbe5;
}
.button.success:active {
  border-color: #21f2b4;
  background: #51f5c4;
  color: white;
}
.button.error {
  color: #f55169;
  border-color: #f55169;
  background: #fde2e6;
}
.button.error:hover {
  border-color: #f2213f;
  background: #fbb1bc;
}
.button.error:active {
  border-color: #f2213f;
  background: #f55169;
  color: white;
}
.button.warning {
  color: #f2b221;
  border-color: #f5c351;
  background: #fdf5e2;
}
.button.warning:hover {
  border-color: #f2b221;
  background: #fbe4b1;
}
.button.warning:active {
  border-color: #f2b221;
  background: #f5c351;
  color: white;
}
.button.neutral {
  color: #919191;
  border-color: #9e9e9e;
  background: #ebebeb;
}
.button.neutral:hover {
  border-color: #858585;
  background: #d1d1d1;
}
.button.neutral:active {
  border-color: #858585;
  background: #9e9e9e;
  color: white;
}

/* Individual button colour properties -- dark mode */
.dark .button.primary {
  color: #5183f5;
  border-color: #5183f5;
  background: transparent;
}
.dark .button.primary:hover {
  border-color: #5183f5;
  background: black;
}
.dark .button.primary:active {
  border-color: #0c49d4;
  background: black;
}
.dark .button.secondary {
  color: #f59551;
  border-color: #f59551;
  background: transparent;
}
.dark .button.secondary:hover {
  border-color: #f27821;
  background: #1d0d02;
}
.dark .button.secondary:active {
  border-color: #f27821;
  background: black;
}
.dark .button.success {
  color: #0cd498;
  border-color: #51f5c4;
  background: transparent;
}
.dark .button.success:hover {
  border-color: #21f2b4;
  background: #01130e;
}
.dark .button.success:active {
  border-color: #21f2b4;
  background: black;
}
.dark .button.error {
  color: #f55169;
  border-color: #f55169;
  background: transparent;
}
.dark .button.error:hover {
  border-color: #f2213f;
  background: #1d0206;
}
.dark .button.error:active {
  border-color: #f2213f;
  background: #090102;
}
.dark .button.warning {
  color: #f2b221;
  border-color: #f5c351;
  background: transparent;
}
.dark .button.warning:hover {
  border-color: #f2b221;
  background: #2b1f02;
}
.dark .button.warning:active {
  border-color: #f2b221;
  background: #130d01;
}
.dark .button.neutral {
  color: #919191;
  border-color: #9e9e9e;
  background: transparent;
}
.dark .button.neutral:hover {
  border-color: #858585;
  background: #1f1f1f;
}
.dark .button.neutral:active {
  border-color: #858585;
  background: #121212;
}

		
/* Variables */

// Button colours
$blue: #5183f5;
$red: #f55169;
$yellow: #f5c351;
$green: #51f5c4;
$orange: #f59551;
$grey: #9e9e9e;

/* Mixins */

// Remove defaults
@mixin purge-defaults {
	button {
		&:focus {
			outline: none;
		}
	}
}

// Global button properties
@mixin button-skeleton {
	min-width: 150px;
	padding: 1rem;
	font-size: 16px;
	letter-spacing: 1px;
}

// Colours
@mixin colours( $button-border-colour, $button-background-colour ) {
	border-color: $button-border-colour;
	background: $button-background-colour;
}

// Borders
@mixin button-borders( $width, $radius, $style ) {
	border-width: $width;
	border-style: $style;
	border-radius: $radius;
}

/* Application */

// Applying border radii 

// Squared

button.set-1 {
	@include button-borders(2px, 0px, solid);
}

// Rounded

button.set-2 {
	@include button-borders(2px, 8px, solid);
}

// Circular

button.set-3 {
	@include button-borders(2px, 50px, solid);
}

button.set-4 {
	@include button-borders(2px, 25% 10%, solid);
}


// Applying lightmode colours 
.button {
	@include button-skeleton;
	transition: 0.2s;
	&.primary {
		color: $blue;
		@include colours($blue, lighten($blue, 30%));
		&:hover {
			@include colours($blue, lighten($blue, 20%));
		}
		&:active {
			@include colours(darken($blue,10%), $blue);
			color: white;
		}
	}
	&.secondary {
		color: $orange;
		@include colours($orange, lighten($orange, 30%) );
		&:hover {
			@include colours(darken($orange,10%), lighten($orange, 20%) );
		}
		&:active {
			@include colours(darken($orange,10%), $orange);
			color: white;
		}
	}
	&.success {
		color: darken($green, 20%);
		@include colours($green, lighten($green, 30%) );
		&:hover {
			@include colours(darken($green,10%), lighten($green, 20%) );
		}
		&:active {
			@include colours(darken($green,10%), $green);
			color: white;
		}
	}
	&.error {
		color: $red;
		@include colours($red, lighten($red, 30%) );
		&:hover {
			@include colours(darken($red,10%), lighten($red, 20%) );
		}
		&:active {
			@include colours(darken($red,10%), $red);
			color: white;
		}
	}
	&.warning {
		color: darken($yellow, 10%);
		@include colours($yellow, lighten($yellow, 30%) );
		&:hover {
			@include colours(darken($yellow,10%), lighten($yellow, 20%) );
		}
		&:active {
			@include colours(darken($yellow,10%), $yellow);
			color: white;
		}
	}
	&.neutral {
		color: darken($grey, 5%);
		@include colours($grey, lighten($grey, 30%) );
		&:hover {
			@include colours(darken($grey,10%), lighten($grey, 20%) );
		}
		&:active {
			@include colours(darken($grey,10%), $grey);
			color: white;
		}
	}
}

// Applying dark mode colors 
.dark {
	background: #212121;
	color: #e0e0e0;
	.css-tray{
		background: transparent;
		color: #BDBDBD;

}
	.button {
		@include button-skeleton;
		transition: 0.2s;
		&.primary {
			color: $blue;
			@include colours($blue, transparent);
			&:hover {
				@include colours($blue, darken($blue, 80%));
			}
			&:active {
				@include colours(darken($blue,20%), darken($blue, 100%) );
				
			}
		}
		&.secondary {
			color: $orange;
			@include colours($orange, transparent);
			&:hover {
				@include colours(darken($orange,10%), darken($orange, 58%) );
			}
			&:active {
				@include colours(darken($orange,10%), darken($orange, 90%));
				
			}
		}
		&.success {
			color: darken($green, 20%);
			@include colours($green, transparent );
			&:hover {
				@include colours(darken($green,10%), darken($green, 60%) );
			}
			&:active {
				@include colours(darken($green,10%), darken($green, 100%));
				
			}
		}
		&.error {
			color: $red;
			@include colours($red, transparent );
			&:hover {
				@include colours(darken($red,10%), darken($red, 58%) );
			}
			&:active {
				@include colours(darken($red,10%), darken($red, 62%));
				
			}
		}
		&.warning {
			color: darken($yellow, 10%);
			@include colours($yellow, transparent );
			&:hover {
				@include colours(darken($yellow,10%), darken($yellow, 55%) );
			}
			&:active {
				@include colours(darken($yellow,10%), darken($yellow, 60%));
				
			}
		}
		&.neutral {
			color: darken($grey, 5%);
			@include colours($grey, transparent);
			&:hover {
				@include colours(darken($grey,10%), darken($grey, 50%) );
			}
			&:active {
				@include colours(darken($grey,10%), darken($grey, 55%));
			}
		}
	}
}


		
	

Set 1 · Squared

Set 2 · Rounded

Set 3 · Circular

Set 4 · Irregular