input {
  border-style: none;
  background: transparent;
  outline: none;
}

/*colors*/
:root {
  --input-background: #42424d;
  --input-text-inactive: #7881a1;
  --input-text-active: #bfd2ff;
}

/*gradient animation*/
@keyframes gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.webflow-style-input {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 400px;
  margin: 0;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 1.4rem 2rem 1.6rem;
  background: var(--input-background);
  &:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 999;
    height: 2px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    background-position: 0% 0%;
    background: linear-gradient(
      to right,
      #b294ff,
      #57e6e6,
      #feffb8,
      #57e6e6,
      #b294ff,
      #57e6e6
    );
    background-size: 500% auto;
    animation: gradient 3s linear infinite;
  }
}

.webflow-style-input input {
  flex-grow: 1;
  color: var(--input-text-active);
  font-size: 1rem;
  line-height: 1.5rem;
  vertical-align: middle;
  &::-webkit-input-placeholder {
    color: var(--input-text-inactive);
  }
}

.webflow-style-input button {
  color: var(--input-text-inactive);
  font-size: 2.4rem;
  line-height: 2.4rem;
  vertical-align: middle;
  transition: color 0.25s;
  &:hover {
    color: var(--input-text-active);
  }
}