:root {
  --kanvas-font: 'NotoSans';
}

.kanvas { width: 100%; height: 100%; min-height: 128px; min-width: 128px; margin: auto; }
.kanvas-wrapper { width: fit-content; height: fit-content; font-family: var(--kanvas-font); width: 100%; height: 100%; min-height: 100%; }
.kanvas-toolbar { font-size: var(--kanvas-size); line-height: calc(2 * var(--kanvas-size)); vertical-align: middle; opacity: 0%; background-color: black; min-width: 100%; position: sticky; top: 0; left:0; z-index:1; }
.kanvas-toolbar.active { opacity: 100%; transition: opacity,background-color 0.2s ease-in; background-color: hsl(var(--kanvas-color), 0%, 10%); }
.kanvas-toolbar span { filter: drop-shadow(2px 2px 2px hsl(var(--kanvas-color), 50%, 0%)); }

.kanvas-toolbar input[type='range'] { display: unset; }
.kanvas-toolbar input[type="number"] { background-color: transparent; border: none; font-family: 'NotoSans'; font-size: 0.8em; width: 3.8em; color: hsl(var(--kanvas-color), 0%, 85%); padding: 0; text-align: right; }
.kanvas-toolbar input[type="number"]:focus { outline: none; }

.konvajs-content { background: black; width: fit-content !important; height: fit-content !important; }
.kanvas-separator { opacity: 0.3; font-size: calc(1.1 * var(--kanvas-size)); position: relative; vertical-align: top; line-height: 1.6em; margin-right: -4px; cursor: pointer; filter: blur(1px) !important; }

.kanvas-section { display: none; opacity: 0.0; }
.kanvas-section.active { display: inline; opacity: 0.75; animation: kanvas-fade-in 0.5s ease-in forwards; }

.kanvas-button { color: hsl(var(--kanvas-color), 0%, 85%); padding: 0.3em 0.3em 0.3em 0.4em; border-radius: 4px; cursor: pointer; user-select: none; transition: background-color 0.3s ease; margin-right: -4px; letter-spacing: 2px; }
.kanvas-button:hover { background-color: hsl(var(--kanvas-color), 50%, 40%); }
.kanvas-button.active { background-color: hsl(var(--kanvas-color), 50%, 20%); }
.kanvas-button.disabled { opacity: 0.5; }
.kanvas-button.disabled:hover { opacity: 0.5; background-color: transparent; }

.kanvas-paint-controls { display: flex; align-items: center; vertical-align: top; }

.kanvas-slider { padding: 0; margin-top: calc(var(--kanvas-size)/-4); width: calc(4 * var(--kanvas-size)) !important; height: calc(0.6*var(--kanvas-size)); background-color: hsl(var(--kanvas-color), 0%, 25%) !important; overflow: hidden; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: 4px; vertical-align: middle; min-height: calc(0.6*var(--kanvas-size)); max-height: calc(0.6*var(--kanvas-size));}
.kanvas-slider::-webkit-slider-thumb { height: calc(0.6*var(--kanvas-size)); width: calc(0.8*var(--kanvas-size)); background-color: hsl(180, 54%, 61%); border-radius: 4px; }
.kanvas-slider::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; }
.kanvas-slider::-moz-range-thumb { height: calc(0.6*var(--kanvas-size)); width: calc(0.8*var(--kanvas-size)); background-color: hsl(180, 54%, 61%); }
.kanvas-slider::-moz-range-track, input[type='range']::-webkit-slider-runnable-track { border: none; background: none; width: 100%; height: 100%; }
.kanvas-slider::after { display: none; }

.kanvas-select { background: transparent; color: hsl(var(--kanvas-color), 0%, 85%); border: none; }
.kanvas-select option { background: hsl(var(--kanvas-color), 0%, 20%); color: hsl(var(--kanvas-color), 0%, 85%); border: none; list-style: none; }
.kanvas-select:hover { background-color: hsl(var(--kanvas-color), 50%, 50%); }
.kanvas-select:focus { outline: none; border: none; box-shadow: none; }

.kanvas-colorpicker { width: calc(2 * var(--kanvas-size)); border: none; padding: 0; margin: 0; cursor: pointer; background: unset; vertical-align: middle; }

.kanvas-textbox { border: none; background: hsl(var(--kanvas-color), 0%, 80%); width: calc(6 * var(--kanvas-size)); border-radius: 4px; }
.kanvas-textbox:focus { outline: none; border: none; box-shadow: none; }

.kanvas-text { font-size: 0.7em; cursor: pointer; opacity: 0.75; }
.kanvas-text.active { display: inline; opacity: 0.75; animation: kanvas-fade-in 1.0s ease-in forwards; }

.kanvas-settings { position: absolute; background: hsl(var(--kanvas-color), 0%, 10%); margin-top: 1em; margin-left: 1em; padding: 0.5em; border-radius: 4px; filter: drop-shadow(2px 2px 2px hsl(var(--kanvas-color), 50%, 0%)); top: calc(4 * var(--kanvas-size)); display: none; }

.kanvas-settings label { display: inline-block; min-width: 180px; line-height: 2.4em; }

.kanvas-size label { font-family: 'NotoSans'; font-size: 0.8em; vertical-align: top; }

@keyframes kanvas-fade-in {
  0% { opacity: 0; display: none; }
  100% { opacity: 0.75; display: inline; }
}