body {
    background-color: var(--wp--preset--color--background);
    color: var(--wp--preset--color--contrast);
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
}

.block:has(>.content) {
    width: 100%;

    & .content {
        width: var(--max-width--content);
        margin-inline: auto;
    }
}

.site-main {
    border-top: 1px solid var(--wp--preset--color--base);
}

.btn-pagination {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    display: grid;
    place-content: center;
    width: 4rem;
    height: 4rem;
    background-color: var(--wp--preset--color--tertiary);
    border: none;
    cursor: pointer;
    transition: all .3s ease;
    background-image: linear-gradient(-60deg, transparent, transparent 40%, #ffffff44 40%, #ffffff44 60%, transparent 60%, transparent 100%);
    background-size: 200% 100%;
    background-position-x: 150%;
    background-repeat: no-repeat;

    &:hover {
        cursor: pointer;
        background-position-x: -150%;
        transition: all 1s;
        background-color: var(--wp--preset--color--secondary);
    }

    & svg {
        width: 1.6rem;
        height: 1.6rem;
    }

    &.small-pagination {
        width: 3rem;
        height: 3rem;

        & svg {
            width: 1.5rem;
            height: 1.5rem;
        }
    }

    &:active {
        transform: scale(.8);
    }

    &:focus-visible {
        outline: none;
        background-color: var(--wp--preset--color--focus);
        color: var(--wp--preset--color--base);
    }
}

.post--tags {
    display: flex;
    gap: 0.5rem;
}

.post-tag {
    display: inline-flex;
    flex-wrap: nowrap;
    text-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 0.5rem;
    background-color: var(--wp--preset--color--tertiary);
    transition: all .3s ease;
    background-image: linear-gradient(-60deg, transparent, transparent 40%, #ffffff44 40%, #ffffff44 60%, transparent 60%, transparent 100%);
    background-size: 200% 100%;
    background-position-x: 150%;
    background-repeat: no-repeat;

    &:hover {
        cursor: pointer;
        background-position-x: -150%;
        transition: all 1s;
        background-color: var(--wp--preset--color--secondary);
    }

    &:active {
        transform: translateY(.063rem);
    }

    &:focus-visible {
        outline: none;
        background-color: var(--wp--preset--color--focus);
        color: var(--wp--preset--color--base);
    }
}

& :is(.loop-gallery-bullets, .related-bullets) {
    color: var(--wp--preset--color--contrast);

    & .bullet {
        background-color: var(--wp--preset--color--bullet);
        display: grid;
        width: .625rem;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        border: none;
        transition: background-color .3s ease;

        &.active {
            background-color: var(--wp--preset--color--bullet-active);
        }

        &:focus-visible {
            outline: none;
            background-color: var(--wp--preset--color--focus);
        }
    }
}

.stories-block-search__inside-wrapper {
    position: relative;

    & .stories-block-search__button {
        position: absolute;
        top: .125rem;
        right: .125rem;
        height: 2.625rem;
        width: 2.625rem;
        padding: 0;
        display: grid;
        place-content: center;
        background-color: transparent;
        border: none;
        color: inherit;
        transition: background-color .3s ease;

        &:hover {
            background-color: light-dark(var(--wp--preset--color--tertiary), var(--wp--preset--color--tertiary-night));
        }

        &:focus-visible {
            outline: none;
            background-color: var(--wp--preset--color--focus);
            color: var(--wp--preset--color--base);
        }
    }
}

.social {
    & .menu {
        display: flex;
        align-items: center;
        gap: 2rem;

        & li {
            & a {
                position: relative;
                display: grid;
                font-size: 0;

                &::before {
                    position: relative;
                    content: '';
                    display: block;
                    width: 1rem;
                    height: 1rem;
                    transition: background-color .3s ease-in-out;
                    background-color: currentColor;
                }

                &:hover {
                    &::before {
                        background-color: var(--wp--preset--color--primary);
                    }
                }

                &:focus-visible {
                    outline: none;

                    &::before {
                        background-color: var(--wp--preset--color--focus);
                    }
                }
            }
        }
    }
}

.glass-backdrop {
    background-color: light-dark(var(--wp--preset--color--base-alpha-50), var(--wp--preset--color--base-alpha-50-night));
    backdrop-filter: blur(1rem);
}

@keyframes animate-in--post {
    from {
        opacity: 0;
        transform: translateY(4rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}