/*
 * Loading Spinner
 */
.spinner {
  --spinner-size: 50px;
  position: fixed;
  width: var(--spinner-size);
  height: var(--spinner-size);
  opacity: 1;
  transform: scale(1);
  perspective: 1000px;
  transition: opacity 0.5s var(--ease-in-out-cubic), transform 0.75s var(--ease-in-out-cubic); }

.spinner--viewport {
  --spinner-size: 200px;
  left: calc(50vw - var(--spinner-size) / 2);
  margin: calc(50vh - var(--spinner-size) / 2) 0;
  z-index: 1000; }

.spinner__line {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%; }
  .spinner__line:nth-child(1) {
    animation: spinner-line 10s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
    border-bottom: calc(var(--spinner-size) / 12) solid #AAAA; }
  .spinner__line:nth-child(2) {
    animation: spinner-line 10s -5s cubic-bezier(0.445, 0.05, 0.55, 0.95) reverse infinite;
    border-top: calc(var(--spinner-size) / 12) solid #AAAA; }

@keyframes spinner-line {
  16.7% {
    transform: rotateX(30deg) rotateY(-60deg) rotateZ(0deg); }
  33.3% {
    transform: rotateX(-15deg) rotateY(15deg) rotateZ(360deg); }
  50% {
    transform: rotateX(30deg) rotateY(-15deg) rotateZ(0deg); }
  66.7% {
    transform: rotateX(-15deg) rotateY(30deg) rotateZ(360deg); }
  83.3% {
    transform: rotateX(30deg) rotateY(15deg) rotateZ(0deg); }
  0%, 100% {
    transform: rotateX(-15deg) rotateY(60deg) rotateZ(360deg); } }

/**
 * ColourPicker Stylesheet
 * A pure TypeScript colour picker (OK and some CSS)
 * https://github.com/lrvolle/ColourPicker
 */

.colour-picker {
	width: 220px;
	padding: 6px;
	display: flex;
	flex-flow: column;
	align-items: center;
	border: 1px solid rgba(200, 200, 200, 0.5);
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	background-color: #FFF;
	touch-action: none;
}

.colour-field {
	position: relative;
	width: 100%;
	height: 200px;
	background: linear-gradient(to right, #FFF, #F00);
}

.colour-field .colour-field__lightness {
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
	user-select: none;
	pointer-events: none;
}

.colour-field .colour-field__marker {
	position: absolute;
	bottom: calc(100% - 10px / 2);
	left: calc(100% - 10px / 2);
	width: 10px;
	height: 10px;
	border: 1px solid #ffffff;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0 0 1px 1px #000000;
}

.hue-slider {
	position: relative;
	height: 13px;
	width: calc(100% - 8px);
	padding: 1px;
	margin: 8px 4px 9px 0;
	user-select: none;
}

.hue-slider .hue-slider__gradient {
	height: 100%;
	width: calc(100% + 3px);
	margin-right: -2px;
	border-radius: 2px;
	background: linear-gradient(to right, #F00 0%, #FF0 17%, #0F0 33%, #0FF 50%, #00F 67%, #F0F 83%, #F00 100%);
}

.hue-slider .hue-slider__handle {
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 100%;
	border: 1px solid #ffffff;
	border-radius: 2px;
	box-sizing: border-box;
	box-shadow: 0 0 1px 1px #000000;
	pointer-events: none;
}

.colour-inputs {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.colour-input {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #444;
}

.colour-input>input {
	width: 30px;
	font-size: 12px;
	text-align: center;
	color: inherit;
	border: 1px solid rgba(200, 200, 200, 0.5);
	border-radius: 2px;
	-webkit-appearance: none;
}

.colour-input .colour-input__hex {
	width: 70px;
}

.colour-input .colour-input__lbl {
	margin-top: 3px;
	user-select: none;
}

.reset-colour-button {
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 4px;
	padding: 6px 0;
	border-radius: 3px;
	user-select: none;
	cursor: pointer;
}

.reset-colour-button:hover {
	background-color: rgba(200, 200, 200, 0.2);
}

.reset-colour-button__icon {
	height: 22px;
	width: 22px;
	margin: 0 6px;
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23606060"%3E%3Cpath d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none"/%3E%3Cpath d="M18 14c0-4-6-10.8-6-10.8s-1.33 1.51-2.73 3.52l8.59 8.59c.09-.42.14-.86.14-1.31zm-.88 3.12L12.5 12.5 5.27 5.27 4 6.55l3.32 3.32C6.55 11.32 6 12.79 6 14c0 3.31 2.69 6 6 6 1.52 0 2.9-.57 3.96-1.5l2.63 2.63 1.27-1.27-2.74-2.74z"/%3E%3C/svg%3E');
	background-size: 22px 22px;
	background-repeat: no-repeat;
}

.colour-option-grid {
	width: 100%;
	margin-top: 4px;
	display: grid;
	grid-template-columns: repeat(auto-fill, 21px);
	grid-gap: 3px;
	justify-content: center;
}

.colour-palette-spacer {
	height: 3px;
}

.colour-option {
	position: relative;
	height: 21px;
	width: 21px;
	box-sizing: border-box;
	border-radius: 4px;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.2s ease;
}

.colour-option:hover {
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.colour-option:hover .colour-option-delete {
	display: block;
	opacity: 1;
}

.colour-option-delete {
	display: none;
	position: absolute;
	top: -5px;
	right: -5px;
	width: 13px;
	height: 13px;
	box-sizing: border-box;
	transform: scale(1);
	z-index: 1;
	opacity: 0;
	box-shadow: 0 0 2px #FFF;
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 12 12'%3E%3Cdefs%3E%3Ccircle id='a' cx='6' cy='6' r='6'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cuse fill='%23ED6868' xlink:href='%23a'/%3E%3Ccircle cx='6' cy='6' r='5.5' stroke='%232A2D34' stroke-opacity='.1'/%3E%3Cpath fill='%23FFF' d='M6.64 6l2.23 2.23a.45.45 0 01-.64.64L6 6.64 3.77 8.87a.45.45 0 01-.64-.64L5.36 6 3.13 3.77a.45.45 0 01.64-.64L6 5.36l2.23-2.23a.45.45 0 01.64.64L6.64 6z'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	transition: all 0.1s ease;
}

.colour-option-delete:hover {
	transform: scale(1.1);
}

.colour-option-add {
	border: 1px solid rgba(200, 200, 200, 0.5);
	background-image: url('data:image/svg+xml,%3Csvg width="13" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M11.2 7.4a.8.8 0 1 0 0-1.7H7.4V1.8a.8.8 0 0 0-1.7 0v3.9H1.8a.8.8 0 1 0 0 1.7h3.9v3.8a.8.8 0 0 0 1.7 0V7.4h3.8z" fill="%23C8C8C8"/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-position: center;
	transition: all 0s ease;
}

.colour-option-add:hover {
	background-color: #c8c8c8;
	background-image: url('data:image/svg+xml,%3Csvg width="13" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M11.2 7.4a.8.8 0 1 0 0-1.7H7.4V1.8a.8.8 0 0 0-1.7 0v3.9H1.8a.8.8 0 1 0 0 1.7h3.9v3.8a.8.8 0 0 0 1.7 0V7.4h3.8z" fill="%23FFFFFF"/%3E%3C/svg%3E');
	transition: all 0.1s ease;
}