@use "../../../styles/mixins";

.root {
  @include mixins.middle-header-pane;

  cursor: var(--custom-cursor, pointer);

  display: flex;
  gap: 0.5rem;
  align-items: center;

  height: auto;

  // Slight variation from mixins.middle-header-pane
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-left: max(1rem, env(safe-area-inset-left));

  line-height: 1.25;

  transition: background-color 0.2s, transform var(--slide-transition);

  &:hover {
    background-color: var(--color-background-selected);
  }
}

.content {
  display: flex;
  flex-grow: 1;
  gap: 0.5rem;
  align-items: center;

  color: var(--color-text);
}

.info {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  color: var(--accent-color);
}

.avatar {
  --radius: 0.25rem;

  flex-shrink: 0;
}

.title, .info {
  font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.25rem;
}

.text {
  font-size: 0.8125rem;
}

.aboutAd {
  font-size: 0.6875rem;
}
