.bs-input {
  --hover-border: 0 0 0 4px var(--bs-primary-color-light-4);
  --border-color: var(--bs-primary-border-color);
  --radius: var(--bs-radius);

  box-sizing: border-box;
  display: inline-block;
  outline: none;
  font-weight: 400;
  padding: 10px 32px 10px 16px;
  line-height: 36.5px;
  height: 36.5px;
  border: 1px solid transparent;
  background: #f3f3f4;
  color: #0d0c22;
  border-radius: var(--radius);
  transition: var(--bs-transition);
  
  &.border {
    &:hover {
      background: #fff;
      box-shadow: var(--hover-border);
    }

    &:focus {
      background: #fff;
      border-color: var(--border-color);
      box-shadow: var(--hover-border);
      animation: ani-focus var(--bs-ani-duration) 1;
    }
  }
}

.bs-input-group {
  display: inline-block;
  position: relative;
  input:focus + .search {
    color: inherit;
  }
  .search {
    transition: var(--bs-transition);
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    right: 6px;
    color: var(--bs-font-color-1);
  }
}

@keyframes ani-focus {
  0% {
    box-shadow: none;
    border: 1px solid transparent;
  }
  to {
    background: #fff;
    border-color: var(--border-color);
    box-shadow: var(--hover-border);
  }
}
