$border-width: 6px;
$border-radius: 12px;
$ratio: 3;

/* create comma-separated list of gradient stops */
$red: #ff1111;
$rainbow: ();
@for $i from 0 through 6 {
  $stop: adjust-hue($red, $i / 6 * 360deg);
  $rainbow: append($rainbow, $stop, comma); 
}

/* THE BORDER */

/* use a pseudoelement to scale the gradient horizontally so that colors are evenly distributed around the oblong input */
.gradient {
  display: inline-block;
  position: relative;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
     /* -1px to make up for a mysterious white gap that sometimes appears alongside the bottom edge in Chrome — to be investigated */
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: conic-gradient($rainbow);
    /* scaleX to distribute colors around the input;
       change to whatever your aspect ratio is or whatever you like */
    transform: scaleX($ratio);
    z-index: -1;
  }
}


/* ANIMATED BORDER */

.gradient.rotated::before {
  background: conic-gradient(from 125deg, $rainbow);
}

$ratio-sq: $ratio * $ratio;
@keyframes rotate-gradient {
  $rx: $ratio-sq;
  $ry: $ratio;
  0% { transform: scale($rx, $ry) rotate(0); }
  50% { transform: scale($rx, $ry) rotate(180deg); }
  99.9999% { transform: scale($rx, $ry) rotate(360deg); }
  100% { transform: scale($rx, $ry) rotate(0); }
}

@keyframes rotate-gradient-2 {
  0% { transform: scale($ratio * $ratio, $ratio) rotate(0); }
  50% { transform: scale($ratio, $ratio * $ratio) rotate(180deg); }
  99.9999% { transform: scale($ratio * $ratio, $ratio) rotate(360deg); }
  100% { transform: scale($ratio * 2, 2) rotate(0); }
}
.gradient.animated::before {
  animation: rotate-gradient 10s linear infinite;
}
.gradient.animated-2::before {
  animation: rotate-gradient-2 10s linear infinite;
}


/* ANIMATED INPUT BACKGROUND */

/* arbitrary stops for varied effect */
@keyframes slide {
  0% { background-position: 0%; }
  99.9999% { background-position: 500%; }
  100% { background-position: 0%; }
}

$opacity: 0.3;
$transparent-red: rgba($red, $opacity);
$transparent-rainbow: ($transparent-red);

@each $val in $rainbow {
  $transparent-rainbow: append($transparent-rainbow, rgba($val, $opacity), comma);
}

.input.animated {
  background-image: repeating-linear-gradient(-65deg, $transparent-rainbow);
  background-size: 500%;
  animation: slide 35s linear infinite;
}


/* OTHER STYLING */

.wrapper {
  border-radius: $border-radius;
  padding: $border-width;
  box-shadow: 1px 2px 7px 2px rgba(#333, 0.75);
}

.input {
  border-radius: $border-radius - $border-width;
  border: 1px solid #222;
  background: #37323c;
  color: #eee;
  box-shadow: 0 0 8px rgba(#111, 0.7) inset;
  padding: 0.85em 1em;
  font-size: 1em;
  width: 200px;
  
  &:focus {
    outline: none;
    box-shadow: 0 0 8px rgba(#eee, 0.7) inset;
  }
  &::placeholder {
    opacity: 0.65;
    color: #eee;
  }
}


/* IRRELEVANT */

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.3;
  > div {
  }
}

body,
.showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.showcase {
  padding: 4rem 0;
  > * {
    margin: 1em;
  }
}

.info {
  max-width: 40vw;
  margin: 0.5em 1em;
}