.input-with-icon {
    position: relative;
}

.input-with-icon__input:not(.no-right-icon) {
    padding-right: 3rem !important;
}

.input-with-icon__input {
    padding-left: 3rem !important;
    position: relative;
    text-align: left;
    z-index: 1;
}

.input-with-icon__input::placeholder {
    color: var(--darker-grey);
}

.input-with-icon__icon {
    color: var(--darker-grey);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 2;
}

.input-with-icon__second-icon {
    color: var(--dark-grey);
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    z-index: 2;
}

.input-with-icon__second-icon.active {
    color: var(--brand-primary);
}

@media (max-width: 768px) {
    .input-with-icon {
        width: 100%;
    }
}