$prefix: 'calc';

.#{$prefix}-buttonGrid {
	display: flex;
	flex-wrap: wrap;

	&_buttonLayout {
		box-sizing: border-box;
		flex-basis: calc(25% - #{$calc-button-grid-spacing});
		position: relative;

		&:nth-child(4n + 2),
		&:nth-child(4n + 3),
		&:nth-child(4n + 4) {
			margin-left: $calc-button-grid-spacing;
		}
		&:nth-child(n + 5) {
			margin-top: $calc-button-grid-spacing;
		}
	}
	&_buttonInnerLayout {
		height: 11vh;
		width: 100%;
	}
	&_button {
		display: table;
		height: 100%;
		left: 0;
		position: absolute;
		text-align: center;
		top: 0;
		width: 100%;

		&:active,
		&#{&}-active {
			// Provided by theme:
			// background-color: #f0f;
		}

		&#{&}-inefficient {
			&:active {
				// Provided by theme:
				// background-color: rgba(#f0f, 0.2);
			}
		}
	}
	&_buttonEnergy {
		// Provided by theme:
		// background-color: #f0f;
		// box-shadow: 0 0 1em rgba(#f0f, 1);

		bottom: 0;
		left: 0;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 0;
	}
	&_buttonText {
		color: #b7b7b7;
		font-size: 1.5rem;
		font-weight: 300;
		position: relative;
	}
	&_button#{&}_button-inefficient &_buttonText {
		opacity: 0.5;
	}
}
