$primary: #246e8a; $gray: #dbdbdb; $primary1: #EEFAFF; .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: $primary; &::placeholder { color: $primary; } } } &__populars{ margin-top: 10px; width: 100%; border: 1.7px solid $gray; border-radius: 5px; background-color: white; display: flex; flex-direction: column; list-style: none; position: absolute; top: 50px; left: 0px; opacity: 0; display: none; z-index: 100; &Active{ opacity: 1; display: flex; } strong{ width: 100%; padding: 15px 40px; font-size: 15px; } ul{ width : calc(100% - 80px); list-style: none; margin: 0px auto; padding: 0px; li{ padding: 15px 5px; &:hover{ background-color: $primary1; } cursor: pointer; font-size: 13px; } hr{ margin: 0px auto; margin: 0px; border: 0.5px solid #eee; } } } } .en { direction: ltr; text-align: left; } .fa { direction: rtl; text-align: right; }