/* region button */

/* region btn */
.btn {
	font-family: "Poppins", sans-serif;
	font-size: var(--size-small);
	font-weight: var(--fontweight-semibold); /* "medium"*/
	color: rgb(var(--textcolor-btn));
	background-color: rgb(var(--background-btn));
	padding: 6px var(--spacing-medium);
	border: 1px solid rgb(var(--border-soft));
	border-radius: var(--border-radius-small);
	cursor: pointer;
}

.btn:hover {
	border: 1px solid rgb(var(--border-btn-hover));
	color: rgb(var(--textcolor-btn-hover));
}

.btn:active {
	border: 1px solid rgb(var(--border-selected));
	color: rgb(var(--textcolor-btn-selected));
	background-color: rgb(var(--background-btn-active));
}

.btn[disabled],
.btn--disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
	color: rgb(var(--textcolor-btn));
}

.btn--icon {
	border: 0 !important;
	padding: 0;
	background: unset;
}

.btn__commit {
	background-color: rgb(var(--background-cmtbtn));
	color: rgb(var(--textcolor-cmtbtn));
	border: 1px solid rgb(var(--background-cmtbtn));
}

.btn__commit:hover {
	color: rgb(var(--textcolor-cmtbtn));
	background-color: rgb(var(--background-cmtbtn-hover));
	border: 1px solid rgb(var(--background-cmtbtn-hover));
}

.btn.btn__commit[disabled] {
	color: rgb(var(--textcolor-cmtbtn));
}

.btn.btn__action {
	background-color: rgb(var(--background-actbtn));
	color: rgb(var(--textcolor-actbtn));
	border: 1px solid rgb(var(--background-actbtn));
}

.btn__action:hover {
	background-color: rgb(var(--background-actbtn-hover));
	border: 1px solid rgb(var(--background-actbtn-hover));
}

.btn__action:active {
	background-color: rgb(var(--background-actbtn));
	border: 1px solid rgb(var(--background-actbtn));
}

.btn--selected {
	color: rgb(var(--textcolor-btn-selected));
	border: 1px solid rgb(var(--border-selected));
}

.btn--small {
	padding: 0.25rem 0.5rem;
	font-size: 0.8rem;
}

.pageheader__btn {
	height: var(--size-icon-base);
}

a.btn {
	text-decoration: none;
}

.panel .widget__ft .btn {
	margin-left: var(--spacing-medium-large);
}

.btn--link {
	border: none;
	color: rgb(var(--textcolor-link));
	cursor: pointer;
	padding: 0;
	font-weight: var(--fontweight-normal);
	text-decoration: none;
	font-size: var(--size-base);
	background: none;
}

.btn--link:hover {
	border: none;
	background: none;
	text-decoration: underline;
	color: rgb(var(--textcolor-link));
}
/* endregion */

/* region button group */
.btn__group {
	display: inline-flex !important;
	border-right: 5px;
}

.btn__group > .btn,
.btn__group > .dropdown > .btn.dropdown__label {
	border-radius: 0;
}

.btn__group > .btn:first-child,
.btn__group > .dropdown:first-child > .btn.dropdown__label {
	border-radius: 5px 0 0 5px;
}

.btn__group > .btn:last-child,
.btn__group > .dropdown:last-child > .btn.dropdown__label {
	border-radius: 0 5px 5px 0;
}
/* endregion */

/* endregion */

/* region tabview */
.tabview {
	display: inline-block;
}

.tabview__labels {
	position: relative;
	top: 1px;
}

.tabview__labels > .btn {
	padding: 6px var(--spacing-medium);
	font-family: "Poppins", sans-serif;
	font-size: var(--size-base);
	font-weight: var(--fontweight-normal);
	color: rgb(var(--textcolor-secondary));
	background: none;
}

.tabview__labels.btn__group > .btn {
	border-radius: 0;
	border: none;
	position: relative;
	top: 0;
	left: 0;
}

.tabview__labels.btn__group > .btn--selected {
	color: rgb(var(--textcolor-btn-selected));
}

.tabview__labels.btn__group .btn:before {
	content: "";
	background-color: rgb(var(--border-selected));
	height: 2px;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scaleX(0);
	transform-origin: right;
}

.tabview__labels.btn__group .btn--selected:before {
	background-color: rgb(var(--border-selected));
	transform: scaleX(1);
	transform-origin: left;
}

.tabview__panels {
	padding: 10px var(--spacing-medium-large);
	background-color: rgb(var(--background-upper));
	border-top: 1px solid rgb(var(--border-soft));
}
/* endregion */

/* region widget, overlay & panel */
.overlay__content,
.panel__content {
	font-size: var(--size-base);
	background-color: rgb(var(--background-overlay));
	/* width: max-content would be nice, but is as of yet unsupported. We fix width in overlay.js -> fixWidth() */
}

/* region overlay */
.overlay {
	position: absolute;
	z-index: var(--zindex-overlay) !important;
	border-radius: 5px;
	border: 1px solid rgb(var(--border-soft));
	box-shadow: var(--main-box-shadow);
}

.overlay:not(.panel) {
	box-shadow: var(--main-box-shadow);
}
/* endregion */

/* region panel */
.panel {
	top: 0;
	left: 0;
	z-index: var(--zindex-panel) !important;
}

.panel--hidden {
	visibility: hidden;
}

.widget__tmp--forcesize .panel__content {
	overflow: hidden !important;
}

.panel .widget__hd {
	position: relative;
	padding: var(--spacing-medium-large);
}

.panel__content .widget__hd {
	color: rgb(var(--textcolor-subheading));
	font-size: var(--size-subtitle);
	font-weight: var(--fontweight-semibold);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--spacing-medium-large);
}

.widget__hd .widget__header {
	flex-grow: 8;
}

.panel .widget__bd {
	padding: 0 var(--spacing-medium-large);
	font-size: var(--size-base);
	color: var(--textcolor-main);
}

.panel .widget__bd h3 {
	font-size: var(--size-base);
	margin: 0.5em 0;
}

.panel .widget__bd textarea {
	resize: vertical;
}

.panel .widget__ft {
	padding: var(--spacing-medium-large);
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.panel .widget__ft:empty {
	padding: var(--spacing-small) var(--spacing-medium-large); /* when the footer is empty, it acts as 16px  bottom padding */
}

.panel__footer {
	padding: var(--spacing-medium-large) 0 0 0;
	display: flex;
	justify-content: end;
}

.panel__footer > * {
	margin-left: var(--spacing-small);
}
/* endregion */

/* region widget */
.widget__bd {
	overflow: auto;
}

.widget__mask {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--zindex-panel-background);
	background-color: rgba(var(--background-modal), 0.2);
}

.widget__mask ~ .panel {
	box-shadow: none;
}

.showoverflow .widget__bd {
	overflow: visible;
}

.widget .tabview__panels {
	background-color: rgb(var(--background-overlay));
}
/* endregion */

/* endregion */

/* region animations */
.animationsEnabled .overlay {
	animation: fading-in 0.1s ease-in-out;
}

.animationsEnabled .widget__mask {
	animation: fading-in 0.1s ease-in-out;
}

.animationsEnabled .tabview__labels.btn__group .btn:before {
	transition: transform 0.15s ease-in-out;
}

@media (prefers-reduced-motion) {
	.animationsEnabled .overlay {
		animation: none;
	}

	.animationsEnabled .widget__mask {
		animation: none;
	}

	.animationsEnabled .tabview__labels.btn__group .btn:before {
		transition: none;
	}
}
/* endregion */