@import 'surface';

@mixin button {
	@include surface;

	--disabled-color: var(--color);

	--enabled-color: var(--button-color, var(--primary));
	--on-enabled-color: var(--on-button-color, var(--on-primary));

	--border: none;
	--scrim: 0 0 transparent;
	--shadow: 0 0 transparent; // todo : add elevation

	color: RGBA(var(--enabled-color), var(--color-alpha, 1));
	background: RGBA(var(--on-enabled-color), var(--background-alpha, 0));

	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0 calc(var(--padding, 0) + var(--offset, 0));
	background-color: transparent; // override surface as bg set on ::before
	border: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	font-size: 1.4rem;
	font-weight: bold;
	font-family: var(--font-body);
	letter-spacing: 0.125rem;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	text-overflow: ellipsis;

	overflow: visible; // allow shadow to be visible
	user-select: none;
	cursor: pointer;
	z-index: 1;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: var(--offset, 0);
		right: var(--offset, 0);
		bottom: var(--offset, 0);
		left: var(--offset, 0);
		border-radius: var(--radius);
	}

	&::before {
		background-color: RGBA(var(--on-enabled-color), var(--background-alpha, 0));
		border: var(--border);
		box-shadow: var(--scrim), var(--shadow);
		transition: box-shadow 200ms; /* todo : use animation vars */
		z-index: -1;
	}

	&::after {
		/* todo : ripple state */
	}

	&:hover {
		--scrim: inset 0 0 0 50rem RGBA(var(--enabled-color), 0.12);
	}

	&:focus {
		--scrim: inset 0 0 0 50rem RGBA(var(--enabled-color), 0.24);
	}

	&.outlined {
		--border: 0.1rem solid RGBA(var(--button-outline-color, var(--on-enabled-color)), var(--button-outline-alpha, 0.24));
	}

	&.contained {
		@include contained;
	}

	&[disabled] {
		color: RGBA(var(--disabled-color), var(--color-alpha, 1));

		--color-alpha: 0.36;
		--scrim: none;
	}
}

@mixin contained {
	--shadow: var(--elevation-2dp);

	color: RGBA(var(--on-enabled-color), var(--color-alpha, 1));

	&:active {
		--shadow: var(--elevation-8dp);
	}

	&::before {
		background: RGBA(var(--enabled-color), var(--background-alpha, 1));
	}

	&[disabled]::before {
		background-color: RGBA(var(--disabled-color), var(--background-alpha, 0.12));
	}
}