@tailwind base;
@tailwind components;
@tailwind utilities;

/* Browsers have no built-in default stylesheet rule for custom elements like
   <turbo-frame>, so it defaults to display: inline -- harmless for the
   existing modal_content_<id> frame (wraps the whole modal, no fixed
   height/overflow), but the new pdf_remediation_requests_list_<id> frame
   sits inside a height-constrained, overflow-y-auto container, where an
   inline-level box containing block children rendered as fully blank
   (content present in the DOM, confirmed via inspector, but not visible on
   the actual page). This is the fix Hotwired's own docs recommend. */
turbo-frame {
  display: block;
}

@keyframes fade-out-up {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.fade-out-up {
  animation: fade-out-up 300ms ease-out forwards;
}

@keyframes success-scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes success-fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.success-animation {
  animation: success-scale 0.5s ease-out;
}

.success-icon {
  animation: success-fade 0.8s ease-out forwards;
}

.relative-bump-top {
  position: relative;
  top: 10px;
}

.animate-up {
  transition: bottom;
  transition-duration: 0.25s;
  bottom: 0px;
}

.off-screen-bottom {
  bottom: -400px;
}

.active-highlight {
  background-color: #ffe4bc;
}

.multi-stage-preloader {
  justify-content: right;
  align-items: center;

  .stages {
    overflow: hidden;
    height: inherit;
    transition: width 0.5s ease-in-out;
    transform-origin: left center;
    display: inline-block;
  }

  .stage {
    position: absolute;
    left: 0;
    text-overflow: ellipsis;
    width: max-content;
    transition: bottom 0.5s ease-in-out;
  }

  .stage.active {
    bottom: 0.55rem;
  }

  .stage.inactive {
    bottom: -10rem;
  }

  .stage.complete {
    bottom: 10rem;
  }

}

@layer base {
  h1 {
    @apply text-2xl font-medium text-gray-500 leading-tight text-base-content;
  }
}

@layer components {
  .btn {
    @apply rounded-md;
  }

  .table-zebra tbody tr:nth-child(even) {
    --tw-bg-opacity: 0.5;
    background-color: var(--fallback-b2, oklch(var(--b2) / var(--tw-bg-opacity)));
    @apply text-2xl text-gray-500 leading-tight text-base-content;
  }

  .label-text {
    @apply text-gray-500;
  }

  .search input {
    @apply m-0 p-2 text-sm h-10;
  }

  /* Custom select size between DaisyUI's sm and md */
  .select-custom {
    @apply select select-bordered select-sm;
    @apply m-0 p-2 text-sm h-10;
  }
}


.feedback-wrapper {
  .sentiment-wrapper {
    .sentiment:hover i,
    .sentiment.active i {
      @apply text-gray-500;
    }
  }

  .additional-feedback {
    transition: max-height 0.5s ease;
    max-height: 200px;

    &.collapsed {
      @apply max-h-0 overflow-hidden
    }
  }
}