:host {
	position: relative;
	display: none;
	width: 100%;
	height: 0;
}
:host(.expand) {
	display: flex;
	height: 22px;
}

button {
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
}

ng-paging {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	height: calc(100% - 3px);
	margin-top: 3px;
	width: 400px;
	--border: 1px solid blueviolet;
}

ng-paging span {
	--margin-top: 2px;
	margin-left: 6px;
	margin-right: 6px;
	color: #999;
}

ng-paging button {
	width: 17px;
	height: 100%;
	margin-left: 2px;
	outline: none;
	border: none;
	border-right: 1px solid #ccc;
}
ng-paging button:hover {
	filter: brightness(95%);
}
ng-paging button:disabled {
	opacity: 0.5;
}

ng-paging .ng-paging-first {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23999" viewBox="0 0 16 16"><path d="M4 4a.5.5 0 0 1 1 0v3.248l6.267-3.636c.54-.313 1.232.066 1.232.696v7.384c0 .63-.692 1.01-1.232.697L5 8.753V12a.5.5 0 0 1-1 0z"/></svg>');
}
ng-paging .ng-paging-prev {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23999" viewBox="0 0 16 16"><path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/></svg>');
}
ng-paging .ng-paging-next {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23999" viewBox="0 0 16 16"><path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg>');
}
ng-paging .ng-paging-last {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23999" viewBox="0 0 16 16"><path d="M12.5 4a.5.5 0 0 0-1 0v3.248L5.233 3.612C4.693 3.3 4 3.678 4 4.308v7.384c0 .63.692 1.01 1.233.697L11.5 8.753V12a.5.5 0 0 0 1 0z"/></svg>');
}

ng-layout {
	position: relative;
	display: flex;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
ng-layout .ng-wrap {
	display: flex;
}

ng-layout button {
	padding-left: 6px;
	padding-right: 6px;
	height: 100%;
	outline: none;
	border: none;
	border-left: 1px solid #eee;
	border-bottom: 1px solid #f0f0f0;
	background: none;
	outline: none;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
ng-layout button:hover {
	filter: brightness(95%);
}
ng-layout button:active {
	color: red;
}

ng-layout button.ng-active {
	color: green;
	border-bottom: 2px solid green;
	background-color: #f9f9f9;
}

ng-layout .ng-wrap button:first-child {
	margin-left: 8px;
	border-left: 1px solid #ccc;
}

ng-layout .ng-wrap button:last-child {
	border-right: 1px solid #ccc;
}