akkoma-fe/src/components/mention_link/mention_link.scss

.MentionLink {
  position: relative;
  white-space: normal;
  display: inline-block;
  color: var(--link);

  & .new,
  & .original {
    display: inline-block;
    border-radius: 2px;
  }

  .original {
    opacity: 0.5;
  }

  .full {
    position: absolute;
    display: inline-block;
    pointer-events: none;
    opacity: 0;
    top: 100%;
    left: 0;
    height: 100%;
    word-wrap: normal;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    z-index: 1;
    margin-top: 0.25em;
    padding: 0.5em;
  }

  & .short,
  & .full {
    &::before {
      color: var(--faint);
      content: '@';
    }
  }

  .new:not(.-highlighted) {
    .short {
      background: none;
    }
  }
  .new {
    &,
    &.-highlighted {
      .short {
        line-height: 1.5;

        &::before {
          display: inline-block;
          height: 50%;
          line-height: 1;
          vertical-align: 6%;
        }
      }

      .you {
        padding-right: 0.25em;
      }

      .short {
        padding-left: 0.25em;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;
      }

      .userName {
        display: inline-block;
        color: var(--link);
        line-height: inherit;
        margin-left: 0.25em;
        padding-left: 0.25em;
        padding-right: 0.25em;
        padding-top: 0;
        padding-bottom: 0;
        border-top-right-radius: var(--btnRadius);
        border-bottom-right-radius: var(--btnRadius);
      }
    }

    &.-striped {
      & .userName,
      & .full {
        background-image:
          repeating-linear-gradient(
            135deg,
            var(--____highlight-tintColor),
            var(--____highlight-tintColor) 5px,
            var(--____highlight-tintColor2) 5px,
            var(--____highlight-tintColor2) 10px
          );
      }
    }

    &.-solid {
      & .userName,
      & .full {
        background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
      }
    }

    &.-side {
      & .userName,
      & .userNameFull {
        box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
      }
    }
  }

  .new {
    &.-you {
      & .shortName,
      & .full {
        font-weight: 600;
      }
    }
  }

  &:hover .new .full {
    opacity: 1;
    pointer-events: initial;
  }
}