$primary: #246e8a; $gray: #dbdbdb; .search { display: flex; flex-direction: column; position: relative; img{ cursor: pointer; } &__icon { width: 27px; position: absolute; top: 50%; transform: translateY(-50%); &Fa { left: 20px; } &En { right: 20px; } } &__x { width: 15px; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; &Fa { right: 15px; } &En { left: 10px; } &Active{ opacity: 1; } } input { padding: 15px 40px 15px 30px; font-size: 14px; border: 1.7px solid $gray; border-radius: 5px; background-color: inherit; &::placeholder { color: $gray; } &:focus { border-color: $primary; outline: 0px; color: #246e8a; &::placeholder { color: #246e8a; } } } } .en { direction: ltr; text-align: left; } .fa { direction: rtl; text-align: right; }