.article-copyright-info-container {
  position relative
  box-sizing border-box
  width 100%
  padding 0.8rem 0.8rem 0.8rem 1.3rem
  font-size 1rem
  background var(--background-color-2)

  &::after {
    position absolute
    top 0
    left 0
    width 0.5rem
    height 100%
    background var(--copyright-info-color)
    content ''
  }


  &:hover {
    .copy-copyright-info {
      visibility visible
    }
  }


  .copyright-info-content {
    position relative
    box-sizing border-box
    overflow-x auto

    &::-webkit-scrollbar {
      width 0.3rem
      height 0.3rem
      transition all 0.2s ease
    }

    &::-webkit-scrollbar-thumb {
      background var(--text-color-4)
    }

    &::-webkit-scrollbar-track {
      background transparent
    }

    li {
      margin-bottom 0.4rem
      color var(--text-color-3)
      white-space nowrap

      .type
      .content {
        color var(--text-color-3)
      }

      .license {
        font-weight bold
      }

      &:last-child {
        margin-bottom 0
      }
    }
  }


  .copy-copyright-info {
    position absolute
    top 0.4rem
    right 0.4rem
    box-sizing border-box
    padding 0.3rem
    visibility hidden
    cursor pointer
    transition-t("visibility", "0", "0.2", "ease-in-out")

    i {
      color var(--text-color-3)
    }
  }
}