.container {
  @apply pb-4 pt-6 text-primary outline-none;
}

.top {
  @apply flex justify-between;
}

.buttons {
  @apply flex;
}

.button {
  @apply mr-4;
}

.title {
  @apply mx-6;
}

.scrollContainer {
  @apply mt-10;
}

.list {
  @apply pl-6 border-stone-100 border-l-[1.5px] mr-4 ml-6 py-2;

  @screen lg {
    @apply ml-32 mr-10 px-10;
  }
}

.uncommittedList {
  @apply border-none bg-[length:1.5px_10px] bg-left bg-repeat-y;
  background-image: linear-gradient(to bottom, #e1e5e7 50%, white 50%);
  padding-left: calc(1.5rem + 1.5px);

  @screen lg {
    padding-left: calc(2.5rem + 1.5px);
  }
}

.item {
  @apply relative rounded-lg my-3 py-4 text-sm;

  @screen lg {
    @apply border border-stone-50 px-6;
  }
}

.activeItem {
  @apply border-coral-400;
}

.header {
  @apply relative font-semibold pb-2 text-lg;
  @screen lg {
    @apply text-base;
  }
}

.bullet {
  @apply border-stone-100 h-3 w-3 absolute bg-white rounded-full -left-[1.9rem] border-[1.5px] top-[0.4rem];
  @screen lg {
    @apply -left-[2.9rem];
  }
}

.commitId {
  @apply font-semibold text-storm-200;
  @screen lg {
    &:hover {
      @apply text-stone-100;
    }
  }
}

.user {
  @apply font-semibold;
}

.showForMobile {
  @apply block mb-3;
  @screen lg {
    @apply hidden;
  }
}

.messageAndButton {
  @apply flex justify-between items-baseline;
}

.message {
  @apply pb-3 flex max-w-3xl items-end justify-between;

  .showForMobile {
    @apply text-sky-900 break-words font-semibold mb-0;
  }
}

.itemBottom {
  @apply flex justify-between;
}

.timeago {
  @apply text-storm-200;
}

.loading {
  @apply mx-12 my-4;
}

.noCommits {
  @apply text-center text-lg m-6;
}

.showForDesktop {
  @apply hidden;
  @screen lg {
    @apply block;
  }
}

.graphButton {
  @apply items-center px-4 mr-10 hidden md:flex;
  svg {
    @apply mr-2;
  }
}

.uncommittedRight {
  @apply flex items-center;
}

.showOverviewButton {
  @apply leading-5;
}

.hideOverviewButton {
  @apply invisible;
}

.focused {
  @apply bg-sky-50;
}

.hovered {
  @apply bg-stone-50;
}

.resetButton {
  @apply my-0;
  svg {
    @apply text-primary ml-4 text-lg;
  }
}
