.message,
.Message {
  @apply relative flex h-fit justify-start gap-3 border-b border-gray-200 bg-gray-25 p-4 text-sm text-gray-600 [--link-color:theme(colors.gray.700)] max-md:flex-col max-md:gap-0;

  > .Message-icon {
    @apply order-[-1] text-[--link-color] before:btu-icon before:btu-icon-info max-md:mb-2;
  }

  &:has(ol, ul) {
    @apply flex-wrap;
  }

  ol,
  ul {
    &:not(:has(li:only-child)) {
      @apply ms-8 w-full;
    }

    li:only-child {
      @apply list-none;
    }
  }

  ol {
    @apply list-decimal;
  }

  ul {
    @apply list-disc;
  }

  p {
    @apply m-0;
  }

  a {
    @apply order-3 ms-auto font-semibold text-[--link-color] decoration-solid decoration-auto max-md:ms-0;
  }

  .is-emphasis {
    @apply mx-2 my-0 font-semibold uppercase;
  }
}

.Message.no-gap {
  @apply gap-0;

  .Message-icon {
    @apply me-2;
  }
}

.Message.is-grid {
  @apply grid;

  > .Message-icon {
    /* Place the icon in the first column */
    @apply col-start-1;
  }

  > .Message-body {
    @apply col-start-2;
  }
}

.Message.is-error,
.Message.is-success {
  @apply text-white;
}

.Message.is-success p {
  @apply contents;
}

.Message.is-error {
  @apply border-error-200 bg-error-25 text-error-600 [--link-color:theme(colors.error.700)] more-contrast:text-error-700 more-contrast:[--link-color:theme(colors.error.800)];

  > .Message-icon {
    @apply before:btu-icon-circle-alert;
  }
}

.Message.is-warning {
  @apply border-warning-200 bg-warning-25 text-warning-700 [--link-color:theme(colors.warning.800)] more-contrast:text-warning-800;

  > .Message-icon {
    @apply before:btu-icon-triangle-alert;
  }

  .WorkInProgressRestoredMessage-actions {
    @apply contents;
  }
}

.Message.is-success {
  @apply border-success-200 bg-success-25 text-success-600 [--link-color:theme(colors.success.700)] more-contrast:text-success-700 more-contrast:[--link-color:theme(colors.success.800)];

  > .Message-icon {
    @apply before:btu-icon-circle-check-big;
  }
}

.Message.is-revision {
  --Revision-revisionColor: theme(colors.purple.200);
  --Revision-revisionTextColor: theme(colors.purple.600);
  --Revision-revisionEmphasisColor: theme(colors.purple.700);
  --Revision-revisionBackgroundColor: theme(colors.purple.25);

  @apply flex flex-wrap justify-start gap-2 rounded-none border-b border-s-0 border-e-0 border-t-0 border-b-[--Revision-revisionColor] bg-[--Revision-revisionBackgroundColor] text-[--Revision-revisionTextColor] max-md:gap-0 md:items-center;

  > .Message-icon {
    @apply text-[--Revision-revisionEmphasisColor] before:btu-icon;
  }

  a {
    @apply text-inherit;
  }
}

.Message.is-upload {
  @apply relative mt-6 grid w-full grid-cols-[auto_auto_auto] items-center justify-center justify-items-center gap-[12px_4px] rounded-lg border border-gray-200 bg-white px-6 py-4 text-gray-500 hover:border-gray-300 hover:bg-gray-100 hover:text-primary-600;

  &:hover {
    a {
      @apply underline;
    }

    .Message-icon {
      @apply bg-gray-200 before:bg-gray-700 before:bg-none;
    }
  }

  /* Make the entire container clickable (not just the link). */
  .uploadableLink {
    @apply before:absolute before:inset-0;
  }

  a {
    @apply order-none text-sm font-semibold text-primary-700 no-underline;
  }

  .Message-icon {
    @apply relative col-span-3 max-w-fit rounded-full bg-gray-100 p-2 text-transparent before:btu-icon-via-mask-upload before:btu-icon-gradient-primary;
  }
}

.Message.is-workflow {
  @apply flex md:items-center;

  a {
    @apply text-[--Revision-revisionTextColor];
  }
}

.Message .ActionBar {
  @apply bg-transparent;
}

/* If it has a ComboInput, let the CI wrap when it runs out of room. */
.Message:has(> p .ComboInput) {
  @apply md:flex-wrap md:items-center;

  p {
    @apply contents;
  }

  a {
    @apply order-[0] ms-0;
  }

  .ComboInput {
    @apply mt-2 md:mt-0;
    &:not([aria-expanded='true']) {
      @apply max-w-min;
    }
  }
}

/* It's unnecessary to render the message icon when displaying a Slack auth button. */
.Message:has(> [data-dynamic-html*='writeSlackButtonHtml']) {
  .Message-icon {
    @apply hidden;
  }
}

/* Numbered Lists have their own styles */
.Message > ol.NumberedList {
  @apply ms-0 basis-full;
}

.Message .NumberedList:has(> li > .NumberedList) {
  @apply ms-8;
}

/* Configuration Status variant */
.Message.is-configStatus {
  @apply flex-wrap items-baseline;

  p {
    @apply m-0 flex flex-1 flex-col gap-0.5 pb-3;
  }

  /* Add border when followed by issues */
  p:has(+ .Message-issues) {
    @apply mb-3 border-b;
  }

  p strong {
    @apply text-base font-bold;
  }

  .Message-meta {
    @apply text-sm font-semibold text-gray-600;
  }

  .Message-issues {
    @apply w-full basis-full list-disc text-sm opacity-90;

    li {
      @apply py-0.5;

      &.is-error {
        @apply font-bold;
      }
    }
  }
}

.Message.is-configStatus.is-success p:has(+ .Message-issues) {
  @apply border-success-200;
}

.Message.is-configStatus.is-warning p:has(+ .Message-issues) {
  @apply border-warning-200;
}

.Message.is-configStatus.is-error p:has(+ .Message-issues) {
  @apply border-error-200;
}
