/*
 * Jimmy Cerra
 * 15 Oct. 2021
 * MIT License
 * 
 * Copyright 2021 James Francis Cerra
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
 */

/* For SVG */
.defs {
	display: none;
}

/* For SVG */
.ellipse,
.tip {
	fill: currentColor;
}

/* For SVG toolbar icons */
.icon {
	background-color: var(--inactive-color);
	border: solid var(--inactive-border-color);
	border-radius: var(--icon-curves);
	border-width: var(--icon-borders);
	fill: none;
	height: var(--icon);
	stroke: currentColor;
	stroke-width: 10px; /* Internal to SVG used. */
	vertical-align: bottom;
	width: var(--icon);
}

.icon:hover {
	background-color: var(--hover-color);
	border-color: var(--hover-border-color);
}

/* for input in label or before it.*/
:checked ~ .icon,
:checked ~ label > .icon {
	background-color: var(--active-color);
	border-color: var(--active-border-color);
}

/* Smaller SVG icon */
.icon.more {
	border-radius: var(--more-curves);
	border-width: var(--more-borders);
	height: var(--more);
}

/* TODO: problems with touch. */
.icon.more:hover {
	background-color: var(--inactive-color);
	border-color: var(--inactive-border-color);
}

/* Toolbar goes in here. */
.toolbar {
	/* For showing prop popup beneath toolbar (over content) */
	position: relative;
}

/* For additional toolbar properties */
.toolbar details {
	visibility: hidden;
}

/* only show for props that are checked */
.toolbar :checked ~ details {
	visibility: visible;
}

/* for opened property detail */
.toolbar :checked ~ details[open] ~ label > .icon {
	border-radius: var(--icon-open-curves);
	border-width: var(--icon-open-borders);
}

/* Make height of more icon & hide triangle. */
.toolbar details > summary {
	line-height: var(--more);
	list-style: none; /* Don't show arrow. */
}

/* For browsers that don't support list-style (iOS Safari, android chrome) */
.toolbar details > summary::marker,
.toolbar details > summary::-webkit-details-marker {
    display: none;
}

.toolbar details[open] .icon {
	background-color: var(--active-color);
	border-color: var(--active-border-color);
}

.toolbar details[open] > ul {
	background-color: var(--alert-color);
	border: var(--border) solid var(--alert-border-color);
	border-radius: var(--alert-curves);
	padding-top: 1rem;
	padding-bottom: 1rem;
	
	/* 
	TODO: If want centered, for reference. 
	From https://www.w3.org/Style/Examples/007/center.en.html 
	left: 50%;
	margin: 0 -50% 0 0;
	position: absolute;
	transform: translate(-50%, 0); */
	
	/* Relative to .toolbar */
	position: absolute;
	left: 0;
	right: 0;
}

/* Tools to write on drawing pad */
.toolbar > ul,
ul.toolbar {
	align-items: start; /* so if props missing then still aligned */
	display: flex;
	margin: 0;
	overflow-x: auto;
	padding: 0 var(--curve) 0 var(--curve);
	scrollbar-width: none;
}

/* Fix until some browsers support scrollbar-width */
.toolbar > ul::-webkit-scrollbar,
ul.toolbar::-webkit-scrollbar {
	display: none;
}

/* Display toolbar items parts in a line too. */
.toolbar > ul > li,
ul.toolbar > li {
	display: flex;
	flex-direction: column-reverse; /* for space for details icon underneath */
	list-style: none;
	margin: 0;
	padding: 0;
}

/* For toolbar, use label and css to show instead */
input[name='tool'] {
	display: none;
}

/* For toolbar. */
label,
summary {
	cursor: pointer;
}