@use "../../../styles/int.scss";

.container {
  display: grid;
  grid-template-areas: "avatar timestamp timestamp"
    "avatar attribution attribution"
    "content content content";
  grid-template-columns: max-content max-content 1fr;
  color: int.$altblack-100;

  &.vertical-top.noTimestamp {
    grid-template-columns: max-content 1fr;
    grid-template-areas: "avatar attribution"
      "content content";
  }

  &.vertical-bottom {
    grid-template-areas: "content content content"
      "avatar timestamp timestamp"
      "avatar attribution attribution";

    &.noTimestamp {
      grid-template-areas: "content content content"
        "avatar attribution attribution";
    }
  }

  &.horizontal {
    grid-template-areas: "avatar timestamp"
      "avatar content"
      "attribution content";
    grid-template-columns: max-content 1fr;
    grid-template-rows: auto auto auto 1fr;

    &.noTimestamp {
      grid-template-areas: "avatar content"
        "attribution content";
    }
  }
}

.timestamp {
  grid-area: timestamp;
  color: int.$gray-60;

  @include int.sans($size: "000", $role: "component");

  .noTimestamp & {
    display: none;
  }

  .vertical-top & {
    align-self: flex-end;
  }

  .vertical-bottom & {
    align-self: flex-end;
  }

  .horizontal & {
    margin-left: int.$spacing-6;
  }
}

.content {
  grid-area: content;

  .standard & {
    @include int.sans($size: "200", $role: "component");

    @include int.container-at-least("md") {
      @include int.sans($size: "300", $role: "component");
    }

    @include int.container-at-least("xl") {
      @include int.sans($size: "400", $role: "component");
    }
  }

  .large & {
    @include int.title($size: "100", $weight: "regular");

    @include int.breakpoint-at-least("sm") {
      @include int.title($size: "200", $weight: "regular");
    }

    @include int.breakpoint-at-least("lg") {
      @include int.title($size: "300", $weight: "regular");
    }
  }

  .large.long & {
    @include int.title($size: "100", $weight: "regular");

    @include int.breakpoint-at-least("sm") {
      @include int.title($size: "100", $weight: "regular");
    }

    @include int.breakpoint-at-least("lg") {
      @include int.title($size: "200", $weight: "regular");
    }

    
  }

  .vertical-top & {
    margin-top: int.$spacing-2;
  }

  .vertical-bottom & {
    margin-bottom: int.$spacing-2;
  }

  .horizontal & {
    margin-left: int.$spacing-6;
  }
}

@include int.customize-component(".content") {
  .int-style.int-style-MarkdownContent__paragraph {
    margin-top: int.$spacing-4;

    &:first-of-type {
      margin-top: 0;
    }
  }
}

.avatar {
  grid-area: avatar;

  .vertical-top & {
    margin-right: int.$spacing-4;
  }

  .vertical-bottom & {
    margin-right: int.$spacing-3;
  }

  .horizontal & {
    margin-right: int.$spacing-3;
  }

  &:empty,
  &.noAvatar {
    display: none;
  }
}

.attribution {
  grid-area: attribution;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;

  .horizontal & {
    flex-direction: column;
    align-items: flex-start;
  }

  .vertical-top.noTimestamp & {
    flex-direction: column;
    justify-content: center;
  }
}

.name {
  @include int.title($size: "100");

  .vertical-top & {
    margin-right: int.$spacing-2;
  }

  .vertical-bottom & {
    margin-right: int.$spacing-2;
  }

  a {
    @include int.election-text-link;
  }
}

.title {
  color: int.$warmgray-50;

  @include int.sans($size: "100", $role: "component");
}