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

.callList {
  position: absolute;
  width: 100%;
  overflow: clip;
  z-index: 1;
  transform: translateY(-110%);
  transition: transform .5s ease-in-out;
  background-color: white;
  border-bottom: 1px solid int.$warmgray-20;

  &.isActive {
    transform: translateY(0);
  }

  &.withShadow {
    border-bottom: none;

    @include int.shadow($size: "200");
  }

  &.important {
    z-index: 2;
    border-bottom: none;

    &.dem {
      background-color: int.$dem-70;
    }

    &.gop {
      background-color: int.$gop-70;
    }
  }
}

.content {
  padding-right: int.$spacing-5;
  background-color: white;

  .important.dem & {
    background-color: int.$dem-70;
  }

  .important.gop & {
    background-color: int.$gop-70;
  }

  @include int.breakpoint-at-least("sm") {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    gap: int.$spacing-4;
  }
}

.timestamp {
  display: inline-block;
  position: sticky;
  left: 0;
  margin-bottom: int.$spacing-2;
  padding-top: int.$spacing-3;
  padding-left: int.$spacing-3;
  padding-right: int.$spacing-3;
  color: int.$politico-red;
  background-color: inherit;

  @include int.overline();

  @include int.breakpoint-at-least("sm") {
    margin-bottom: 0;
    padding-top: int.$spacing-4;
    padding-bottom: int.$spacing-4;
    padding-left: int.$spacing-5;
    padding-right: int.$spacing-3;
  }

  .important & {
    color: white;
  }
}

.list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: int.$spacing-3;
  padding-left: int.$spacing-3;
  padding-bottom: int.$spacing-3;

  @include int.breakpoint-at-least("sm") {
    padding-top: int.$spacing-4;
    padding-bottom: int.$spacing-4;
    padding-left: 0;
  }

  & > * {
    border-right: 1px solid int.$warmgray-20;
    padding-right: int.$spacing-3;

    &:last-of-type {
      border-right: none;
      padding-right: 0;
    }
  }
}