tutu/src/timelines/toot.module.css

.toot {
  --card-pad: 16px;
  --card-gut: 16px;
  --toot-avatar-size: 40px;
  margin-block: 0;

  &.toot {
    /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
    transition:
      margin-block 125ms var(--tutu-anim-curve-std),
      height 225ms var(--tutu-anim-curve-std),
      var(--tutu-transition-shadow);
    border-radius: 0;
  }

  &>.toot {
    box-shadow: none;
  }

  time {
    color: var(--tutu-color-secondary-text-on-surface);
  }

  & :global(.custom-emoji) {
    height: 1em;
    object-fit: contain;
  }

  &.expanded {
    margin-block: 20px;
    box-shadow: var(--tutu-shadow-e9);
  }
}

.tootAuthorGrp {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;

  > :not(:first-child) {
    flex-grow: 1;
  }
}

.tootAuthorNameGrp {
  display: grid;
  grid-template-columns: 1fr auto;

  >* {
    color: var(--tutu-color-secondary-text-on-surface);
  }

  > :last-child {
    grid-column: 1 /3;
  }

  >time {
    text-align: end;
  }

  &:hover {
    .tootAuthorNamePrimary {
      text-decoration: underline;
    }
  }
}

.tootAuthorNamePrimary {
  color: revert;
}

.tootAvatar {
  width: calc(var(--toot-avatar-size, 40px) - 1px);
  aspect-ratio: 1/1;
  object-fit: contain;
  border-radius: 50% 50%;
  overflow: hidden;
  border: 1px solid var(--tutu-color-surface);
  background-color: var(--tutu-color-surface-d);
}

.tootContent {
  composes: cardNoPad from "../material/cards.module.css";
  margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
  margin-right: var(--card-pad, 0);
  line-height: 1.5;

  & a {
    color: var(--tutu-color-primary-d);
  }

  & :global(a[target="_blank"]) {
    > :global(.invisible) {
      display: none;
    }

    > :global(.ellipsis) {
      &::after {
        display: inline;
        content: "...";
      }
    }
  }
}

.previewCard {
  composes: cardGutSkip from "../material/cards.module.css";
  display: block;
  border: 1px solid #eeeeee;
  background-color: var(--tutu-color-surface);
  text-decoration: none;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 1em;
  margin-bottom: 1.5em;
  color: var(--tutu-color-secondary-text-on-surface);
  transition: color 220ms var(--tutu-anim-curve-std), background-color 220ms var(--tutu-anim-curve-std);
  padding-bottom: 8px;
  overflow: hidden;
  z-index: 1;
  position: relative;

  >img {
    max-width: 100%;
  }

  &:hover,
  &:focus-visible {
    background-color: var(--tutu-color-surface-d);
    color: var(--tutu-color-on-surface);

    >h1 {
      text-decoration: underline;
    }
  }

  >h1 {
    color: var(--tutu-color-on-surface);
    max-height: calc(4 * var(--title-line-height) * var(--title-size));
  }

  >p {
    max-height: calc(8 * var(--body-line-height) * var(--body-size));
  }

  >h1,
  >p {
    margin-left: 16px;
    margin-right: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &.compact {
    display: grid;
    grid-template-columns: minmax(10%, 30%) 1fr;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;

    >img:first-child {
      grid-row: 1 / 3;
      object-fit: contain;
    }

    >h1,
    >p {
      margin-right: 0;
    }
  }
}

.toot.compact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  row-gap: 0;
  padding-block: var(--card-gut, 16px);
  padding-inline: var(--card-pad, 16px);

  > :first-child {
    grid-row: 1/3;
  }

  > :last-child {
    grid-column: 2 /3;
  }
}

.compactAuthorGroup {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;

  >.compactAuthorUsername {
    color: var(--tutu-color-secondary-text-on-surface);
    flex-grow: 1;
  }

  >time {
    color: var(--tutu-color-secondary-text-on-surface);
  }
}

.compactTootContent {
  composes: tootContent;
  margin-left: 0;
  margin-right: 0;
}

.tootRetootGrp {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
}

.tootAttachmentGrp {
  composes: cardNoPad from "../material/cards.module.css";
  margin-top: 1em;
  margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
  margin-right: var(--card-pad, 0);
  display: grid;
  gap: 4px;

  > :where(img) {
    max-height: 35vh;
    min-height: 40px;
    object-fit: contain;
    max-width: 100%;
    background-color: var(--tutu-color-surface-d);
    border-radius: 2px;
    border: 1px solid transparent;
    transition: border-color 220ms var(--tutu-anim-curve-std),
      box-shadow 220ms var(--tutu-anim-curve-std);

    &:hover,
    &:focus-visible {
      border: 1px solid var(--tutu-color-surface-dd);
      box-shadow: var(--tutu-shadow-e1);
    }
  }
}

.tootBottomActionGrp {
  composes: cardGutSkip from "../material/cards.module.css";
  padding-block: calc((var(--card-gut) - 10px) / 2);

  animation: 225ms var(--tutu-anim-curve-std) tootBottomExpanding;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;

  >button {
    color: var(--tutu-color-on-surface);
    padding: 10px 8px;

    >svg {
      font-size: 20px;
    }
  }
}

.tootActionWithCount {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tootAction {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes tootBottomExpanding {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}