@import './_breakpoints.scss';
@import './_functions.scss';

@mixin padded-container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;

	@include for-iphone-se {
		padding-left: 0;
		padding-right: 0;
	}

	@include for-tablet-portrait-up {
		padding-right: 20px;
		padding-left: 20px;
	}

	@include for-tablet-landscape-up {
		padding-right: 30px;
		padding-left: 30px;
	}

	@include for-desktop-up {
		max-width: 1080px;
	}
}

// Defines a bunch of CSS variables for a given color
// In HEX, HSL and RGB formats
// Plus a contrast option for text
@mixin define-color($title, $color) {
	--color--#{$title}: #{$color};

	--color--#{$title}-h: #{hue($color)};
	--color--#{$title}-l: #{lightness($color)};
	--color--#{$title}-s: #{saturation($color)};
	--color--#{$title}-a: #{alpha($color)};

	--color--#{$title}-rgb: #{red($color)}, #{green($color)}, #{blue($color)};

	--color--#{$title}-contrast: #{if(
			brightness($color) > 186,
			var(--color--text),
			var(--color--text-inverse)
		)};
}
