@tailwind components;

/* ChatBox styles*/
@layer components {
  .chatbox {
    @apply flex gap-2;

    label {
      @apply sr-only;
    }
  }
  .chatbox-wrap {
    @apply flex-1;
  }

  .chatbox-input {
    @apply px-4 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
  }

  .chatbox-button {
    @apply px-4 py-1.5 bg-blue-500 text-white rounded-md shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm sm:leading-5;
  }
}

/* Messages styles */
@layer components {
  .iai-messages {
    @apply flex flex-col gap-2 overflow-y-auto;

    .user-message {
      @apply flex justify-end;

      .inner {
        @apply max-w-96 border border-blue-200  bg-blue-200;
      }
    }

    .assistant-message {
      @apply flex justify-start;

      .inner {
        @apply max-w-3xl border border-gray-200 bg-gray-50 whitespace-pre-wrap;
      }
    }

    .inner {
      @apply px-4 py-2 rounded-lg;
    }
  }
}

/* CurrentState styles */
@layer components {
  .current-state {
    @apply border border-gray-300 flex flex-col gap-2 rounded-lg bg-white p-2 pr-0;

    .rows {
      @apply overflow-auto;
    }

    h1 {
      @apply text-lg font-semibold cursor-pointer my-0;

      .toggle {
        @apply float-right mr-4 font-normal pt-2;
      }
    }

    .last-sent-divider {
      @apply flex justify-center items-center;

      .last-sent-border {
        @apply h-0.5 w-1/2 bg-gray-300;
      }

      p {
        @apply mx-2 text-sm text-gray-500 whitespace-nowrap;
      }
    }

    .row {
      @apply flex flex-col pb-1;

      > .heading {
        @apply flex items-center pr-2;

        p {
          @apply flex-1 font-bold pl-1;
        }
      }

      pre {
        @apply ml-2 overflow-x-auto;
      }
    }

    .pill {
      @apply mt-0.5 whitespace-nowrap rounded-md px-1.5 py-0.5 text-xs font-medium ring-1 ring-inset;

      &.state {
        @apply text-green-700 bg-green-50 ring-green-600/20;
      }

      &.event {
        @apply text-orange-600 bg-orange-50 ring-orange-500/10;
      }
    }
  }

  .chevron {
    width: 18px;
    height: 15px;

    .chevron__group {
      transform: translateY(0);
      transition: transform 0.1s linear;
    }

    .chevron__box--left,
    .chevron__box--right {
      transform: rotate(0) translateY(0);
      transition: transform 0.1s linear;
    }

    .chevron__box--left {
      transform-origin: 1px 1px;
    }

    .chevron__box--right {
      transform-origin: 7px 1px;
    }

    &.chevron--flip .chevron__box--left {
      transform: rotate(-90deg) translateY(0);
    }

    &.chevron--flip .chevron__box--right {
      transform: rotate(90deg) translateY(0);
    }

    &.chevron--flip .chevron__group {
      transform: translateY(3px);
    }
  }
}
