.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: calc(2rem + (3rem - var(--fab-width)) * 2);
    right: var(--fab-right);
    width: var(--fab-width);
    height: var(--fab-width);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
    font-size: 1.25rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 2;
    transition: all var(--pico-transition);
    padding: var(--pico-spacing);
    background-color: var(--pico-background-color);
    --fab-appear-distance: calc((var(--fab-order, 1) - 1) * (-100% - 1rem));
    --fab-width: clamp(2.5rem, calc(5rem - (var(--fab-order) * 2rem)), 3rem);
    --fab-right: calc(2rem + (3rem - var(--fab-width)) / 2);

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

    @supports not ((animation-timeline: scroll()) and (animation-range: 0 100%)) {
        & {
            --distance: var(--fab-appear-distance);
            translate: 0 var(--distance);
        }

        body.scrolled &,
        body.reach-bottom & {
            --distance: calc(var(--fab-order, 1) * (-100% - 1rem));
        }

        body.reach-bottom &:not(.hide) {
            translate: calc(var(--fab-right) + 50%) var(--distance);
            max-width: 3rem;
            scale: 0.75;
            pointer-events: none;
        }

        body.reach-bottom &>:not(iconify-icon) {
            display: none;
        }
    }

    @supports ((animation-timeline: scroll()) and (animation-range: 0 100%)) {
        /* First animation set controls root scrolling, second set controls appearance of footer */
        animation-name: fab-appears, slide-out-down;
        animation-timeline: scroll(root block), --footer-timeline;
        animation-fill-mode: both, both;
        animation-duration: 1ms, 1ms;
        animation-range: 50px 350px, entry 0% contain 0%;
    }
}

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

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

.grid-card {
    transition: translate var(--pico-transition), box-shadow var(--pico-transition);
    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-background);
        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)) {
        display: flex;
        text-align: right;

        & a {
            flex: 1 0 auto;
        }
    }


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

.notification-badge {
    display: flex;
    place-content: center;
    place-items: center;
    position: absolute;
    top: var(--position, -0.5rem);
    right: var(--position, -0.5rem);
    border-radius: 0.75rem;
    height: 1.5rem;
    min-width: 1.5rem;
    font-size: 1rem;
    padding: 0.125rem 0.375rem;

    *:has(>&) {
        position: relative;
    }
}

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

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

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

    & form input:not(:focus) {
        -moz-appearance: textfield;
        appearance: textfield;

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }

    & form input[type=number] {
        width: 100%;
        cursor: text;
        border-radius: 0;
    }

    & form input:focus {
        border-color: var(--pico-primary-border);
        color: var(--pico-primary);
        background-color: var(--pico-primary-inverse);
        box-shadow: var(--pico-button-hover-box-shadow);
    }

    & form:first-child input {
        border-top-left-radius: var(--pico-border-radius);
        border-bottom-left-radius: var(--pico-border-radius);
    }

    & form:last-child input {
        border-top-right-radius: var(--pico-border-radius);
        border-bottom-right-radius: var(--pico-border-radius);
    }
}

.preview[popovertarget],
.preview[command=show-modal],
.preview[command=close] {
    --pico-form-element-spacing-horizontal: 0;
    --pico-form-element-spacing-vertical: 0;
    --pico-border-width: 0;
    --pico-background-color: transparent;
    --pico-color: inherit;

    &:has(>img:only-child) {
        box-shadow: none;
    }

    &>img:only-child {
        box-shadow: var(--pico-box-shadow);
    }
}

.preview[popover] {
    border: 0;
    padding: 0;
    opacity: 1;
    pointer-events: auto;
    max-width: calc(100dvw - var(--pico-spacing) * 2);
    max-height: calc(100dvw - var(--pico-spacing) * 2);

    &::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:not(.avatar, .icon) {
        display: block;
        max-width: 90dvw;
        max-height: 90dvh;
    }

    body:has(&:popover-open) {
        pointer-events: none;
    }
}

.preview[popover],
dialog.preview>* {
    opacity: 0;
    scale: 0;
    transition: all var(--pico-transition);
    transition-behavior: allow-discrete;
}

.preview[popover]:popover-open,
dialog.preview[open]>* {
    opacity: 1;
    scale: 1;

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

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 0.25rem;
    background-color: var(--pico-secondary);
    animation: scroll-progress linear;
    animation-timeline: scroll(block root);
    z-index: 1;
    /* Firefox requires this */
    animation-duration: 1ms;

    @supports not (animation-timeline: scroll()) {
        display: none;
    }
}

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

    & label {
        order: initial;
    }

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

        @starting-style {
            translate: 0 2rem;
            opacity: 0;
        }
    }

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

    & input[type="radio"]+label {
        --pico-background-color: var(--pico-secondary-background);
        --pico-border-color: var(--pico-secondary-border);
        --pico-color: var(--pico-secondary-inverse);
    }

    & [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-contrast-hover-background);
        --pico-border-color: var(--pico-contrast-hover-border);
        --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
        --pico-color: var(--pico-contrast-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 clip;
    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-background);
    --pico-color: var(--pico-secondary-inverse);
    --fab-order: 0;
    --distance: calc(100% + 3rem);
    --fab-appear-distance: var(--distance);

    @supports not ((animation-timeline: scroll()) and (animation-range: 0 100%)) {
        body:not(.scrolled) & {
            translate: 0 calc(100% + 3rem);
            transition-delay: 0s;
        }

        body.scrolled & {
            --distance: 0;
        }
    }
}

#color-scheme-toggle {
    border-bottom: 0px;

    &>summary iconify-icon {
        transform: rotate3d(1, -1, 0, 0deg);
        transition: all var(--pico-transition);
        transform-style: preserve-3d;
        border: none;
        cursor: pointer;
    }

    &>summary:hover iconify-icon,
    &>summary:focus iconify-icon {
        transform: rotate3d(1, -1, 0, -180deg);
    }

    &>ul li {
        border: none;
        direction: ltr;

        &:not([aria-selected=true]):before,
        &:not([aria-selected=true]):after {
            content: none;
        }

        &[aria-selected=true] a {
            pointer-events: none;
            background: var(--pico-secondary-background);
            color: var(--pico-secondary-inverse);
        }
    }
}

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

#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;
    }
}

#nav-title {
    flex: 1 1 auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100dvh;
    width: 100%;
    max-width: 450px;
    padding: var(--pico-spacing);
    background: color-mix(in srgb, transparent, var(--pico-card-sectioning-background-color) 90%);
    transition: all var(--pico-transition);
    box-shadow: var(--pico-box-shadow);
    overflow-x: auto;

    #sidebar-toggler:not(:checked)~& {
        opacity: 0;
        translate: -100%;
    }
}

#sidebar label[for=sidebar-toggler][ref=prev],
[popover] [ref=prev] {
    float: right;
    display: block;
    width: 1rem;
    aspect-ratio: 1 / 1;
    margin: 0;
    margin-left: var(--pico-spacing);
    padding: 0;
    border: none;
    background-image: var(--pico-icon-close);
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: .5;
    transition: opacity var(--pico-transition);

    &:focus {
        --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
            0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
        opacity: 1;
    }

    &:hover,
    &:active {
        opacity: 1;
    }
}

#sidebar-toggler {
    display: none;
}

a,
[role=link] {
    text-decoration: none;
}

aside nav>ul>li>:is(iconify-icon, img.icon):first-of-type,
aside nav>ul>li>:is(a, [role=link]):first-of-type>:is(iconify-icon, img.icon):first-of-type {
    margin-inline-end: var(--pico-spacing);
}

/* 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;
    timeline-scope: --footer-timeline;

    &>main {
        flex: 1;
    }
}

button[role=link] {
    display: inline-block;
    --pico-border-width: 0;
    --pico-form-element-spacing-vertical: 0;
    --pico-form-element-spacing-horizontal: 0;
    --pico-primary-hover-background: transparent;
    background: transparent;

    &:is(:hover, :focus, :active) {
        --pico-outline-width: 0;
    }

    &.secondary,
    &.secondary:is(:hover, :focus, :active) {
        --pico-color: var(--pico-secondary);
        --pico-secondary-inverse: var(--pico-secondary);
    }

    &.contrast,
    &.contrast:is(:hover, :focus, :active) {
        --pico-color: var(--pico-contrast);
        --pico-contrast-inverse: var(--pico-contrast);
    }
}

details:not(.dropdown) {
    &>summary {
        position: sticky;
        top: 0;
        background: var(--pico-background-color);
        padding-block: calc(var(--pico-block-spacing-vertical) / 2);
        z-index: 1;

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

    &[open]>summary {
        margin-bottom: 0;
    }

    &>summary~* {
        margin-top: var(--pico-spacing);
    }

    @supports (interpolate-size: allow-keywords) {
        &::details-content {
            transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
            height: 0;
            overflow: clip;
        }

        &[open]::details-content {
            height: auto;
        }
    }
}

details.dropdown {
    & [type=submit][role=link] {
        margin-bottom: 0;
        color: var(--pico-primary);
        text-align: start;
    }

    & li:hover:has([type=submit][role=link]) {
        background-color: var(--pico-dropdown-hover-background-color);
    }

    &[data-placement=up]>summary+ul {
        bottom: 100%;
    }
}

#go-to-home-page,
#open-sidebar {
    display: none;

    & iconify-icon {
        transition: scale var(--pico-transition);
    }

    &:hover iconify-icon {
        scale: 1.1;
    }
}

#logout {
    & iconify-icon {
        transition: scale var(--pico-transition);
    }

    &:hover iconify-icon {
        scale: 1.1;
    }
}

body:not(:has(#sidebar)) #go-to-home-page {
    display: block;
}

body:has(#sidebar) #open-sidebar {
    display: block;
}

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

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

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

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

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

    &>ul>li>details.dropdown {
        display: inline-block;
    }

    &>ul>li>details.dropdown>summary:after {
        filter: brightness(0) var(--pico-primary-invert-filter, invert(1));
    }

    &>ul>li>details.dropdown[open]>summary {
        margin-bottom: calc(var(--pico-nav-link-spacing-vertical) * -1);
    }
}

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

    & ul {
        flex-wrap: wrap;
        width: 100%;
        --pico-nav-element-spacing-vertical: 0;
    }

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

:is([role=group], [role=search]) :is([role=button], [type=button], [type=submit], button) {
    &:has(> iconify-icon):not(:has(> :not(iconify-icon))) {
        --pico-form-element-spacing-horizontal: 1rem;
    }
}

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

textarea {
    field-sizing: content;
}

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

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

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

[type=submit][aria-busy=true]:not(empty) {
    font-size: 0;
    padding-block: var(--pico-spacing);
    vertical-align: bottom;

    &:before {
        width: 1rem;
        height: 1rem;
        background-size: 1rem auto;
        margin-inline-end: 0;
    }
}

.avatar {
    display: inline-block;
    height: 1.2em;
    aspect-ratio: 1 / 1;
    vertical-align: -0.2em;
    overflow: hidden;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    line-height: 0.8em;
}

blockquote {
    transition: border var(--pico-transition);

    &:hover {
        --pico-blockquote-border-color: var(--pico-primary-border);
    }

    & footer {
        display: flex;
        align-items: baseline;
        gap: 1rem;
    }

    & time {
        color: var(--pico-muted-color);
        font-size: 0.875em;
    }

    & img.avatar {
        width: 1em;
        height: 1em;
        border-radius: 50%;
    }
}

dialog.sticky article {
    overflow: hidden;
    display: flex;
    flex-direction: column;

    &> :not(header, footer) {
        overflow: auto;
    }
}

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

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

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);
}

/* 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 fab-appears {
    from {
        translate: 0 var(--fab-appear-distance, calc(100% + 3rem));
    }

    to {
        translate: 0 calc(var(--fab-order) * (-100% - 1rem));
    }
}

@keyframes scroll-progress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

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

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

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

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

@keyframes slide-out-down {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(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) {
    @supports not ((animation-timeline: scroll()) and (animation-range: 0 100%)) {
        body:not(.scrolled) #backToTop {
            translate: none;
        }

        body:not(.scrolled) .fab {
            translate: 0 calc(var(--fab-order, 1) * (-100% - 1rem));
        }
    }

    #color-scheme-toggle>summary iconify-icon {
        display: inline-block;
        width: 1.2em;
        height: 1em;
        --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%;
        scale: 1.2;
    }

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

    .copy-button,
    .hide-when-no-js {
        display: none;
    }
}

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }
}