﻿.input-icon,
.textarea-icon {
    position: relative;
    width: 100%;
}

    .input-icon input,
    .textarea-icon textarea {
        width: 100%;
    }

    .input-icon.leading-icon input,
    .textarea-icon.leading-icon textarea {
        padding-left: 38px;
        padding-right: 10px;
    }

    .input-icon.trailing-icon input {
        padding-right: 35px;
    }

    .input-icon.leading-icon::before,
    .textarea-icon.leading-icon::before {
        content: "";
        background-size: contain;
        position: absolute;
        left: 12px;
        transform: translateY(-50%);
        background-repeat: no-repeat;
        background-position: center;
    }

    .input-icon.leading-icon::before {
        width: 16px;
        height: 16px;
        top: 50%;
    }

    .textarea-icon.leading-icon::before {
        width: 20px;
        height: 20px;
        top: 18%;
    }

    .input-icon.trailing-icon::after {
        content: "";
        width: 20px;
        height: 20px;
        background-size: contain;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .input-icon.leading-icon.leading-icon--user::before {
        background: url("/assets/media/image-icons/input-user.svg");
    }

    .input-icon.trailing-icon.trailing-icon--search::after {
        background: url("/assets/media/image-icons/input-search.svg");
    }

    .input-icon.trailing-icon.trailing-icon--eye::after {
        background-image: url("/assets/media/image-icons/input-eye.svg");
    }

    .input-icon.trailing-icon.trailing-icon--eye-slash::after {
        background-image: url("/assets/media/image-icons/input-eye-close.svg");
    }

    .input-icon.trailing-icon.trailing-icon--calendar::after {
        background-image: url("/assets/media/image-icons/input-calendar.svg");
    }

/*    .input-icon.trailing-icon.trailing-icon--time::after {
        background-image: url("/assets/media/icons/time.svg");
    }

    .input-icon.trailing-icon.trailing-icon--calendar::after {
        background-image: url("/assets/media/icons/calendar.svg");
    }

    .input-icon.trailing-icon.trailing-icon--search::after {
        background-image: url("/assets/media/icons/search.svg");
    }*/
