@import '../styles/_dimensions';
@import '../styles/_colors';

.vui-text-field {
	&__inline {
		$root: &;
		display: flex;

		&--light {
			& input#{$root}-input {
				&--transparent {
					color: white;

					&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
						color: rgba(255,255,255,0.8);
						opacity: 1; /* Firefox */
					}					
				}
			}

			#{$root}-button {
				color: white;

				& svg path {
					fill: white;
				}
			}
		}

		&--dark {

		}

		& input#{$root}-input {

			&--transparent {
				background-color: transparent;
				border-color: transparent;
			}
		}

		&-button {
			border: none;
			background-color: transparent;
			-webkit-appearance: none;
		}

		&#{$root}--open {
			& button {
				display: none;
			}
		}

		& input[type='text'] {
			font: inherit;
			line-height: inherit;
		}
	}
}