@import "../scss/vars";

.input {
    display: block;
    max-width: 100%;

    &__text {
        border: 1px solid $grey;
        border-radius: 3px;
        padding: 8px;
        width: 100%;

        &:hover {
            border-color: $medium-grey;
        }

        &:focus {
            outline: none;
            border-color: $primary-blue;
        }
    }

    &_auto {
        max-width: 100%;
    }

    &_small {
        width: 200px;
    }

    &_medium {
        width: 250px;
    }

    &_large {
        width: 350px;
    }

    &_with-icon {
        position: relative;

        .input__icon {
            position: absolute;
            margin: 1px;
            padding: 8px 12px;
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
            background-color: $light-grey;
        }

        .input__text {
            padding-left: 48px;
        }
    }

    &_errored {
        .input__text {
            border: 1px solid $primary-red;
        }
    }

    &_icon-clickable {

        .input__icon {
            cursor: pointer;
        }
    }
}