@use "_variables" as *;
@use "_mixins" as *;

.root {
  display: grid;
  grid-template-columns: auto 1fr auto;
  padding: 1rem 1.5rem;
  word-break: break-word;

  > my-actor-avatar,
  > my-account-on-channel-avatar,
  > my-global-icon {
    grid-row: 1;
    grid-column: 1;
  }

  > my-account-on-channel-avatar {
    // 35px
    @include margin-right(1rem);
  }

  > my-global-icon {
    color: pvar(--secondary-icon-color);

    // Icons are smaller than my-account-on-channel-avatar (24px)
    @include margin-right(calc(1rem + 11px));
  }

  > my-actor-avatar {
    // Avatars are smaller than my-account-on-channel-avatar (30px)
    @include margin-right(calc(1rem + 5px));
  }
}

.message {
  grid-row: 1;
  grid-column: 2;
  min-width: 1px;
}

.from-date {
  grid-row: 1;
  grid-column: 3;
  font-size: 0.85rem;
  text-align: end;
  white-space: nowrap;
  line-height: 1.5rem; // Align with message line height

  @include padding-left(0.5rem);
  @include margin-left(auto);
}

.root.unread {
  .message,
  .action-button {
    color: pvar(--fg-400);
  }

  .from-date {
    color: pvar(--fg-200);
    font-weight: $font-bold;
  }
}

.root:not(.unread) {
  .message,
  .action-button {
    color: pvar(--fg-200);
  }

  .from-date {
    color: pvar(--secondary-icon-color);
  }

  > my-account-on-channel-avatar,
  > my-global-icon,
  > my-actor-avatar {
    opacity: 0.6;
  }
}

.action-button {
  grid-column: 1 / 4;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  justify-content: flex-end;
  align-items: center;

  @include font-size(14px);
}

.limit-characters {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@include on-small-main-col {
  .root {
    grid-template-columns: auto 1fr;
  }

  .message {
    grid-row: 2;
    grid-column: 1 / 3;
  }

  .action-button {
    grid-row: 3;
    grid-column: 1 / 3;
  }

  .from-date {
    grid-column: 2;
  }
}
