@import "../../scss/variables.scss";

.root {
  position: relative;
 
  @media (max-width: 1100px) {
    display: flex;
    justify-content: center;
    margin-right: 20px;
  }
}

.input {
  border: 1px solid var(--gray-line); 
  background-color: var(--w-background); 
  color: var(--black); 
  padding: 12px 20px;
  padding-left: 42px;
  border-radius: 10px;
  font-size: 16px;
  width: 100%;
  max-width: 500px;
  transition: background 0.3s, border 0.3s, color 0.3s;

  &:focus {
    border: 1px solid var(--black);
  }

  @media (max-width: 768px) {
    padding-left: 30px;
    width: 320px;
    max-width: 100%;
    margin-bottom: 15px;
    margin-top: 15px;
  }
}

.icon {
  width: 22px;
  height: 24px;
  opacity: 0.6;
  position: absolute;
  left: 14px;
  top: 50%; 
  transform: translateY(-50%);   transition: opacity 0.2s;

  @media (max-width: 768px) {
    left: 10px;   }
}

.clearIcon {
  width: 18px;
  height: 18px;
  opacity: 0.6;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);   cursor: pointer;
  transition: opacity 0.2s;

  &:hover {
    opacity: 0.8;
  }
}
