:host {
	display: flex;
	justify-content: center;
    align-items: center;
	height: 26px;
}
:host(.ng-left) {
	margin-right: 2px;
}
:host(.ng-right) {
	margin-left: 2px;
}
:host(.ng-first) {
	margin-left: -2px;
}
:host(.ng-last) {
	margin-right: -2px;
}

:host(.border-left-none) {
	margin-left: 0;
}
:host(.border-right-none) {
	margin-right: 0;
}

:host(.border-left-none) button {
	border-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
:host(.border-right-none) button {
	border-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

button {
	padding: 0;
	--line-height: calc(100% - 2px);
	height: 100%;
	--max-height: 26px;
	padding-left: 4px;
	padding-right: 4px;
	margin-right: unset;
	border: 1px solid #eee;
	border-radius: 3px;
	background-color: #f0f0f0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
	outline: none;
	cursor: pointer;
	color: #333;
	--position: sticky;
	right: unset;
}
button:hover:not(:disabled) {
	border-color: #999;
}
button:focus:not(:disabled) {
	border-color: #999;
}
button:active:not(:disabled) {
	border-color: #333;
	filter: brightness(80%);
}
button:disabled {
	opacity: 0.5;
	cursor: unset;
}