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

$line-min-height: 24px;
$root-min-height: 26px;

div.attr-input {
	width: 100%;
	display: flex;
	min-height: $line-min-height;
	padding: 5px 0;

	div.input-intro {
		width: 50%;
		height: 100%;
		max-width: 220px;
		display: flex;
		align-items: center;
        padding-right: 5px;
        box-sizing: border-box;
	}

    div.root-content {
        width: 50%;
        height: 100%;
        max-width: 180px;
        min-height: $root-min-height;

        div.input-content {
            box-sizing: border-box;
            border: 1px solid transparent;
            border-radius: 3px;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: $root-min-height;
    
            input {
                width: 100%;
                height: 100%;
                border: none;
                outline:none;
                min-height: $line-min-height;
            };
    
            input:focus {
                border: none;
            }
    
            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.input-content.error {
            border: 1px solid $lt-red;
        }

        div.input-content.focus {
            border: 1px solid $lt-blue;
        }

        div.err-message {
            color: $lt-red;
            padding-top: 5px;
            min-height: $line-min-height;
        }
    }
}

div.dark.attr-input {

	div.input-content,
	div.input-content 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.attr-input {

	div.input-content,
	div.input-content 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;
	}
}