@charset "utf-8";

/*
 * GNUpress 클래스 기반 아이콘 기반 구조.
 *
 * 아이콘 모양은 테마 또는 추후 제공되는 SVG/Webfont CSS에서 연결합니다.
 * 예:
 * .g5-icon-secret {
 *     --g5-icon-image: url("./icons/lock.svg");
 * }
 *
 * 마스크 방식은 currentColor를 사용하므로 링크 hover 시 color만 변경하면
 * 아이콘 색상도 함께 바뀝니다.
 */
.g5-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    color: inherit;
    line-height: 1;
    vertical-align: -0.125em;
}

.g5-icon::before {
    display: block;
    width: 100%;
    height: 100%;
    content: "";
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .g5-icon::before {
        background-color: currentColor;
        -webkit-mask-image: var(--g5-icon-image, linear-gradient(transparent, transparent));
        mask-image: var(--g5-icon-image, linear-gradient(transparent, transparent));
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        transition: background-color 0.15s ease;
    }
}

.g5-post-states {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    margin-inline-start: 0.35em;
    color: inherit;
    vertical-align: middle;
}