LiveAtlas/src/scss/_placeholders.scss

%button {
	appearance: none;
	border: none;
	box-shadow: none;
	background-color: $global-background;
	color: $global-text-color;
	border-radius: $global-border-radius;
	cursor: pointer;
	display: block;
	text-align: center;
	position: relative;
	transition: color 0.2s ease-in, background-color 0.2s ease-in;

	&:hover, &.active {
		background-color: #cccccc;
		color: #222222;
	}

	&:focus {
		outline-color: #cccccc;
		outline-width: 0.2rem;
	}

	&:active {
		background-color: #eeeeee;
		color: #121212;
	}

	.svg-icon {
		display: inline-block;
		width: 3rem;
		height: 3rem;

		&:only-child {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}
	}
}

%panel {
	background-color: $global-background;
	color: $global-text-color;
	border-radius: $global-border-radius;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	position: relative;
	box-shadow: 0 0 1.5rem 0 #121212;

	h2:first-child {
		margin-top: 0;
	}
}