@use "sass:math";

$button-background-colors: (
  'primary': $primary,
  'secondary': $secondary,
	'tertiary': $tertiary,
	'offwhite': $offwhite,
  'white': white,
  'black': black,
);

$button-outline-colors: (
	'primary': $primary,
	'secondary': $secondary,
	'tertiary': $tertiary,
	'offwhite': $offwhite,
	'white': white,
	'black': black,
);

.button {
	// For the moment, these are defined as little mixins over in __vars/mixins
	// so they can be included elsewhere

	@include button;

	// Sizes

	&--xs {
		@include button--xs;
	}

	&--sm {
		@include button--sm;
	}

	&--lg {
		@include button--lg;
	}

	// Layout

	&--block {
		@include button--block;
	}

	&--icon {

	}

	&--wider {
		@include button--block;
		padding-left: 2em;
		padding-right: 2em;
		max-width: math.div($line-length-max, 1.5);
	}

	// Colours

	@each $name, $value in $button-background-colors {
	  &--#{$name} {
	    @include button--background($value);
			--color: #{choose-contrast-color-prefer-white($value)};
	  }
	}

	// Outlines

	@each $name, $value in $button-outline-colors {
		&--outline-#{$name} {
			@include button--outline($value);
		}
	}

	// Icons

	&--pointy {
		@include button--pointy;
	}

	.icon {
		&:where(:not(.icon--margin-before)) {
			margin-right: 0.65em;
		}

		&:where(:not(.icon--native-fill)) {
			svg, path {
				fill: var(--color);
			}
		}
	}

	* ~ .icon {
		margin-left: 0.65em;
		margin-right: 0;
	}

	// States

	&[disabled] {
		@include button--disabled;
	}
}