.search {
    @apply relative;
    .search__input {
        @apply w-56 shadow-none rounded-full bg-slate-300/50 pr-8 transition-[width] duration-300 ease-in-out focus:border-transparent dark:bg-darkmode-400/70;
        &:focus {
            @apply w-72;
        }
    }
    .search__icon {
        @apply w-5 h-5 absolute my-auto inset-y-0 mr-3 right-0 text-slate-600;
    }
}

.top-bar-boxed {
    .search {
        .search__input {
            @apply bg-slate-200;
        }
    }
}
