// Form Elements
input[type=text].px2-input,
input[type=password].px2-input,
input[type=number].px2-input,
input[type=search].px2-input,
input[type=tel].px2-input,
input[type=url].px2-input,
input[type=email].px2-input,
input[type=datetime].px2-input,
input[type=date].px2-input,
input[type=month].px2-input,
input[type=week].px2-input,
input[type=time].px2-input,
input[type=color].px2-input,
input[type=file].px2-input,
input[type=datetime-local].px2-input,
textarea.px2-input,
select.px2-input
{
    color: $darkmode-text-color;
    background-color: $darkmode-background-color;
    border: 1px solid #555;
    &:focus{
        color: #f3f3f3;
        background-color: #000;
        border-color: #80bdff;
        box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    }
    &[readonly]{
        color: $darkmode-text-color;
        background-color: $darkmode-background-color;;
        &:focus{
            border-color: #555;
            box-shadow: none;
        }
    }
    &[disabled]{
        color: #8e959c;
        background-color: #333;
    }

    &--error {
        border-color: #721c24;
        color: #721c24;
        background-color: #f8d7da;
    }
}

// Input Group
.px2-input-group{

    &__text {
        color: #ccc;
        background-color: #333;
        border: 1px solid #555;
    }
}

// Input List
.px2-form-input-list{
	color: $darkmode-text-color;

	ul.px2-form-input-list__ul{

		border: 1px solid #666;

		li.px2-form-input-list__li{

			.px2-form-input-list__label{
				background-color: #191919;
				border: 1px solid #666;
			}
			.px2-form-input-list__input{
                background-color: $darkmode-background-color;
				border: 1px solid #666;
			}
		}
	}
}