.wrapper {
  @apply flex justify-between mt-4 flex-col-reverse;
  @screen md {
    @apply flex-row;
  }
}

.mergeDetails {
  @screen md {
    @apply w-9/12 mx-auto;
  }
}
.outer {
  @apply mx-auto max-w-3xl flex flex-col;

  h3 {
    @apply text-center mt-4 mb-4;
  }

  @screen lg {
    @apply flex-row;
  }
}

.container {
  @apply w-full mb-4 rounded-xl min-w-[15rem];
  @screen lg {
    @apply w-[calc(100%-4rem)] mx-3 mb-0;
  }
}

.top {
  @apply bg-green-50 pl-4 pr-4 py-2 border border-green-500 flex justify-between items-start rounded-t-xl flex-wrap w-full;

  @screen lg {
    @apply items-center pl-6;
  }
}

.picContainer {
  @apply w-7 h-7 mb-4 mr-1 text-white relative rounded-full bg-green-400 flex-shrink-0;

  @screen lg {
    @apply mb-0 mt-3 ml-2;
  }
  svg {
    @apply text-white mt-1 ml-1 w-5 h-5;
  }
}

.redIcon {
  @apply bg-red-300;
}

.merge {
  @apply mx-2;
  @screen lg {
    @apply mx-0;
  }
}

.msg {
  @apply px-6 py-2 border-x border-b rounded-b-xl  bg-white border-green-500;
}

.userCheckbox {
  @apply text-sm mt-4;
}

.conflictsNote {
  @apply font-normal my-0.5 py-1 block;

  ul {
    @apply mb-5 mt-3;
  }

  li {
    @apply flex my-1 text-sm;
  }
}

.conflictsTable {
  @apply flex items-center w-36;

  svg {
    @apply mr-2;
  }
}

.icon {
  @apply mr-2 mt-0.5;
}

.green {
  @apply text-green-500;
}

.mergeStatusIcon {
  @apply inline-block mr-2 text-2xl;
}

.red {
  @apply text-red-400 flex border-red-400 bg-coral-50;
}

.msgRed {
  @apply border-red-400;
}

.popup {
  @apply p-4 text-primary;

  h4,
  p {
    @apply text-sm mb-2;
  }

  code {
    @apply text-xs;
  }
}

.conflicts {
  @apply min-w-[500px];
}

.button {
  @apply text-button-1 px-0 no-underline;
}

.down {
  @apply w-2 h-2 p-0 bg-white absolute rounded-sm top-[-3.68rem] left-4 border-r-0 border-b-0 border-l border-t border-stone-100 rotate-45;
}

.toggle {
  @apply font-normal text-storm-200 border-none px-3 text-sm hidden lg:contents;
}

.arrow {
  @apply relative z-10;
}

.arrowGrey {
  @apply border-stone-100 bg-stone-50;
}

.arrowRed {
  @apply border-red-400 bg-coral-50;
}

.arrowGreen {
  @apply bg-green-50 border-green-500;
}

.arrowOrange {
  @apply bg-orange-50 border-orange-500;
}

.arrowLeft {
  @apply w-4 h-4 absolute rounded-sm rotate-45 border-l border-t -top-2 left-3;
  @screen lg {
    @apply border-b border-t-0 left-[0.3rem] top-[1.2rem];
  }
}

.conflictsLoader {
  @apply mb-2 ml-0;
}

.testRow {
  @apply bg-indigo-50 border-x border-indigo-500 px-6 py-3 text-sm;
}

.testRowPassed {
  @apply bg-green-50 border-green-500 text-green-600;
}

.testRowFailed {
  @apply bg-red-50 border-red-500 text-red-600;
}

.testContent {
  @apply flex justify-between items-start flex-wrap w-full;

  @screen lg {
    @apply items-center;
  }
}

.testInfo {
  @apply flex-1 mr-4;
}

.testActions {
  @apply flex flex-row gap-2 items-center justify-end;
}

.testButton {
  @apply px-3 py-1.5 flex items-center justify-center rounded-md border border-stone-300 bg-white hover:bg-stone-50 transition-colors text-sm font-medium;

  &:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  &:hover:not(:disabled) {
    @apply border-stone-400;
  }
}

.buttonContent {
  @apply flex items-center gap-1.5;
}

.buttonIcon {
  @apply w-3 h-3 text-green-600;
}

.testErrors {
  @apply mt-2 ml-4;

  li {
    @apply mb-1 text-xs;
  }
}

.dropdown {
  @apply relative;
}

.dropdownButton {
  @apply flex items-center gap-1.5;
}

.chevron {
  @apply w-4 h-4 transition-transform duration-200;
}

.chevronOpen {
  @apply rotate-180;
}

.dropdownMenu {
  @apply absolute right-0 top-full mt-2 bg-white border border-stone-300 rounded-lg shadow-xl z-50 min-w-[160px] py-1;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dropdownItem {
  @apply w-full text-left px-4 py-2.5 text-sm text-stone-700 hover:bg-stone-50 hover:text-stone-700 border-none bg-transparent cursor-pointer transition-colors duration-150 font-medium;

  &:first-child {
    @apply rounded-t-lg;
  }

  &:last-child {
    @apply rounded-b-lg;
  }

  &:hover {
    @apply bg-indigo-50 text-indigo-700;
  }
}

.dropdownLink {
  @apply block w-full text-left px-4 py-2.5 text-sm text-stone-700 hover:bg-indigo-50 hover:text-indigo-700 no-underline transition-colors duration-150 font-medium;

  &:first-child {
    @apply rounded-t-lg;
  }

  &:last-child {
    @apply rounded-b-lg;
  }
}
