/* Utility classes */

strong {
    border-bottom: solid 2.5px rgb(212, 128, 170);
}

li::marker {
    color: magenta;
    font-weight: 600;
}

.highlight {
    background-color: yellow;
    color: black;
    padding-left: 2px;
    padding-right: 2px;
}

.callout {
    background-color: #ffa5002e;
    border-radius: 12px;
    border-left: unset;
}

.callout > p {
    font-weight: 600;
}

.callout > p > .big {
    display: block;
    color: orange;
}

/* viewtransitions */
@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes slide-from-right {
    from {
        transform: translateX(90px);
    }
}

@keyframes slide-to-left {
    to {
        transform: translateX(-90px);
    }
}

/* define animations for the old and new content */
::view-transition-old(slide-it) {
    animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
        600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(slide-it) {
    animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
        600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* tie the view transition to a given CSS class */
.sample-transition {
    view-transition-name: slide-it;
}

/* Pagefind */

/* Hide the "Clear Button" that comes with Pagefind */
.pagefind-ui__search-clear {
    display: none;
}

/* Round the corners of the search bar and fix the padding */
.pagefind-ui__search-input {
    padding-inline-start: 2.75rem;
    border-radius: 5rem !important;
}

.pagefind-ui__form {
    flex-direction: column;
    box-shadow: none !important;
}

.pagefind-ui__drawer {
    margin-top: var(--pico-block-spacing-vertical);
}