@import "common.css";
@import "line.css";
@import "config.css";

h1 {
	text-align: center;
}



.groupLine {
	border-radius: 8px;
	background-color: #fec;
	padding: 4px;
	margin-bottom: 8px;
}
.groupLine > * { margin: 4px auto; }
.groupLine > *:first-child { margin-top: 0; }
.groupLine > *:last-child { margin-bottom: 0; }
.groupButton {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	overflow-x: auto;
}
.groupButton > * {
	vertical-align: middle;
	margin: auto 2px;
	min-width: max-content;/*text pas écrasé*/
}
.groupButton > *:first-child { margin-left: 0; }
.groupButton > *:last-child { margin-right: 0; }

.listLine {
	user-select: none;
	padding: 2px;

	border: 1px solid;
	border-radius: 10px;
}
.listLine .line {
	margin: 2px 0;
}


#groupLineInput[canDelete="true"] button.line_delete {
	cursor: pointer;
	background-color: #c42;
}
#groupLineInput[canDelete="true"] button.line_delete:hover {background-color: #d53;}
#groupLineInput[canDelete="true"] button.line_delete:not(:active) {
	box-shadow: inset 2px 2px 8px rgba(255, 255, 255, .6),
				inset -2px -2px 8px rgba(0, 0, 0, .6);/*disabled*/
}





#groupLineOutput {
	display: flex;
	flex-direction: row;
	padding: 2px;
}
#groupLineOutput > * {
	margin: 0 2px;
}
.listLineOut {/* #listLineRadio, #listLineName and #listLineContent */
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.listLineOut[hidden="true"] {
	display: none;
}
.listLineOut[hidden="last"] {
	opacity: 0;
}
.listLineOut > li {
	flex: 20px;
	max-height: 20px;/*for everything*/
	display: flex;/*.line_radio can do what it want*/
	margin: 1px 0;
}


#listLineRadio, #listLineName {
	padding-top: 38px;/*skip the number/info lines (from #listLineContent) and margin (16px+2px)*2 + 2px*/
}
#listLineContent {
	overflow-x: auto;/*scroll-bar*/
	width: -webkit-fill-available;
	border: .3px solid #bbb;
	background: white;
	margin: 2px;

	display: flex;
	flex-direction: row;
}



#listLineContent li {
	min-width: 16px;
	max-width: 16px;
	display: flex;
    flex-direction: column;
    justify-content: center;/*for repere characters*/
}




#groupLineOutput li * {
	width: max-content;
	margin: auto;
}

.listLineOut_number, .listLineOut_repere {
	font-size: 1em;
	max-height: 16px !important;
	padding: 0 !important;
}
.listLineOut_repere { position: relative; }
.listLineOut_repere:before, .listLineOut_repere:after {
	content:"─";/*fill the 16px (after is possible but useless for the moment)*/
	position: absolute;
	z-index: 0;
	vertical-align: middle;
}
.listLineOut_repere:before { left:0; }
.listLineOut_repere:after { right:0; }

#listLineContent .listLineOut:hover {
	background: #ccc;
}
#listLineContent .listLineOut:hover .listLineOut_number {
	color: #38c;
}

.listLineOut .replaced {
	color: #3d7c04;
}
.listLineOut .added {
	color: #c63f00;
}