.container {
  @apply mx-auto px-6;
}

.top {
  @apply flex justify-between pt-6;
}

.tagContainer {
  @apply pb-4 text-primary;
}

.list {
  @apply mt-10 px-6;

  @screen lg {
    @apply px-10;
  }
}

.header {
  @apply relative font-semibold pb-2;
}

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

  @screen lg {
    @apply -left-[2.9rem];
  }
}

.latest {
  @apply inline-block px-4 mx-4 rounded-full bg-white border-2 border-green-400 text-green-400 text-sm font-semibold py-[0.05rem];
}

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

.commitId {
  @apply font-semibold text-storm-200 mb-1.5;

  &:hover {
    @apply text-stone-100;
  }

  @screen lg {
    @apply mx-4 mb-0;
  }
}

.commitIcon {
  @apply hidden;

  @screen lg {
    @apply inline;
  }
}

.releaseName {
  @apply pb-2 max-w-4xl text-base;
}

.releaseNotes > p {
  @apply py-4;
}

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

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

.errorContainer {
  @apply text-center m-6;
}

.errorText {
  @apply text-red-600 text-lg;
}

.fieldInput {
  @apply w-full p-2 border border-stone-100 rounded text-sm;
}

.fieldTextarea {
  @apply w-full p-2 border border-stone-100 rounded text-sm min-h-[80px];
  resize: vertical;
}

.fieldSelect {
  @apply w-full p-2 border border-stone-100 rounded text-sm bg-white;
}

.groupedTests {
  @apply mb-4;
}

.groupedList {
  @apply list-none p-0 m-0;
}

.itemBottom {
  @apply text-storm-200 font-normal flex flex-col-reverse;
  a {
    @apply font-normal;
  }

  @screen lg {
    @apply block;
  }
}

.bold {
  @apply font-semibold;
}

.delete {
  @apply hidden;

  @screen lg {
    @apply block ml-2;
  }
}

.actionArea {
  @apply flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 mb-6;
}

.createActions {
  @apply flex gap-2;
}

.createActions button {
  @apply px-3 py-1.5 text-sm font-semibold;
  min-width: 100px;
}

.primaryActions {
  @apply flex gap-3;
}

.primaryActions button {
  @apply px-3 py-1.5 text-sm;
  min-width: 100px;
}

.createButton {
  @apply flex items-center justify-center px-3 py-1.5 text-sm font-semibold bg-sky-600 text-white rounded hover:bg-sky-700 transition-colors duration-200;
  min-width: 100px;
}

.createButton:focus {
  @apply outline-none ring-2 ring-sky-500 ring-offset-2;
}

.plus {
  @apply mr-1.5;
}

.caret {
  @apply ml-1.5;
}

.createPopup {
  @apply text-primary;
}

.createPopupItem {
  @apply mx-2 my-3 text-sm;
}

.createPopupItem button {
  @apply w-full text-left text-sky-600 hover:text-sky-700 font-semibold;
  border: none;
  background: transparent;
  outline: none;
}

.createPopupItem button svg {
  @apply inline-block mr-2.5 mb-0.5 text-lg;
}

.saveActions {
  @apply flex gap-2 mt-4 pt-4 border-t border-stone-300;
}

.saveActions button {
  @apply px-2 py-1 text-xs;
}

.inlineGroupSelect {
  @apply bg-transparent border border-stone-300 rounded text-sm px-2 py-1 ml-2 mr-2;
  font-size: 13px;
  width: auto;
  min-width: 120px;
}

.inlineGroupSelect:focus {
  @apply border-sky-400 outline-none;
}

.ungroupedDivider {
  @apply font-semibold text-center w-full my-8 text-base text-storm-500;
}

.ungroupedTests {
  @apply mb-4;
}

.runAllButton {
  @apply bg-green-600 text-white;
}
