@mixin block-meta {
    font-size: var(--farallon-text-size-small);
    color: var(--farallon-text-gray-lightest);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2px;

    time {
        display: flex;
        align-items: center;
    }

    svg {
        margin-right: 4px;
        fill: var(--farallon-text-gray-lightest);
        margin-left: 10px;
        &:first-child {
            margin-left: 0;
        }
    }

    a {
        &:hover {
            text-decoration: underline;
        }
    }

    @media screen and (max-width: 768px) {
        font-size: var(--farallon-text-size-smallest);

        svg {
            width: 14px;
            height: 14px;
            margin-left: 7px;
        }
    }
}

@mixin centered {
    margin-left: auto;
    margin-right: auto;
}

@mixin sns-icons {
    display: flex;
    align-items: center;
    --farallon-icon-size: 20px;

    a {
        margin: 0 10px 0 0;
        &:last-child {
            margin-right: 0;
        }
    }

    svg {
        fill: var(--farallon-text-color);
        width: var(--farallon-icon-size);
        height: var(--farallon-icon-size);

        &:hover {
            fill: var(--farallon-hover-color);
        }

        &.sns {
            fill: none;
            stroke: var(--farallon-text-color);

            &:hover {
                stroke: var(--farallon-hover-color);
                fill: none;
            }
        }
    }
}

@mixin navigation {
    //border-radius: 999rem;

    padding: 20px;
    --farallon-navigation-font-size: 20px;
    font-size: var(--farallon-navigation-font-size);
    color: var(--farallon-text-light);

    &:hover {
        color: var(--farallon-hover-color);
    }
    // border: 1px solid #eee;
    &.current {
        font-weight: bold;
        cursor: not-allowed;
        body:not(.is-cleanMode) & {
            &:after {
                border: 12px solid transparent;
                background-clip: padding-box;
                content: "";
                filter: blur(36px);
                height: 50%;
                opacity: 0.8;
                position: absolute;
                width: 50%;
                //z-index: -1;
                background-image: linear-gradient(165deg, #007cf0, #00dfd8);
                left: 0;
            }
        }
    }

    &.dots {
        color: var(--farallon-text-gray);
    }
    position: relative;
}

@mixin block-hover-gradient {
    &:hover {
        background-color: rgba(234, 243, 255, 0.5);
        background-image: linear-gradient(
            12deg,
            #fff 50%,
            hsla(0, 0%, 100%, 0)
        );
        // border-radius: 18px;
        transform: none;
        transform-origin: 50% 50% 0px;
    }

    .dark & {
        &:hover {
            background: linear-gradient(180deg, #1e1e1e, #121212);
        }
    }
}
