[data-component='ToolAreaButton'] {
	position: absolute;
	z-index: 101;
	top: 20px;
	right: 20px;
	height: 36px;
	width: 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	> .button {
		flex: 0 0 auto;
		margin: 4px 0;
		background-position: center;
		background-size: 75%;
		background-repeat: no-repeat;
		background-color: rgba(#fff, 0.3);
		cursor: pointer;
		transition-property: opacity, background-color;
		transition-duration: 0.15s;
		border-radius: 100%;

		+desktop() {
			height: 36px;
			width: 36px;
		}

		+mobile() {
			height: 32px;
			width: 32px;
		}

		&.on {
			background-color: rgba(#fff, 0.7);
		}

		&.disabled {
			pointer-events: none;
			opacity: 0.5;
		}

		&.toolarea-button {
			background-image: url('/resources/images/icon_tool_area_white.svg');

			&.on {
				background-image: url('/resources/images/icon_tool_area_black.svg');
			}
		}
	}

	> .badge {
		border-radius: 50%;
		font-size: 1rem;
		background: #b12525;
		color: #fff;
		text-align: center;
		margin-top: -8px;
		line-height: 1rem;
		margin-right: -8px;
		position: absolute;
		padding: 0.2rem 0.4rem;
		top: 0;
		right: 0;

		&.long {
			border-radius: 25% / 50%;
		}
	}
}

[data-component='ToolArea'] {
	width: 100%;
	height: 100%;

	> .tabs {
		display: flex;
		flex-wrap: wrap;
		height: 100%;

		> label {
			order: 1;
			display: block;
			padding: 1vmin 0 0.8vmin 0;
			cursor: pointer;
			background: rgba(#000, 0.3);
			font-weight: bold;
			transition: background ease 0.2s;
			text-align: center;
			width: 33.33%;
			font-size: 1.3vmin;
			height: 3vmin;

			> .badge {
				padding: 0.1vmin 1vmin;
				text-align: center;
				font-weight: 300;
				font-size: 1.2vmin;
				color: #fff;
				background-color: #b12525;
				border-radius: 2px;
				margin-left: 1vmin;
			}
		}

		> .tab {
			order: 99;
			flex-grow: 1;
			width: 100%;
			height: 100%;
			display: none;
			padding: 1vmin;
			background: #fff;
		}

		> input[type="radio"] {
			display: none;
		}

		> input[type="radio"]:checked + label {
			background: #fff;
		}

		> input[type="radio"]:checked + label + .tab {
			display: block;
		}
	}
}