.copy-button {
    --pico-color: var(--pico-primary);
    --pico-background-color: transparent;
    --pico-border-color: transparent;
    --pico-form-element-spacing-vertical: 0.25rem;
    --pico-form-element-spacing-horizontal: 0.5rem;
    vertical-align: bottom;

    &.success {
        --pico-border-color: var(--pico-form-element-valid-border-color);
        --pico-color: var(--pico-primary-inverse);
        --pico-background-color: var(--pico-border-color);
        --pico-primary-focus: var(--pico-form-element-valid-active-border-color);
    }

    &.error {
        --pico-border-color: var(--pico-form-element-invalid-border-color);
        --pico-color: var(--pico-primary-inverse);
        --pico-background-color: var(--pico-border-color);
        --pico-primary-focus: var(--pico-form-element-invalid-focus-color);
    }
}

/* Floating Action Button */
.fab,
.fab[role=button] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
}

.fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.grid {
    --grid-min-width: 450px;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min-width), 100%), 1fr));
}

.grid-card {
    transition: translate 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;

    &:hover {
        translate: 0 -5px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    & header,
    & footer {
        background-color: var(--pico-primary);
        color: var(--pico-primary-inverse);
    }

    & .content {
        margin-bottom: auto;
    }

    & header:has(details),
    & footer:has(details) {
        padding: 0;
    }

    & header details,
    & footer details {
        margin: 0;
    }

    & footer:not(:has(details)) {
        text-align: right;
    }


    & footer a {
        color: inherit;
        font-weight: bold;
    }
}

.pagination[role=group] {
    display: flex;
    margin-inline: auto;
    margin-block: var(--pico-spacing);
    max-width: 450px;

    & a,
    & button {
        margin: 0;
        --pico-form-element-spacing-horizontal: 0.75rem;
    }

    & a:has(iconify-icon),
    & button:has(iconify-icon) {
        --pico-form-element-spacing-horizontal: 0.5rem;
    }
}

.preview[popovertarget] {
    --pico-form-element-spacing-horizontal: 0;
    --pico-form-element-spacing-vertical: 0;
    --pico-border-width: 0;
    --pico-background-color: transparent;
}

.preview[popover] {
    border: 0;
    padding: 0;
    opacity: 1;
    transition: all .3s ease;

    &::backdrop {
        -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
        backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
        background-color: var(--pico-modal-overlay-background-color);
    }

    & img {
        max-width: 90dvw;
        max-height: 90dvh;
    }

    @starting-style {
        opacity: 0;
        scale: 0;
    }
}

/* Tabs */
.tabs {
    display: flex;
    flex-wrap: wrap;

    & label {
        order: initial;
    }

    & .content {
        display: none;
        flex-grow: 1;
        padding-block: var(--pico-spacing);
        width: 100%;
    }

    & input[type="radio"] {
        display: none;
    }

    & [type=radio]:not(:first-of-type)~label {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    & [type=radio]:not(:last-of-type)~label {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    & input[type="radio"]:checked+label {
        background: var(--pico-primary-hover-background);
        --pico-border-color: var(--pico-primary-hover-border);
        --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
        --pico-color: var(--pico-primary-inverse);
    }

    & input[type="radio"]:checked+label+.content {
        display: block;
    }
}

@media (min-width: 10em) {
    .tabs .content {
        order: 99
    }

    .tabs [type=radio]~label {
        order: 1;
        margin: 0;
        flex-grow: 1;
    }
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate-2,
.text-truncate-3,
.text-truncate-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-2 {
    -webkit-line-clamp: 2;
}

.text-truncate-3 {
    -webkit-line-clamp: 3;
}

.text-truncate-4 {
    -webkit-line-clamp: 4;
}

#backToTop {
    transition-delay: 0.15s;
    --pico-background-color: var(--pico-secondary);
    --pico-color: var(--pico-secondary-inverse);

    body:not(.scrolled) & {
        translate: 0 calc(100% + 3rem);
        transition-delay: 0s;
    }
}

#color-scheme-toggle iconify-icon {
    transform: rotate3d(1, -1, 0, 0deg);
    transition: all 500ms ease;
    transform-style: preserve-3d;
}

#color-scheme-toggle:hover iconify-icon,
#color-scheme-toggle:focus iconify-icon {
    transform: rotate3d(1, -1, 0, -180deg);
}

body>footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pico-spacing);
    justify-content: space-between;
    align-items: baseline;
}

#language-switcher {
    --pico-font-size: 0.875em;

    &,
    & label {
        display: flex;
        gap: var(--pico-spacing);
        align-items: center;
    }

    & label {
        margin: 0;
    }

    & input,
    & select {
        font-size: var(--pico-font-size);
        --pico-line-height: normal;
        --pico-spacing: 0;
        --pico-form-element-spacing-vertical: 0.5rem;
        --pico-form-element-spacing-horizontal: 0.5rem;
    }
}

/* Lime scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme=light],
:root:not([data-theme=dark]),
:host:not([data-theme=dark]) {
    --pico-text-selection-color: color-mix(in srgb, transparent, var(--pico-color-lime-150) 25%);
    --pico-primary: var(--pico-color-lime-300);
    --pico-primary-background: var(--pico-color-lime-250);
    --pico-primary-underline: color-mix(in srgb, transparent, var(--pico-color-lime-300) 50%);
    --pico-primary-hover: var(--pico-color-lime-400);
    --pico-primary-hover-background: var(--pico-color-lime-300);
    --pico-primary-focus: color-mix(in srgb, transparent, var(--pico-color-lime-150) 50%);
    --pico-primary-inverse: #fff;
}

/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {

    :root:not([data-theme]),
    :host:not([data-theme]) {
        --pico-text-selection-color: color-mix(in srgb, transparent, var(--pico-color-lime-100) 18.75%);
        --pico-primary: var(--pico-color-lime-100);
        --pico-primary-background: var(--pico-color-lime-250);
        --pico-primary-underline: color-mix(in srgb, transparent, var(--pico-color-lime-100) 50%);
        --pico-primary-hover: var(--pico-color-lime-50);
        --pico-primary-hover-background: var(--pico-color-lime-200);
        --pico-primary-focus: color-mix(in srgb, transparent, var(--pico-color-lime-100) 37.5%);
        --pico-primary-inverse: #fff;
    }
}

/* Enabled if forced with data-theme="dark" */
[data-theme=dark] {
    --pico-text-selection-color: color-mix(in srgb, transparent, var(--pico-color-lime-100) 18.75%);
    --pico-primary: var(--pico-color-lime-100);
    --pico-primary-background: var(--pico-color-lime-250);
    --pico-primary-underline: color-mix(in srgb, transparent, var(--pico-color-lime-100) 50%);
    --pico-primary-hover: var(--pico-color-lime-50);
    --pico-primary-hover-background: var(--pico-color-lime-200);
    --pico-primary-focus: color-mix(in srgb, transparent, var(--pico-color-lime-100) 37.5%);
    --pico-primary-inverse: #fff;
}

a {
    text-decoration: none;
}

/* The main fills all the space between header & footer */
body {
    min-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    view-transition-name: page;

    &>main {
        flex: 1;
    }
}

details>summary {
    position: sticky;
    top: 0;
    background: var(--pico-background-color);

    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6 {
        display: inline;
        margin: 0;
    }
}

nav:not([aria-label="breadcrumb"]) {
    background-color: var(--pico-primary);

    &>* {
        color: var(--pico-primary-inverse);
    }

    &>ul {
        gap: var(--pico-nav-element-spacing-horizontal);
    }

    &>ul>li:has(>button, >[role=button]) {
        padding: 0;
    }

    &>ul>li>button,
    &>ul>li>[role=button] {
        margin-block: calc(var(--pico-nav-link-spacing-vertical) * -1);
        padding-block: calc(var(--pico-nav-element-spacing-vertical) - var(--pico-border-width));
    }
}

nav[aria-label="breadcrumb"] {
    padding-block: var(--pico-nav-element-spacing-vertical);

    & ul {
        flex-wrap: wrap;
        overflow: hidden;
        --pico-nav-element-spacing-vertical: 0;
    }

    & ul> :last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
}

section {
    margin-bottom: calc(var(--pico-block-spacing-vertical) * 3);
}

tr,
td {
    max-width: 50vw;
}

video {
    display: block;
    margin-inline: auto;
    margin-bottom: var(--pico-spacing);
    max-width: 100%;
    height: auto;
    max-height: 500px;
}

[color-theme] {
    --pico-primary: var(--theme-550);
    --pico-primary-background: var(--theme-550);
    --pico-primary-focus: var(--theme-500);
    --pico-primary-inverse: #FFF;
    --pico-primary-border: var(--pico-primary);
    --pico-primary-hover-border: var(--pico-primary);
}

[color-theme][data-theme="light"],
:root:not([data-theme="dark"]) [color-theme] {
    --pico-primary-hover: var(--theme-600);
    --pico-primary-hover-background: var(--theme-600);
}

[color-theme][data-theme="dark"],
:root[data-theme="dark"] [color-theme] {
    --pico-primary-hover: var(--theme-500);
    --pico-primary-hover-background: var(--theme-500);
}

[color-theme="red"] {
    --theme-500: var(--pico-color-red-500);
    --theme-550: var(--pico-color-red-550);
    --theme-600: var(--pico-color-red-600);
}

[color-theme="pink"] {
    --theme-500: var(--pico-color-pink-500);
    --theme-550: var(--pico-color-pink-550);
    --theme-600: var(--pico-color-pink-600);
}

[color-theme="fuchsia"] {
    --theme-500: var(--pico-color-fuchsia-500);
    --theme-550: var(--pico-color-fuchsia-550);
    --theme-600: var(--pico-color-fuchsia-600);

}

[color-theme="purple"] {
    --theme-500: var(--pico-color-purple-600);
    --theme-550: var(--pico-color-purple-650);
    --theme-600: var(--pico-color-purple-700);
}

[color-theme="violet"] {
    --theme-500: var(--pico-color-violet-600);
    --theme-550: var(--pico-color-violet-650);
    --theme-600: var(--pico-color-violet-700);
}

[color-theme="indigo"] {
    --theme-500: var(--pico-color-indigo-600);
    --theme-550: var(--pico-color-indigo-650);
    --theme-600: var(--pico-color-indigo-700);
}

[color-theme="blue"] {
    --theme-500: var(--pico-color-blue-500);
    --theme-550: var(--pico-color-blue-550);
    --theme-600: var(--pico-color-blue-600);
}

[color-theme="azure"] {
    --theme-500: var(--pico-color-azure-500);
    --theme-550: var(--pico-color-azure-550);
    --theme-600: var(--pico-color-azure-600);
}

[color-theme="cyan"] {
    --theme-500: var(--pico-color-cyan-500);
    --theme-550: var(--pico-color-cyan-550);
    --theme-600: var(--pico-color-cyan-600);
}

[color-theme="jade"] {
    --theme-500: var(--pico-color-jade-500);
    --theme-550: var(--pico-color-jade-550);
    --theme-600: var(--pico-color-jade-600);
}

[color-theme="green"] {
    --theme-500: var(--pico-color-green-500);
    --theme-550: var(--pico-color-green-550);
    --theme-600: var(--pico-color-green-600);
}

[color-theme="lime"] {
    --theme-500: var(--pico-color-lime-200);
    --theme-550: var(--pico-color-lime-250);
    --theme-600: var(--pico-color-lime-300);
    --pico-primary-inverse: rgba(0, 0, 0, 0.75);
}

[color-theme="yellow"] {
    --theme-500: var(--pico-color-yellow-100);
    --theme-550: var(--pico-color-yellow-150);
    --theme-600: var(--pico-color-yellow-200);
    --pico-primary-inverse: rgba(0, 0, 0, 0.75);
}

[color-theme="amber"] {
    --theme-500: var(--pico-color-amber-200);
    --theme-550: var(--pico-color-amber-250);
    --theme-600: var(--pico-color-amber-300);
    --pico-primary-inverse: rgba(0, 0, 0, 0.75);
}

[color-theme="pumpkin"] {
    --theme-500: var(--pico-color-pumpkin-300);
    --theme-550: var(--pico-color-pumpkin-350);
    --theme-600: var(--pico-color-pumpkin-400);
    --pico-primary-inverse: rgba(0, 0, 0, 0.75);
}

[color-theme="orange"] {
    --theme-500: var(--pico-color-orange-500);
    --theme-550: var(--pico-color-orange-550);
    --theme-600: var(--pico-color-orange-600);
}

[color-theme="sand"] {
    --theme-500: var(--pico-color-sand-200);
    --theme-550: var(--pico-color-sand-250);
    --theme-600: var(--pico-color-sand-300);
    --pico-primary-inverse: rgba(0, 0, 0, 0.75);
}

[color-theme="grey"] {
    --theme-500: var(--pico-color-grey-300);
    --theme-550: var(--pico-color-grey-350);
    --theme-600: var(--pico-color-grey-400);
    --pico-primary-inverse: rgba(0, 0, 0, 0.75);
}

[color-theme="zinc"] {
    --theme-500: var(--pico-color-zinc-500);
    --theme-550: var(--pico-color-zinc-550);
    --theme-600: var(--pico-color-zinc-600);
}

[color-theme="slate"] {
    --theme-500: var(--pico-color-slate-600);
    --theme-550: var(--pico-color-slate-650);
    --theme-600: var(--pico-color-slate-700);
}

td[data-field] {
    cursor: text;
}

iconify-icon {
    font-size: 1.2em;
    vertical-align: middle;
}

.icon {
    height: 1.2em;
    vertical-align: middle;
}

main+footer {
    margin-top: 2rem;
}

mark.primary {
    --pico-mark-background-color: var(--pico-primary-background);
    --pico-mark-color: var(--pico-primary-inverse);
}

mark.secondary {
    --pico-mark-background-color: var(--pico-secondary-background);
    --pico-mark-color: var(--pico-secondary-inverse);
}

mark.contrast {
    --pico-mark-background-color: var(--pico-contrast-background);
    --pico-mark-color: var(--pico-contrast-inverse);
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) [color-theme] {
        --pico-primary-hover: var(--theme-500);
        --pico-primary-hover-background: var(--theme-500);
    }
}

/* View Transitions */
@view-transition {
    navigation: auto;
}

/* Specify a custom view transition name */
main {
    view-transition-name: main-content;
}

/* Apply animations to the snapshots */
/* Note, `main-content` is the view transition name specified in the previous CSS block */
html:active-view-transition-type(forward) {
    --distance: 100vw;

    &::view-transition-old(main-content) {
        animation: 400ms ease both slide-out-left;
    }

    &::view-transition-new(main-content) {
        animation: 400ms ease both slide-in-right;
    }
}

html:active-view-transition-type(backward) {
    --distance: 100vw;

    &::view-transition-old(main-content) {
        animation: 400ms ease both slide-out-right;
    }

    &::view-transition-new(main-content) {
        animation: 400ms ease both slide-in-left;
    }
}

/* Define the animations */
@keyframes slide-out-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--distance, 100%)));
    }
}

@keyframes slide-out-right {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(var(--distance, 100%));
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(calc(-1 * var(--distance, 100%)));
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    from {
        transform: translateX(var(--distance, 100%));
    }

    to {
        transform: translateX(0);
    }
}

@keyframes shutdown {
    0% {
        scale: 1 1;
    }

    50% {
        scale: 1 .005;
    }

    100% {
        scale: 0 0;
    }
}

@media (prefers-reduced-motion) {

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

@media (scripting: none) {
    body:not(.scrolled) #backToTop {
        translate: none;
    }

    #color-scheme-toggle iconify-icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='SVG2oZHmemU'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5' fill='%23fff'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.5'%3E%3Canimate fill='freeze' attributeName='cx' dur='0.4s' values='7.5;11'/%3E%3Canimate fill='freeze' attributeName='r' dur='0.4s' values='5.5;6.5'/%3E%3C/circle%3E%3C/mask%3E%3Cmask id='SVG5KjW8XKI'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='9' r='5.5'%3E%3Canimate fill='freeze' attributeName='cy' begin='1s' dur='0.5s' values='9;15'/%3E%3C/circle%3E%3Cg fill-opacity='0'%3E%3Cuse href='%23SVGVFoRVwOl' transform='rotate(-75 12 15)'/%3E%3Cuse href='%23SVGVFoRVwOl' transform='rotate(-25 12 15)'/%3E%3Cuse href='%23SVGVFoRVwOl' transform='rotate(25 12 15)'/%3E%3Cuse href='%23SVGVFoRVwOl' transform='rotate(75 12 15)'/%3E%3Cset fill='freeze' attributeName='fill-opacity' begin='1.5s' to='1'/%3E%3CanimateTransform attributeName='transform' dur='5s' repeatCount='indefinite' type='rotate' values='0 12 15;50 12 15'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0 10h26v5h-26z'/%3E%3Cpath stroke='%23fff' stroke-dasharray='26' stroke-dashoffset='26' stroke-width='2' d='M22 12h-22'%3E%3Canimate attributeName='d' dur='6s' repeatCount='indefinite' values='M22 12h-22;M24 12h-22;M22 12h-22'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.5s' dur='0.4s' values='26;0'/%3E%3C/path%3E%3C/mask%3E%3Csymbol id='SVGVFoRVwOl'%3E%3Cpath d='M11 18h2L12 20z' opacity='0'%3E%3Canimate fill='freeze' attributeName='d' begin='1.5s' dur='0.4s' values='M11 18h2L12 20z;M10.5 21.5h3L12 24z'/%3E%3Cset fill='freeze' attributeName='opacity' begin='1.5s' to='1'/%3E%3C/path%3E%3C/symbol%3E%3C/defs%3E%3Cg fill='%23000'%3E%3Crect width='13' height='13' x='1' y='1' mask='url(%23SVG2oZHmemU)'/%3E%3Cpath d='M-2 11h28v13h-28z' mask='url(%23SVG5KjW8XKI)' transform='rotate(-45 12 12)'/%3E%3C/g%3E%3C/svg%3E");
        background-color: currentColor;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }

    iconify-icon {
        font-size: unset;
        vertical-align: unset;
    }

    .copy-button {
        display: none;
    }
}