.story-forwarded {
  @apply relative;

  &::before {
    content: "";
    /* @apply absolute -left-3 top-1 content-[''] w-2 h-2 bg-primary-600 dark:bg-primary-400 rounded-full; */
    background-repeat: no-repeat;
    top: -0.1em;
    left: -1.1em;
    height: 18px;
    width: 18px;
    position: absolute;
    background-image: url("/assets/svg/forward-c2f64793.svg");
  }
}

.linkable {
  @apply text-primary-600 dark:text-primary-400 hover:underline;
}

.channels-container > label {
  @apply select-none border border-gray-200 dark:border-gray-600 rounded-2xl p-2 flex flex-col;
}

.story__item {
  @apply border-b border-gray-200 dark:border-gray-700 last:border-0 hover:bg-gray-50 dark:hover:bg-gray-700;
}

.story__item--forwarded {
  @apply bg-accent-50 dark:bg-gray-700/30;
}

.share__item {
  @apply w-72 h-[640px] text-sm p-1 overflow-y-scroll text-black bg-white dark:bg-gray-900 dark:text-white;

  h1 {
    @apply sm:text-lg text-base font-medium text-gray-800 dark:text-gray-200;
  }

  table {
    @apply dark:bg-gray-900;
  }

  p, a {
    @apply dark:text-white;
  }

  img, video {
    width: inherit !important;
  }
}

.preview-container {
  @apply flex-grow sm:min-h-[500px] min-w-[300px] px-4 flex flex-col items-center;
}

.sms-preview-message {
  word-break: break-word;
}

.swiper.attachments-list-swiper {
  @apply bg-gray-100 dark:bg-gray-700;
}

.last-days-item {
  position: relative;
}

.last-days-item:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 1;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 22%, transparent);
}

[data-colour-scheme="dark"] .last-days-item:after {
  background: linear-gradient(to right, rgb(31 41 55) 8%, transparent);
}

.story-template-awaiting-approval {
  @apply text-sm flex items-center justify-center bg-orange-100 border border-orange-600 text-orange-600 dark:text-orange-400 rounded-lg px-2 py-1 mt-2;
}

.story-template-not-submitted {
  @apply text-sm flex items-center justify-center bg-gray-100 border border-gray-600 text-gray-600 dark:text-gray-400 rounded-lg px-2 py-1 mt-2;
}

.story-template-rejected {
  @apply text-sm flex items-center justify-center bg-red-100 border border-red-600 text-red-600 dark:text-red-400 rounded-lg px-2 py-1 mt-2;
}

.story-template-approved {  
  @apply text-sm flex items-center justify-center bg-green-100 border border-green-600 text-green-600 dark:text-green-400 rounded-lg px-2 py-1 mt-2;
}

.logo-mascot-spin {
  animation: logo-mascot-spin 8s linear infinite;
  transform-style: preserve-3d;
  transform-origin: center;
}

@keyframes logo-mascot-spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.story-progress {
  @apply w-full mx-auto sm:p-4 p-3 sm:mb-8 mb-4 rounded-2xl bg-white dark:bg-gray-900 shadow-sm border border-gray-100 dark:border-gray-800;
}

.story-progress__list {
  @apply grid grid-cols-[auto_1fr_auto] items-center justify-between sm:gap-10 gap-3;
}

.story-progress__item {
  @apply flex-1 flex leading-snug gap-2 items-center relative m-0;
}

.story-progress__label {
  @apply sm:font-semibold text-sm font-medium whitespace-nowrap tracking-wide leading-snug text-gray-400 dark:text-gray-500;
}

.story-progress__description {
  @apply text-xs lg:block hidden text-gray-500 leading-tight dark:text-gray-400;
}

.story-progress__item__icon {
  @apply sm:size-10 size-9 flex-shrink-0 rounded-xl bg-primary-200 flex items-center justify-center text-primary-300;

  svg {
    @apply size-5 sm:size-6;
  }
}

.story-progress__item--review {
  @apply flex justify-center;
}

 .story-progress__item--review::before {
  content: "";
  inset-inline-end: 2em;
  @apply block lg:h-0.5 h-0 w-[96%] bg-gray-200 dark:bg-gray-700 absolute z-1;
}

.story-progress__item__content, .story-progress__item__icon {
  @apply relative z-50;
}


 .story-progress__item--review::after {
  content: "";
  @apply md:w-[17em] w-[60%] h-full absolute z-1 bg-white;
}

/*
.story-progress__item--send::after {
  content: "";
  @apply md:w-[110%] w-[114%] h-full absolute z-1 md:right-[-0.8em] right-[-0.3em];
}

[data-colour-scheme="dark"] .story-progress__item--review::after {
  @apply bg-gray-900;
} */

[data-colour-scheme="dark"] .story-progress__item--review::before {
  @apply bg-gray-700;
}

.story-progress__item__link {
  @apply contents;
}

.story-progress--new .story-progress__item--new .story-progress__label,
.story-progress--review .story-progress__item--review .story-progress__label,
.story-progress--send .story-progress__item--send .story-progress__label {
  @apply text-primary-600 dark:text-primary-400;
}

.story-progress--new 
.story-progress__item--new  
.story-progress__item__icon {
  @apply bg-primary-600 text-white;
}


.story-progress--reviewing {
  .story-progress__item--new  .story-progress__item__icon, .story-progress__item--review .story-progress__item__icon {
    @apply bg-primary-600 text-white;
  }

  .story-progress__item--new .story-progress__label, 
  .story-progress__item--review .story-progress__label {
    @apply text-primary-600 dark:text-primary-400;
  }

}

/* .chat--edit .story-progress--reviewing .story-progress__item--review:after, .compose--show .story-progress__item--send:after {
  @apply rounded-xl bg-primary-100 dark:bg-primary-500 h-14;
} */

[data-colour-scheme="dark"] {
  .story-progress__item--review:after, .compose--show .story-progress__item--send:after {
    @apply bg-gray-900;
  }
}

body.compose--show {
  .story-progress {
    .story-progress__item__icon {
      @apply bg-primary-600 text-white;
    }

    .story-progress__label {
      @apply text-primary-600 dark:text-primary-400;
    }
  }
}

body .story-content table, body .share__item table {
  @apply !w-full !min-w-full;
}

.lyb-divider--evenspaces {
  @apply divide-y divide-gray-200 dark:divide-gray-800;
}

.lyb-divider--evenspaces > * {
  @apply sm:py-4 py-3;
}