.yfm-term {
    &_title {
        color: var(--yfm-color-term-title);
        cursor: pointer;

        border-bottom: 1px dotted;

        font-size: inherit;
        line-height: inherit;
        font-style: normal;

        &:hover {
            color: var(--yfm-color-term-title-hover);
        }
    }

    &_dfn {
        position: absolute;
        z-index: 100;

        visibility: hidden;
        opacity: 0;

        padding: 10px;

        background-color: var(--yfm-color-term-dfn-background);

        font-size: inherit;
        line-height: inherit;
        font-style: normal;

        border-radius: 4px;

        box-shadow: 0 8px 20px var(--yfm-color-term-dfn-shadow);
        outline: none;

        width: fit-content;
        max-width: 450px;

        @media screen and (max-width: 600px) {
            & {
                max-width: 80%;
            }
        }

        &::before {
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;

            border-radius: inherit;
            box-shadow: 0 0 0 1px var(--yfm-color-term-dfn-pseudo-shadow);
        }

        &.open {
            visibility: visible;

            animation-name: popup;
            animation-duration: 0.1s;
            animation-timing-function: ease-out;
            animation-fill-mode: forwards;

            @keyframes popup {
                0% {
                    opacity: 0;
                    transform: translateY(10px);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        }
    }
}
