.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");
  }
}

.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-[420px] text-sm p-2 overflow-y-scroll rounded-lg border border-gray-200 dark:border-gray-700;

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

  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-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-[100%] h-full absolute z-1 bg-white;
}
[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;
  }
}

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;
    }
  }
}