.funkwhale {
  &.activity {
    padding: 12px 6px;

    @include light-theme {
      color: var(--fw-gray-500);

      + .funkwhale.activity {
        border-top: 1px solid var(--fw-gray-300);
      }

      > .activity-content {
        > .track-title {
          color: var(--fw-gray-900);
        }

        > .artist {
          --fw-link-color: var(--fw-gray-900);
        }

        > .user {
          --fw-link-color: var(--fw-gray-500);
        }
      }

      .play-button {
        background: rgba(255, 255, 255, .5);

        &:hover {
          --fw-text-color: var(--fw-gray-800) !important;
        }
      }
    }

    @include dark-theme {
      + .funkwhale.activity {
        border-top: 1px solid var(--fw-gray-800);
      }

      > .activity-content {
        > .track-title {
          color: var(--fw-gray-300);
        }

        > .artist {
          --fw-link-color: var(--fw-gray-300);
        }

        > .user {
          --fw-link-color: var(--fw-gray-500);
        }
      }

      .play-button {
        background: rgba(0, 0, 0, .2);

        &:hover {
          background: rgba(0, 0, 0, .8);
          --fw-text-color: var(--fw-gray-200) !important;
        }
      }
    }

    cursor: pointer;

    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;

    grid-column: span 4;

    > .activity-image {
      position: relative;
      width: 40px;
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: var(--fw-border-radius);

      > img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
      }

      > .play-button {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 !important;
        width: 100%;
        aspect-ratio: 1;
        margin: 0;
        border: 0 !important;
        opacity: 0;
      }
    }

    &:hover {
      .play-button {
        opacity: 1;
      }
    }

    > .activity-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      > .track-title {
        font-weight: 700;
        line-height: 1.5em;
      }

      > .artist {
        line-height: 1.5em;
        font-size: 0.857rem;
      }

      > .user {
        line-height: 1.5em;
        font-size: 0.8125rem;
      }
    }
  }
}