.toot {
  --card-pad: 16px;
  --card-gut: 16px;
  --toot-avatar-size: 40px;
  margin-block: 0;
  position: relative;
  contain: content;
  cursor: pointer;

  &.toot {
    /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
    transition:
      margin-top 60ms var(--tutu-anim-curve-sharp),
      margin-bottom 60ms var(--tutu-anim-curve-sharp),
      height 60ms var(--tutu-anim-curve-sharp),
      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;
  contain: layout style;

  > :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: var(--tutu-color-on-surface);

  > :global(.acct-mark) {
    font-size: 1.2em;
    color: var(--tutu-color-secondary-text-on-surface);
    vertical-align: sub;
    margin-right: 0.25em;
  }
}

.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);
}

.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;
  flex-flow: row wrap;
  justify-content: flex-end;

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

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

.tootRetootGrp {
  display: flex;
  gap: 0.25em;
  margin-bottom: 8px;
  align-items: center;

  > :first-child {
    margin-right: 0.25em;
  }
}

.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;
  }
}