cccombo.css

@charset "utf-8";

/*
	Default styles for Cccombo JavaScript library
*/

.cccombo {
	position: relative;
	vertical-align: middle;
}

.cccombo > input,
.cccombo > button {
	position: relative;
	z-index: 2;
	overflow: hidden;

	/* https://bugzilla.mozilla.org/show_bug.cgi?id=488725 */
	white-space: normal;
}

.cccombo > button {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cccombo > button::after {
	content: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%3E%3Cpolygon%20points=%223,4%2013,4%208,12%22%20/%3E%3C/svg%3E');
	display: block;
	width: 1em;
	height: 1em;
	align-self: center;
	margin-left: 0.2em;
}

.cccombo > button[disabled]::after {
	display: none;
}

.cccombo > ul,
.cccombo > .dropdown {
	display: none;
	box-sizing: border-box;
	position: absolute;
	width: auto;
	min-width: 100%;
	background: #fff;
	border: 1px solid rgba(100, 100, 100, 0.4);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.4);
	z-index: 1;
}

.cccombo.open > ul,
.cccombo.open > .dropdown {
	display: block;
	overflow: auto;
}

.cccombo ul {
	margin: 0;
	padding: 0;
}

.cccombo > input,
.cccombo > button,
.cccombo ul > li,
.cccombo > .dropdown > h4 {
	padding: 0.4em 1em;
}

.cccombo > .dropdown > h4 {
	margin: 0.6em 0 0.4em;
}

.cccombo > .dropdown > ul ~ h4 {
	margin-top: 1em;
	margin-bottom: 0.6em;
}

.cccombo ul > li {
	cursor: pointer;
	white-space: nowrap;
	list-style: none;
}

.cccombo ul > li.hover {
	background: rgba(0, 0, 0, 0.1);
}

.cccombo ul > li.hidden {
	display: none;
}

.cccombo ul > li.group {
	margin-top: 0.5em;
	padding: 0.5em 1em;
	font-size: 0.9em;
	font-weight: 700;
	background-color: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-left: none;
	border-right: none;
	cursor: default;
}

.cccombo ul > li.group:first-of-type {
	margin-top: 0;
}