.expandable-input-top { display: flex; height: 22px; .svg-icon-wrapper { height: 17px; width: 17px; } .expandable-input-wrapper { display: flex; .svg-icon.search { height: 17px; width: 17px; } &.closed { .svg-icon.search { transition: fill 0.5s ease-in; fill: $blue; cursor: pointer; &:hover { transition: fill 0.5s ease-in; fill: $dark-blue; } } } &.opened { .svg-icon-wrapper { margin-left: 3px; } .svg-icon.search { fill: $dark-blue; } .svg-icon.close { margin-left: 7px; height: 10px; width: 10px; opacity: 0.6; fill: $dark-gray; &:hover { opacity: 1; } } } .expandable-input-control { .form-control { border: none; background-color: transparent; border-radius: 0; border-bottom: 1px solid $gray; height: 22px; padding: 0 5px; } margin: 0; } } }