/************ PRESETS ************/

.democracy{
	--dem-graph-bg: transparent;
	--dem-graph-color: rgba(0,0,0,.6);
	--dem-graph-height: 1.2em;
	--dem-star-color: #ff4e00;
	--dem-fill-color: #7cb4dd;
	--dem-fill-voted-color: #FFC45A;

	position:relative; margin:0 auto;

	:where(input[type='radio'], input[type='checkbox']){ margin-right:.2em; }
	ul.dem-vote{
		margin-bottom:1em;
		li{ padding-bottom:0; margin-bottom:0; }
		li > *{ margin-bottom:.6em; } /* for comfort hover */
	}
	ul.dem-answers{
		li{ padding-bottom:1em; }
	}
}

.dem-screen{ position:relative; line-height:1.3; }
.dem-answers{
	.dem-label{ margin-bottom:.2em; line-height:1.2; }
}


/** RESULT SCREEN **/

.dem-graph{
	position:relative; box-sizing:content-box; display:table; width:100%;
	height:var(--dem-graph-height); line-height:var(--dem-graph-height);
	background:var(--dem-graph-bg); color:var(--dem-graph-color);
}
.dem-fill{ position:absolute; top:0; left:0; height:100%; background-color:var(--dem-fill-color); }
.dem-voted-this .dem-fill{ background-color:var(--dem-fill-voted-color); }

.dem-votes-txt,
.dem-percent-txt{ position:relative; display:table-cell; padding-left:.3em; vertical-align:middle; font-size:90%; }

/* result bottom */
.dem-poll-info{ display:flex; flex-direction:column; gap:.2em;
	font-size:85%;

	> *{ display:block; text-align:right; opacity:0.7; }
}

/** VOTE SCREEN **/

.dem-vote{
	label{ display:flex; align-items:center; gap:.5em;
		.dem__spot{ flex-shrink:0; }
	}
	.dem-disabled{ opacity:.5; }
}
.dem-results-link{ display:inline-block; margin:.8em 1em; }

.dem-bottom{ display:flex; flex-direction:column; flex-wrap:wrap; gap:1em;
	text-align:center;
	margin-bottom:1em;
}

.dem-poll-title{ display:block; margin-bottom:1.5em; margin-top:1.2em; font-size:120%; }

.dem-star{ font-size:90%; vertical-align:baseline; padding-left:0.3em; color:var(--dem-star-color); }

.dem-poll-note{ font-size:90%; padding:0.5em; opacity:0.8; line-height:1.3; }

/* notice */

.dem-notice-inline {
	width:100%; padding:1.5em 2em; box-sizing:border-box;
	border-radius:2px; text-align:center;
	background:rgba(247 241 212 / .15);
}
.dem-notice{ z-index:10; position:absolute; top:0;
	width:100%; padding:1.5em 2em; box-sizing:border-box;
	border-radius:2px; text-align:center;
	background:rgba(247, 241, 212, 0.8); color:#6D6214;

	a { color: #423b08; text-decoration: underline; }
}
.dem-notice-close{
	position:absolute; top:0; right:0; padding:5px; cursor:pointer; line-height:.6; font-size:150%;
	border:0; background:none; color:inherit;

	&:hover{ color:#D26616 }
}

/* add answer */

.dem-add-answer{
	position:relative;

	> *{ display:block; }
	a{ display:inline-block; }
}
input:where(.dem-add-answer-txt){
	width:100%; box-sizing:border-box; padding:.2em .3em; font-size:100%;
}

.dem-add-answer-close{
	position:absolute; right:0; padding:0 .7em; cursor:pointer; color:#333;

	&:hover{ color:#ff2700; }
}

/* edit-link */
.dem-edit-link{ display:block; position:absolute; top:0; right:0; line-height:1;
	text-decoration:none !important; border:none !important;

	svg{ width:1.2em!important; fill:#6c6c6c; }
	&:hover svg{ fill:#35A91D;  }
}

/* loader */
.dem-loader{
	display:none; position:absolute; top:0; left:0; width:100%; height:100%;

	> *{ display:table-cell; vertical-align:middle; text-align:center; }
	svg{ width:20%; max-width:100px; min-width:80px; margin-bottom:15%; }
	[class^="dem-"]{ margin-bottom:15%; }
}

/* collapser */
.dem__collapser{
	display:block; cursor:pointer; text-align:center; font-size:150%; line-height:1;

	&:hover{ color:#FF3311; background:rgba(255, 255, 255, 0.3); }
	&.expanded{ position:relative; height:1em; }
	&.collapsed{ position:absolute; top:0; bottom:0; right:0; left:0; }
	.arr{ display:block; position:absolute; bottom:0; width:100%;  }
	&.collapsed .arr::before{ content:"▾"; }
	&.expanded  .arr::before{ content:"▴"; }
}

/* shortcode **/
.dem-poll-shortcode{ margin-bottom:1.5em; }

/** ARCHIVE PAGE **/

.dem-archives{
	.dem-elem-wrap{ margin-bottom:2em; padding-bottom:20px; border-bottom:1px dashed rgba(0,0,0,.1); }
	.dem-archive-link{ display:none; }
}

.dem-moreinfo{ padding: 1em 1.5em; background: rgba(0 0 0 / .15);
	& > *:last-child{ margin-bottom:0; }
}

.dem-paging{
	text-align:center; margin:1.5em auto;

	> *{ display:inline-block; padding:.3em .8em; border-radius:.2em;
		background:#e2e2e2; color:#333; text-decoration:none; text-transform:lowercase; user-select:none; }
	> a{ color:#333; }
	> a:hover{ background:#ccc; color:#333; text-decoration:none; }
	.current{ background:#656565; color:#fff; }
	.dots{ background:none; }
}

/********* PRESETS END ************/