.input {
  --text-color: #171637;
  --placeholder-color: #171637;
  --placeholder-color-hover: #171637;
  --close:#171637; 
  --close-light: #171637;
  --close-background: #F1F1FA;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap:wrap;
  position: relative;

  background: var(--background);
  box-shadow: inset 0 0 0 var(--border-width, 1px) var(--border, var(--border-default)), 0 1px 3px var(--shadow, var(--shadow-default));
  transition: box-shadow 0.2s;
  --clear-x: 0px;
  --clear-swipe-left: 0px;
  --clear-swipe-x: 0;
  --clear-swipe: 0px;
  --clear-scale: 0;
  --clear-rotate: 0deg;
  --clear-opacity: 0;
  --clear-arrow-o: 1;
  --clear-arrow-x: 0px;
  --clear-arrow-y: 0px;
  --clear-arrow-offset: 4px;
  --clear-arrow-offset-second: 4px;
  --clear-line-array: 8.5px;
  --clear-line-offset: 27px;
  --clear-long-array: 8.5px;
  --clear-long-offset: 24px;
}
.input.clearing, .input:focus-within {
  --border-width: 1.5px;
  --border: var(--border-active);
  --shadow: var(--shadow-active);
}
.input.clearing {
  --close-background: transparent;
  --clear-arrow-stroke: var(--close-light);
}
.input .text {
  flex-grow: 1;
}
.input .text input {
  -webkit-appearance: none;
  line-height: 24px;
  background: none;
  border: none;
  outline: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
}
.input .text input::-moz-placeholder {
  color: var(--placeholder-color);
  -moz-transition: color 0.2s;
  transition: color 0.2s;
}
.input .text input:-ms-input-placeholder {
  color: var(--placeholder-color);
  -ms-transition: color 0.2s;
  transition: color 0.2s;
}
.input .text input::placeholder {
  color: var(--placeholder-color);
  transition: color 0.2s;
}
.input:hover .text input::-moz-placeholder {
  color: var(--placeholder-color-hover);
}
.input:hover .text input:-ms-input-placeholder {
  color: var(--placeholder-color-hover);
}
.input:hover .text input::placeholder {
  color: var(--placeholder-color-hover);
}
.input .clear {
    -webkit-appearance: none;
    position: relative;
    outline: none;
    z-index: 1;
    padding: 0;
    margin: 0;
    border: none;
    background:unset;
    transition: background 0.2s;
    border-radius: 50%;
    opacity: var(--clear-opacity);
    transform: scale(var(--clear-scale)) translateZ(0);
    position: absolute;
    right: -6px;
    padding: 0;
    bottom: 4px;
}
.input .clear:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px;
  left: var(--clear-swipe-left);
  background: var(--background);
  transform-origin: 100% 50%;
  transform: translateX(var(--clear-swipe)) scaleX(var(--clear-swipe-x)) translateZ(0);
}
.input .clear svg {
  display: block;
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  outline: none;
  cursor: pointer;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--close);
  transform: translateX(var(--clear-x)) rotate(var(--clear-rotate)) translateZ(0);
}
.input .clear svg path {
  transition: stroke 0.2s;
}
.input .clear svg path.arrow {
  stroke: var(--clear-arrow-stroke, var(--close));
  stroke-dasharray: 4px;
  stroke-dashoffset: var(--clear-arrow-offset);
  opacity: var(--clear-arrow-o);
  transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);
}
.input .clear svg path.arrow:last-child {
  stroke-dashoffset: var(--clear-arrow-offset-second);
}
.input .clear svg path.line {
  stroke-dasharray: var(--clear-line-array) 28.5px;
  stroke-dashoffset: var(--clear-line-offset);
}
.input .clear svg path.long {
  stroke: var(--clear-arrow-stroke, var(--close));
  stroke-dasharray: var(--clear-long-array) 15.5px;
  stroke-dashoffset: var(--clear-long-offset);
  opacity: var(--clear-arrow-o);
  transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);
}
.input .clear, .input .clear:hover {
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}