.pcr-app {
  border-radius: var(--radius-m);
  background: var(--background);
  transition: opacity .3s,visibility 0s .3s;
  font-family: "BC Variable";
  box-shadow: 0 0 8px 2px var(--dark-20);
}

.pickr {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}

.pickr .pcr-button {
  border: none;
  width: 100%;
  height: 100%
}

.pickr .pcr-button,
.pickr .pcr-button::after {
  border-radius: var(--radius-s);
}

.pickr .pcr-button::before {
  display: none;
}

.pcr-app .pcr-interaction .pcr-result {
  color: var(--text);
  transition: all .2s;
  border-radius: var(--radius-s);
  background: var(--input);
}

.pcr-app .pcr-interaction input {
  letter-spacing: normal;
  font-size: 1.2rem;
  color: var(--text);
  background: var(--foreground);
  border: none;
  border-radius: var(--radius-s);
  transition: all .15s;
  padding: 0.8rem 1.2rem;
  line-height: 120%;
}

.pcr-app .pcr-interaction input:not(input.pcr-result) {
  overflow: hidden;
	position: relative;
	transition: background var(--timing-s) 0ms;
}

.pcr-app .pcr-interaction input:not(input.pcr-result):hover {
  transition-delay: 250ms;
}

.pcr-app .pcr-interaction input:not(input.pcr-result):after {
	background-image: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, .25), transparent);
	content: "";
	height: 100%;
	left: 150%;
	position: absolute;
	top: 0;
	transform: skew(-20deg);
	width: 200%;
}

.pcr-app .pcr-interaction input:not(input.pcr-result):hover:after {
  animation: shine 750ms cubic-bezier(.01,.56,1,1);
}

@keyframes shine {
  100% {
    left: -200%;
  }
}

.pcr-app .pcr-interaction input:focus,
.pickr input:focus, .pickr input.pcr-active, .pickr button:focus, .pickr button.pcr-active, .pcr-app input:focus, .pcr-app input.pcr-active, .pcr-app button:focus, .pcr-app button.pcr-active {
  box-shadow: none;
}

.pcr-app .pcr-interaction .pcr-type.active {
  color: var(--light);
  background: var(--accent);
}

.pcr-app .pcr-interaction .pcr-save {
    border: 2px solid transparent;
  background-image: linear-gradient(var(--dark), var(--dark)), linear-gradient(114deg, #ff7448, #ff4848 51%, #6248ff 88%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

input.theme-gen__color-input {
  font-size: 1.4rem;
  border: none;
  margin: 0;
  background-color: transparent;
  padding: 0;
}

input[type=range].intensity-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.5rem;
  background: var(--foreground);
  outline: none;
  border-radius: var(--radius-full);
}

/* WebKit thumb */
.intensity-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.2rem;
  height: 3rem;
  background: var(--accent);
  border-radius: 8px;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}

/* Firefox thumb */
.intensity-range::-moz-range-thumb {
  width: 12px;
  height: 3rem;
  background: var(--accent);
  border-radius: 8px;
  cursor: pointer;
  border: none;
  transition: 0.1s ease-in-out;
}

/* Firefox track */
.intensity-range::-moz-range-track {
  background: var(--foreground);
}

/* Thumb darker on active */
.intensity-range:active::-webkit-slider-thumb {
  background: var(--accent);
}
.intensity-range:active::-moz-range-thumb {
  background: var(--accent);
}