1@use 'sass:color';
  2
  3/*
  4 * Button mixin- creates a button effect with correct
  5 * highlights/shadows, based on a base color.
  6 */
  7@mixin button( $button-color, $button-text-color: #fff ) {
  8	background: $button-color;
  9	border-color: $button-color;
 10	color: $button-text-color;
 11
 12	&:hover,
 13	&:focus {
 14		background: color.adjust($button-color, $lightness: 3%);
 15		border-color: color.adjust($button-color, $lightness: -3%);
 16		color: $button-text-color;
 17	}
 18
 19	&:focus {
 20		box-shadow:
 21			0 0 0 1px #fff,
 22			0 0 0 3px $button-color;
 23	}
 24
 25	&:active {
 26		background: color.adjust($button-color, $lightness: -5%);
 27		border-color: color.adjust($button-color, $lightness: -5%);
 28		color: $button-text-color;
 29	}
 30
 31	&.active,
 32	&.active:focus,
 33	&.active:hover {
 34		background: $button-color;
 35		color: $button-text-color;
 36		border-color: color.adjust($button-color, $lightness: -15%);
 37		box-shadow: inset 0 2px 5px -3px color.adjust($button-color, $lightness: -50%);
 38	}
 39}
 40