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

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