@import "../Theme/Theme.scss";

$line-min-height: 24px;

div.attr-input-root {
    display: flex;
    justify-content: space-between;
    align-items: center;

    input {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        background-color: transparent;
        min-height: $line-min-height;
    };

    input:focus {
        border: none;
        background-color: transparent;
    }

    div.button-left, div.button-right {
        min-height: $line-min-height;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        vertical-align: middle;
        cursor: pointer;
        user-select: none;
        padding: 0 3px;
    }
}

div.dark.text-field-root {

	input {
		background-color: $lt-bg-color-lvl3-dark;
		color: $lt-font-color-normal-dark;
	}

	div.button-left:hover, div.button-right:hover {
		background-color: $lt-bg-color-lvl2-dark;
	}
}

div.light.text-field-root {

	input {
		background-color: $lt-bg-color-lvl3-light;
		color: $lt-font-color-normal-light;
	}

	div.button-left:hover, div.button-right:hover {
		background-color: $lt-bg-color-lvl2-light;
	}
}