/*
        xxl    xl     lg     md    sm     xs     xxs
Widths  1536   1280   1024   768   576    356    220
Padding 4.2rem 2.6rem 1.6rem 1rem  0.6rem 0.4rem 0.2rem
Column  576    356    220    136   84     52     32
*/

:root, :host {
	--pico-font-size: 87.5%;
	--pico-line-height: 1.25;
	--pico-spacing: 0.75rem;
	--pico-block-spacing-vertical: 0.75rem;
	--pico-block-spacing-horizontal: 0.75rem;
	--pico-form-element-spacing-vertical: 0.5rem;
	--pico-form-element-spacing-horizontal: 0.75rem;
	--pico-button-spacing-vertical: 0.5rem;
	--pico-button-spacing-horizontal: 1rem;

	--pico-border-radius: 0.25rem;
	--pico-border-width: 0.0625rem;

	/* --pico-heading-font-weight: 600; */
	--width-sm: 576px;
	--padding-xxl: 4.2rem;
}

.align-center { align-items: center; }
.col-width-xl { width: 356px; }
.col-width-lg { width: 220px; }
.col-width-md { width: 136px; }
.col-width-sm { width: 84px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.float-left { float: left; }
.float-right { float: right; }
.gap-md { gap: var(--pico-spacing); }
.gap-sm { gap: calc(var(--pico-spacing) * 0.618); }
.grid-xxs { grid-template-columns: 220px 1fr; }
.hide { display: none; }
.inline-block { display: inline-block; }
.justify-center { justify-content: center; }
.max-width-sm { max-width: var(--width-sm); }
.mb-0 { margin-bottom: 0px; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mt-xxl { margin-top: var(--padding-xxl); }
.neg { color: var(--pico-del-color); }
.pl-btn { padding-left: calc(66.2px - var(--pico-border-width)); }
.pointer { cursor: pointer; }
.pos { color: var(--pico-ins-color); }
.row-background,
.row-background th,
.row-background td,
.row-hover:hover,
.row-hover:active,
.row-hover:hover th,
.row-hover:active th,
.row-hover:hover td,
.row-hover:active td { background-color: var(--pico-table-row-stripped-background-color); }
.space-between { justify-content: space-between; }
.text-right { text-align: right; }

button.danger {
	background-color: var(--pico-form-element-invalid-border-color);
	border-color: var(--pico-form-element-invalid-border-color);
}

button.danger:hover {
	background-color: var(--pico-form-element-invalid-active-border-color);
	border-color: var(--pico-form-element-invalid-active-border-color);
}

ul.no-decoration { padding-left: 0; }
ul.no-decoration li { list-style: none; }

details.details-left > summary::after {
	content: none !important;
}

details.details-left > summary {
	display: flex;
	align-items: center;
}

details.details-left > summary::before {
	content: var(--pico-icon-chevron);
	display: inline-block;
	margin-right: 0.4rem;
	transition: transform .2s ease;
	transform: scale(0.75) rotate(-90deg);
	transform-origin: center;
}

details.details-left[open] > summary::before {
	transform: scale(0.75) rotate(0deg);
}