/* Extra CSS to make pico better for our use case */
/* Fixes width in table for input fields */
input:not([type="checkbox"]) {
	min-width: calc(var(--pico-form-element-spacing-horizontal) * 2 + var(--pico-border-width) * 2 + 5ch);
}

/* Make filter rows in table connecting */
.no-horizontal-padding-left {
	padding-left: 0;
}

.no-horizontal-padding-right {
	padding-right: 0;
}

.no-horizontal-padding {
	padding-left: 0;
	padding-right: 0;
}

.border-connecting-start {
	border-radius: var(--pico-border-radius) 0 0 var(--pico-border-radius);
	border-right: calc(var(--pico-border-width) / 2) solid var(--pico-border-color);
}

.border-connecting-middle {
	border-radius: 0;
	border-left: calc(var(--pico-border-width) / 2) solid var(--pico-border-color);
	border-right: calc(var(--pico-border-width) / 2) solid var(--pico-border-color);
}

.border-connecting-end {
	border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
	border-left: calc(var(--pico-border-width) / 2) solid var(--pico-border-color);
}

table th > input:not([type=checkbox], [type=radio]),
table td > input:not([type=checkbox], [type=radio]),
table th > select,
table td > select,
table th > textarea,
table td > textarea,
table td > details,
table th > details {
	margin-bottom: 0;
}

.tabs > [role=group].tab-selector {
	margin-bottom: 0;
}

.tabs > [role=group].tab-selector input:not([type=checkbox], [type=radio]), 
.tabs > [role=group].tab-selector select, 
.tabs > [role=group].tab-selector > * {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.tabs > [role=group].tab-selector input[aria-current=true]:not([type=checkbox], [type=radio]),
.tabs > [role=group].tab-selector select[aria-current=true],
.tabs > [role=group].tab-selector > *[aria-current=true] {
	text-decoration: underline;
}

.tabs > article[tab-content-id] {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	display: none;
}

.tabs > article[tab-content-id].active {
	display: block;
}