.xCb { 
	grid-area: CategoryBar; 
	display: flex;
	flex-direction: column;
    width: var(--categorybar-size);
    background-color: var(--categorybar-background-color);
    border-width: var(--categorybar-border-width);
    border-style: var(--categorybar-border-style);
    border-color: var(--categorybar-border-color);
}

.xCbFilter + .xCb {
	margin-top: var(--categorybar-filter-height);
}

.xCb a {
	display: flex;
	cursor: pointer;
}

.xCb a[filter="excl"] {
	display: none;
}

.xCb a[filter="incl"] > span {
    font-weight: var(--categorybar-button-font-weight--emphasis);
	border-color: var(--categorybar-button-border-color--emphasis);
	color: var(--categorybar-button-text-color--emphasis);
	background-color: var(--categorybar-button-background-color--emphasis);
}

.xCbGrpHdr {
	cursor: pointer;
	padding: var(--categorybar-groupheader-padding);
	height: var(--categorybar-groupheader-height);
	align-items: center;
	font-family: var(--categorybar-groupheader-font-family);
	font-size: var(--categorybar-groupheader-font-size);
    font-weight: var(--categorybar-groupheader-font-weight);
	font-style: var(--categorybar-groupheader-font-style);
	font-stretch: var(--categorybar-groupheader-font-stretch);
	text-align: var(--categorybar-groupheader-text-align);
	text-transform: var(--categorybar-groupheader-text-transform);
	line-height: var(--categorybar-groupheader-line-height);
	letter-spacing: var(--categorybar-groupheader-letter-spacing);
	word-spacing: var(--categorybar-groupheader-word-spacing);
	border-width: var(--categorybar-groupheader-border-width);
	border-style: var(--categorybar-groupheader-border-style);
}

.xCbGrpHdr:not(:first-child) {
	margin-top: var(--categorybar-groupheader-gap);
}

.xCbGrpHdr[barstate="closed"] {
    color: var(--categorybar-groupheader-text-color--closed);
    background-color: var(--categorybar-groupheader-background-color--closed);
	border-color: var(--categorybar-groupheader-border-color--closed);
}

.xCbGrpHdr[barstate="closed"]:hover {
    color: var(--categorybar-groupheader-text-color--closed--hover);
    background-color: var(--categorybar-groupheader-background-color--closed--hover);
	border-color: var(--categorybar-groupheader-border-color--closed--hover);
}

.xCbGrpHdr[barstate="open"] {
	color: var(--categorybar-groupheader-text-color--open);
    background-color: var(--categorybar-groupheader-background-color--open);
	border-color: var(--categorybar-groupheader-border-color--open);
}

.xCbGrpHdr[barstate="open"]:hover {
	color: var(--categorybar-groupheader-text-color--open--hover);
    background-color: var(--categorybar-groupheader-background-color--open--hover);
	border-color: var(--categorybar-groupheader-border-color--open--hover);
}

.xCbBtns {
	display: flex;
	flex-direction: column;
}

.xCbGrpHdr ~ .xCbBtns {
	padding: var(--categorybar-groupheader-button-padding);
	border-width: var(--categorybar-groupheader-button-border-width);
	border-style: var(--categorybar-groupheader-button-border-style);
	border-color: var(--categorybar-groupheader-button-border-color);
	background-color: var(--categorybar-groupheader-button-background-color);
}

.xCbBtns a {
	padding: var(--categorybar-button-padding);
	align-items: center;
	height: var(--categorybar-button-height);
	font-family: var(--categorybar-button-font-family);
	font-size: var(--categorybar-button-font-size);
    font-weight: var(--categorybar-button-font-weight);
	font-style: var(--categorybar-button-font-style);
	font-stretch: var(--categorybar-button-font-stretch);
	text-align: var(--categorybar-button-text-align);
	text-transform: var(--categorybar-button-text-transform);
	line-height: var(--categorybar-button-line-height);
	letter-spacing: var(--categorybar-button-letter-spacing);
	word-spacing: var(--categorybar-button-word-spacing);
	border-width: var(--categorybar-button-border-width);
	border-style: var(--categorybar-button-border-style);
	border-color: var(--categorybar-button-border-color);
	color: var(--categorybar-button-text-color);
	background-color: var(--categorybar-button-background-color);
	box-shadow: var(--categorybar-button-shadow);
}

.xCbBtns a:hover {
	border-color: var(--categorybar-button-border-color--hover);
	color: var(--categorybar-button-text-color--hover);
	background-color: var(--categorybar-button-background-color--hover);
	box-shadow: var(--categorybar-button-shadow--hover);
}

.xCbBtns a:active {
	border-color: var(--categorybar-button-border-color--active);
	color: var(--categorybar-button-text-color--active);
	background-color: var(--categorybar-button-background-color--active);
	box-shadow: var(--categorybar-button-shadow--active);
}

.xCbBtns > a.xCbHid {
	display: none;
}

.xCbFilter {
	grid-area: CategoryBar;
	position: relative;
	margin: var(--categorybar-filter-margin);
	padding: var(--categorybar-filter-padding);
	height: var(--categorybar-filter-height);
	width: var(--categorybar-filter-width)var(--categorybar-size);
	border-width: var(--categorybar-filter-border-width);
	border-style: var(--categorybar-filter-border-style);
	border-color: var(--categorybar-filter-border-color);
	background-color: var(--categorybar-filter-background-color);
}

.xCbFilter input[type="text"] {
	height: 100%;
	width: 100%;
	padding: var(--categorybar-filter-input-padding);
	outline-offset: var(--outline-inset);
	border-width: var(--categorybar-filter-input-border-width);
    border-style: var(--categorybar-filter-input-border-style);
    border-color: var(--categorybar-filter-input-border-color);
    border-radius: var(--categorybar-filter-input-border-radius);
    background-color: var(--categorybar-filter-input-background-color);
    font-family: var(--categorybar-filter-input-font-family);
    font-size: var(--categorybar-filter-input-font-size);
    font-weight: var(--categorybar-filter-input-font-weight);
    line-height: var(--categorybar-filter-input-line-height);
    letter-spacing: var(--categorybar-filter-input-letter-spacing);
    text-align: var(--categorybar-filter-input-text-align);
    color: var(--categorybar-filter-input-text-color);
}

.xCbFilter input[type="text"]:hover {
    border-color: var(--categorybar-filter-input-border-color--hover);
    background-color: var(--categorybar-filter-input-background-color--hover);
    color: var(--categorybar-filter-input-text-color--hover);
}

.xCbFilter input[type="text"]:focus {
    border-color: var(--categorybar-filter-input-border-color--focus);
    background-color: var(--categorybar-filter-input-background-color--focus);
    color: var(--categorybar-filter-input-text-color--focus);
}


.xCbFilterResults {
	display: none;
	position: absolute;
	top: var(--categorybar-filter-results-offset-x);
	left: var(--categorybar-filter-results-offset-Y);
	font-family: var(--categorybar-filter-results-font-family);
	font-size: var(--categorybar-filter-results-font-size);
	font-weight: var(--categorybar-filter-results-font-weight);
	font-style: var(--categorybar-filter-results-font-style);
	color: var(--categorybar-filter-results-text-color);
    padding: var(--categorybar-filter-results-padding);
	border-width: var(--categorybar-filter-results-border-width);
	border-style: var(--categorybar-filter-results-border-style);
	border-color: var(--categorybar-filter-results-border-color);
	border-radius: var(--categorybar-filter-results-border-radius);
    background-color: var(--categorybar-filter-results-background-color);
	box-shadow: var(--categorybar-filter-results-shadow);
}

.xCbFilterResults:empty {
	padding: 0;
}


input[type="text"]:focus + .xCbFilterResults {
	display: block;
	z-index: 1000;
}

input[type="text"]:focus + .xCbFilterResults:empty {
	display: none;
}

@media (max-width: 64rem) {
	.xCb {
		display: none;
	}


	.xCbFilter {
 		display: none;
	}
}

/* Print
-------------------------------------------- */
@media print {
    .xCb { display: none; }
    .xCbFilter { display: none; }
}