/* CSS variables */

:root {
  --background-color: #f6f9fc;
  --bar-background-color: #f7f9fc;
  --card-background-color: #ffffff;
  --text-color: #121d2e;
  --border-color: #edf0f5;
  --input-color: #333;
  --input-background-color: #d8dce7;
  --button-background-color: #2253e6;
  --link-color: #121d2e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #171e36;
    --bar-background-color: #192038;
    --card-background-color: #1c243b;
    --text-color: #ffffff;
    --border-color: #16172a;
    --input-color: #ececec;
    --input-background-color: #0d1c2f;
    --button-background-color: #2253e6;
    --link-color: #ffffff;
  }
}

/* some default styles to make the view more native like */

.titlebar {
  -webkit-user-select: none;
  user-select: none;
}

html {
  box-sizing: border-box;
  background: var(--background-color);
  /* Prevent the page to be scrollable */
  overflow: hidden;
  /* Force the default cursor, even on text */
  cursor: default;
}

body {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  position: relative;

  /* Prevent the content from being selectionable */
  -webkit-user-select: none;
  user-select: none;
}

input, textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

[v-cloak] {
  display: none
}

/* Webview styles */

.wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100vh;
}

.header {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  justify-content: center;
  height: 70px;
  padding: 20px;
  position: relative;
  background: var(--bar-background-color);
  border-bottom: 1px solid var(--border-color);
  z-index: 3;
}

.header-title {
  color: var(--text-color);
  letter-spacing: 0.5px;
  font-weight: normal;
  font-size: 16px;
  margin: 0;
  opacity: 0.8;
}

.settings-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 15px;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-top: -7.5px;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0;
  outline: 0;
  opacity: 0.75;
  background-color: transparent;
  transition: opacity linear 0.1s;
}

.settings-button:active,
.settings-button:focus {
  opacity: 0.5;
}

.settings-button svg {
  width: 25px;
  height: 25px;
  stroke: var(--text-color);
}

.settings-menu {
  position: absolute;
  top: calc(100% - 10px);
  right: 15px;
  padding: 10px 0;
  min-width: 180px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--card-background-color);
  box-shadow: -5px 8px 15px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.settings-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.settings-menu ul {
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

.settings-menu ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-color);
  font-size: 14px;
  padding: 10px 20px;
}

.settings-menu ul li:hover {
  color: white;
  background-color: var(--button-background-color);
}

.settings-menu ul li:hover .dot {
  color: white;
}

.settings-menu ul li .dot {
  display: block;
  color: var(--button-background-color);
  font-size: 18px;
  line-height: 14px;
  margin-left: 20px;
}

.body {
  flex: 1;
  position: relative;
  z-index: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.footer {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 15px 20px;
  background: var(--bar-background-color);
  border-top: 1px solid var(--border-color);
  z-index: 2;
}

.buttons-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.button {
  display: block;
  color: white;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2px;
  padding: 15px;
  border-radius: 5px;
  background: var(--button-background-color);
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0;
  outline: 0;
  transition: background linear 0.1s;
}

.button:active:not(:disabled),
.button:focus:not(:disabled) {
  background: #1840b8;
}

.button:disabled {
  opacity: 0.5;
}

.button.in-footer {
  padding: 0 15px;
  height: 100%;
  margin-left: 15px;
}

.button.simple {
  color: var(--link-color);
  background-color: transparent !important;
  transition: opacity linear 0.1s;
}

.button.simple:active,
.button.simple:focus {
  opacity: 0.5;
}

.select-container {
  position: relative;
  padding: 0 20px;
}

.select-container svg {
  position: absolute;
  pointer-events: none;
  top: 50%;
  right: 30px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  stroke: var(--text-color);
  z-index: 2;
}

.select {
  color: var(--text-color);
  letter-spacing: 0.25px;
  font-size: 14px;
  position: relative;
  width: 100%;
  height: 40px;
  padding: 0 45px 0 15px;
  background: var(--input-background-color);
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0;
  outline: 0;
  z-index: 1;
}

.small-heading {
  color: var(--text-color);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
  padding: 20px 20px 15px 20px;
  margin: 0;
  opacity: 0.6;
}

.colors-list {
  padding: 20px 20px 5px 20px;
}

.color-theme {
  border-radius: 5px;
  background: var(--card-background-color);
  border: 1px solid var(--border-color);
  margin-bottom: 15px;
}

.color-theme-header {
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
}

.color-theme-header-title {
  color: var(--text-color);
  letter-spacing: 0.25px;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  opacity: 0.9;
}

.color-theme-body {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.color-theme-body:hover .color-theme-preview:after {
  opacity: 1;
}

.color-theme-body:hover .color-theme-input-label {
  opacity: 0.5;
}

.color-theme-body:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  margin-left: -1px;
  background: var(--border-color);
  z-index: 2;
}

.color-theme-body-section {
  display: flex;
  justify-content: space-between;
  width: 50%;
  height: 100%;
  padding: 15px;
}

.color-theme-preview {
  flex-shrink: 0;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
}

.color-theme-swatch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  -webkit-clip-path: circle(50% at 50% 50%);
  z-index: 1;
}

.color-theme-swatch-background {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background-repeat: repeat;
  background-size: auto;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyElEQVQ4T31TwQ3EMAg7trjsv1tolzgqIhkZF10+bVpjbIfY3js+soz237XaX4CBsYkAFQliAi1OXBEkmAH5rgRZgO94mu8dLw+DBTSA9GoGCwzgLmlBi1nJscDyjy+ysyTEV+CwMJEkWE+Bu7cQlRl7WMAe9uqkInqG7D9Bt3tLHhZLSRLo0bAad2+Z6HEbE0wymUBzOmrUgg7L5V6CpqBLAY8vB5UK/q2mYJp1WFB7NcqTBbbBBHpXTga/iJpEvsbowBlMd+YBR9+Ee6Ut7xEAAAAASUVORK5CYII=");
}

.color-theme-swatch-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.color-theme-preview:after {
  position: absolute;
  top: -4px;
  left: -6px;
  font-size: 14px;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity linear 0.2s;
}

.color-theme-preview.light:after {
  content: '☀️';
}

.color-theme-preview.dark:after {
  content: '🌒';
}

.color-theme-fieldset {
  display: flex;
  align-items: center;
  flex: 1;
  width: calc(100% -55px);
  padding: 0 0 0 15px;
  position: relative;
}

.color-theme-fieldset:hover .color-theme-picker-icon {
  opacity: 1;
}

.color-theme-fieldset-section {
  flex: 1;
  min-width: 1px;
}

.color-theme-fieldset-section.small {
  flex-shrink: 0;
  max-width: 30%;
  margin-left: 5%;
}

.color-theme-input {
  position: relative;
  width: 100%;
  min-width: 0;
  color: var(--input-color);
  font-family: monospace;
  font-size: 16px;
  padding: 10px 40px 10px 10px;
  border-radius: 5px;
  background: var(--input-background-color);
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0;
  outline: 0;
}

.color-theme-input::-webkit-inner-spin-button,
.color-theme-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.color-theme-input.hex,
.color-theme-input-wrapper {
  flex: 1;
  min-width: 1px;
}

.color-theme-input.alpha {
  padding: 10px;
}

.color-theme-input-label {
  display: block;
  color: var(--text-color);
  font-size: 12px;
  padding-top: 5px;
  opacity: 0;
  transition: opacity linear 0.2s;
}

.color-theme-picker {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  z-index: 3;
}

.color-theme-picker-icon {
  font-size: 16px;
  opacity: 0;
  transition: opacity linear 0.1s;
}

.color-theme-input:focus {
  box-shadow: 0 0 3px 1px rgb(34, 83, 230);
}

.donate {
  display: flex;
  align-items: center;
  color: var(--link-color);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: opacity linear 0.1s;
}

.donate:active,
.donate:focus {
  opacity: 0.5;
}

.donate span {
  display: inline-block;
  font-size: 13px;
  margin-left: 5px;
}

.error-message {
  color: var(--text-color);
  text-align: center;
  padding: 50px 50px;
  margin: 0 auto;
}

.error-message-title {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 25px;
}

.error-message-description {
  line-height: 1.5;
  font-size: 14px;
  max-width: 90%;
  margin: 0 auto 20px;
  opacity: 0.8;
}

.error-message-image {
  display: block;
  width: 324px;
  height: auto;
  margin: 0 auto;
}

/* Verte */

.verte {
  position: relative;
  display: flex;
  justify-content: center;
  top: 7px;
  z-index: 3;
}

.verte * {
  box-sizing: border-box;
}

.verte--loading {
  opacity: 0;
}

.verte__guide {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
}
.verte__guide:focus {
  outline: 0;
}

.verte__guide svg {
  width: 100%;
  height: 100%;
  fill: inherit;
}

.verte__menu {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 250px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-color: var(--background-color);
  will-change: transform;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.verte__menu:focus {
  outline: none;
}

.verte__menu-origin {
  display: none;
  position: absolute;
  z-index: 10;
}

.verte__menu-origin--active {
  display: flex;
}

.verte__menu-origin--static {
  position: static;
  z-index: initial;
}

.verte__menu-origin--top {
  bottom: 50px;
}

.verte__menu-origin--bottom {
  top: 50px;
}

.verte__menu-origin--right {
  right: 0;
}

.verte__menu-origin--left {
  left: 0;
}

.verte__menu-origin--center {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.25);
}

.verte__menu-origin:focus {
  outline: none;
}

.verte__controller {
  padding: 0 20px 20px;
}

.verte__controller .slider {
  display: none !important;
}

.verte__recent {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.verte__recent-color {
  margin: 4px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(45deg, rgba(112, 128, 144, 0.5) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(112, 128, 144, 0.5) 75%), linear-gradient(-45deg, rgba(112, 128, 144, 0.5) 25%, transparent 25%), linear-gradient(-45deg, transparent 75%, rgba(112, 128, 144, 0.5) 75%);
  background-size: 6px 6px;
  background-position: 0 0, 3px -3px, 0 3px, -3px 0px;
  overflow: hidden;
}

.verte__recent-color:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
}

.verte__value {
  padding: 0.6em;
  width: 100%;
  border: 1px solid #708090;
  border-radius: 6px 0 0 6px;
  text-align: center;
  font-size: 12px;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.verte__value:focus {
  outline: none;
  border-color: var(--button-background-color);
}

.verte__icon {
  width: 20px;
  height: 20px;
}

.verte__icon--small {
  width: 12px;
  height: 12px;
}

.verte__input {
  color: var(--input-color);
  font-family: monospace;
  font-size: 16px;
  flex: 1;
  padding: 10px;
  margin: 0 1px;
  min-width: 1px;
  text-align: center;
  border: 0;
  border-radius: 5px;
  background: var(--input-background-color);
  outline: 0;
  appearance: none;
  -moz-appearance: textfield;
}

.verte__input:focus {
  box-shadow: 0 0 3px 1px rgb(34, 83, 230);
}

.verte__input::-webkit-inner-spin-button,
.verte__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.verte__inputs {
  display: flex;
  font-size: 16px;
  margin-bottom: 5px;
}

.verte__draggable {
  border-radius: 6px 6px 0 0;
  height: 8px;
  width: 100%;
  cursor: grab;
  background: linear-gradient(90deg, #fff 2px, transparent 1%) center, linear-gradient(#fff 2px, transparent 1%) center, rgba(112, 128, 144, 0.2);
  background-size: 4px 4px;
}

.verte__model {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1px;
  margin-right: 10px;
  border: 0;
  text-align: center;
  cursor: pointer;
  background-color: transparent;
  font-weight: 700;
  color: #708090;
  fill: #708090;
  outline: none;
}

.verte__model:hover {
  fill: var(--button-background-color);
  color: var(--button-background-color);
}

.verte__submit {
  display: none !important;
}

.verte__close {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  cursor: pointer;
  border-radius: 50%;
  border: 0;
  transform: translate(50%, -50%);
  background-color: rgba(0, 0, 0, 0.4);
  fill: #fff;
  outline: none;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.verte__close:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

/*# sourceMappingURL=Verte.vue.map */
.verte-picker {
  width: 100%;
  margin: 0 auto 10px;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
}

.verte-picker--wheel {
  margin-top: 20px;
}

.verte-picker__origin {
  user-select: none;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

.verte-picker__slider {
  margin: 20px 20px 0;
}

.verte-picker__canvas {
  display: block;
  border-radius: 5px;
}

.verte-picker__cursor {
  position: absolute;
  top: 0;
  left: 0;
  margin: -6px;
  width: 12px;
  height: 12px;
  border: 1px solid #fff;
  border-radius: 50%;
  will-change: transform;
  pointer-events: none;
  background-color: transparent;
  box-shadow: #fff 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px;
}

.verte-picker__input {
  display: flex;
  margin-bottom: 10px;
}

/*# sourceMappingURL=Picker.vue.map */
.slider {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size: 20px;
}

.slider:hover .slider-label,
.slider--dragging .slider-label {
  visibility: visible;
  opacity: 1;
}

.slider__input {
  margin-bottom: 0;
  padding: 0.3em;
  margin-left: 0.2em;
  max-width: 70px;
  width: 20%;
  border: 0;
  text-align: center;
  font-size: 12px;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.slider__input::-webkit-inner-spin-button,
.slider__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.slider__input:focus {
  outline: none;
  border-color: #1a3aff;
}

.slider__track {
  position: relative;
  flex: 1;
  margin: 3px;
  width: auto;
  height: 8px;
  background: #fff;
  will-change: transfom;
  background-image: linear-gradient(45deg, rgba(112, 128, 144, 0.5) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(112, 128, 144, 0.5) 75%), linear-gradient(-45deg, rgba(112, 128, 144, 0.5) 25%, transparent 25%), linear-gradient(-45deg, transparent 75%, rgba(112, 128, 144, 0.5) 75%);
  background-size: 6px 6px;
  background-position: 0 0, 3px -3px, 0 3px, -3px 0px;
  border-radius: 10px;
}

.slider__handle {
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  color: #000;
  margin: -2px 0 0 -8px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  background-color: currentColor;
  border-radius: 50%;
  box-shadow: 0 1px 4px -2px black;
}

.slider__label {
  position: absolute;
  top: -3em;
  left: 0.4em;
  z-index: 999;
  visibility: hidden;
  padding: 6px;
  min-width: 3em;
  border-radius: 6px;
  background-color: #000;
  color: #fff;
  text-align: center;
  font-size: 12px;
  line-height: 1em;
  opacity: 0;
  transform: translate(-50%, 0);
  white-space: nowrap;
}

.slider__label:before {
  position: absolute;
  bottom: -0.6em;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  border-width: 0.6em 0.6em 0 0.6em;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
  content: '';
  transform: translate3d(-50%, 0, 0);
}

.slider__fill {
  width: 100%;
  height: 100%;
  transform-origin: left top;
  border-radius: 10px;
}
