/* general */
.form-group {
	margin-bottom: 1rem;
}
.form-actions {
	position: relative;
	margin-top: 2rem;
	display: flex;
	justify-content: center;
}
.form-actions > .btn + .btn {
	margin-left: 0.5rem;
}
.form-actions-float {
	margin-top: 0;
	padding-top: 2rem;
	padding-bottom: 2rem;
	border-top: var(--form-actions-floating-border-width, var(--bs-border-width, 1px)) solid transparent;
	background-color: transparent;
}
.form-actions-float.floating {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	border-top-color: var(--form-actions-floating-border-color, var(--bs-border-color, #C9C9C9));
	background-color: var(--form-actions-floating-bg, rgba(var(--bs-body-color-rgb), 0.75));
	z-index: 1001;
}


/* component: group */
.form-box {
	--form-box-padding-x: 1rem;
	--form-box-padding-y: 1rem;
	--form-box-border-width: var(--bs-border-width);
	--form-box-border-color: var(--bs-border-color);
	--form-box-border-radius: var(--bs-border-radius);
	margin-bottom: 1rem;
	padding: var(--form-box-padding-y) var(--form-box-padding-x);
	border: var(--form-box-border-width) solid var(--form-box-border-color);
	border-radius: var(--form-box-border-radius);
}
.form-box.border-0 {
	--form-box-padding-x: 0;
	--form-box-padding-y: 0;
	--form-box-border-width: 0;
}
.form-box-header {
	margin-bottom: 2rem;
	display: flex;
}
.form-box-header > .form-box-title {
	align-self: center;
}

/* component: dynamic list */
.dynamic-list {
	margin-bottom: 1rem;
}
.dynamic-list > .form-box:not(:last-child) {
	margin-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.dynamic-list > .form-box > .form-box-header > .btn-remove {
	margin-left: auto;
	align-self: flex-start;
	display: flex;
}
.dynamic-list > .form-box + .form-box {
	margin-top: calc(var(--form-box-border-width) * -1);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.dynamic-list > .form-box-btn {
	overflow: hidden;
	margin-bottom: 0;
	padding: 0;
	border: var(--form-box-border-width) solid var(--form-box-border-color);
	border-radius: 0 0 var(--form-box-border-radius) var(--form-box-border-radius);
}
.dynamic-list > .form-box-btn > .btn {
	width: 100%;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* component: file picker */
.form-file {
	position: relative;
	display: flex;
}
.form-file > [type=file] {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.form-file > .form-file-placeholder {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.form-file > .btn-browse {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}