@use 'mixins';
@use 'variables';

.⁂-chat-widget {
  @apply fixed bottom-0 z-[99] flex w-96 flex-col rounded-t-lg bg-white shadow-3xl black:border black:border-b-0 black:border-gray-800 black:bg-black dark:bg-gray-900 ltr:right-5 rtl:left-5 h-16;

  &--open {
    height: 550px;
    max-height: 100vh;

    .⁂-chat-widget__header__open-button svg {
      transform: rotate(180deg);
    }
  }

  &--placeholder {
    @apply fixed bottom-0 z-[99] flex h-16 w-96 animate-pulse flex-col rounded-t-lg bg-white shadow-3xl dark:bg-gray-900 ltr:right-5 rtl:left-5;
  }

  &__container {
    display: none;

    @media (min-width: variables.$breakpoint-xl) {
      display: block;
    }
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    overflow: hidden;

    &__title {
      display: flex;
      height: 4rem;
      flex-grow: 1;
      flex-direction: row;
      align-items: center;
      gap: 0.25rem;
    }

    &__title div:first-child,
    &__count p {
      @include mixins.text($weight: semibold);
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &__count {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      &__dot {
        height: 0.625rem;
        width: 0.625rem;
        border-radius: 50%;
        background: rgb(var(--color-accent-300));
      }
    }

    &__actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      svg {
        height: 1.25rem;
        width: 1.25rem;
        color: rgb(var(--color-gray-600));
      }
    }

    &__open-button svg {
      transform: rotate(0deg);
      transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  &__search-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  &__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    flex-grow: 1;

    > div {
      &::before,
      &::after {
        @apply pointer-events-none absolute inset-x-0 flex justify-center from-white to-transparent pb-12 pt-8 transition-opacity duration-500 black:from-black dark:from-gray-900 opacity-100 black:opacity-50;
        content: '';
        z-index: 2;
      }

      &::before {
        @apply top-0 rounded-t-lg bg-gradient-to-b;
      }

      &::after {
        @apply bottom-0 rounded-b-lg bg-gradient-to-t;
      }

      &.⁂-chat-widget__list--near-top::before,
      &.⁂-chat-widget__list--near-bottom::after {
        @apply opacity-0 black:opacity-0;
      }
    }
  }

  &__blankslate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-grow: 1;
    gap: 1rem; 

    &__text {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      max-width: 80%;

      &__title {
        @include mixins.text($size: lg, $weight: bold, $align: center);
      }

      &__body {
        @include mixins.text($theme: muted, $align: center);
      }
    }

    button {
      @include mixins.button($theme: primary);
    }
  }
}

.⁂-chat-list-item {
  @apply flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 focus:shadow-inset-ring dark:hover:bg-gray-800;

  > div {
    @apply flex items-center justify-between gap-2 w-full;
  }

  &--shoutbox > div {
    @apply justify-normal;
  }

  &__info {
    @apply flex items-center gap-2 overflow-hidden;
  }

  &__avatar {
    @apply flex-none;
  }

  &__content {
    @apply flex flex-col items-start overflow-hidden;
  }

  &__name {
    @apply flex w-full grow items-center space-x-1;
  
    p {
      @include mixins.text($weight: bold, $size: sm, $align: left, $truncate: true);
    }
  }

  &__message {
    @include mixins.text($theme: muted, $size: sm, $align: left, $truncate: true);
    @apply truncate-child pointer-events-none h-5 w-full;

    &--unread {
      @apply text-gray-900 dark:text-gray-100;
    }

    &:not(&--blocking) > * {
      @apply truncate;
    }

    &__author {
      @include mixins.text($weight: bold, $size: sm, $align: left, $theme: muted, $truncate: true);
    }
  }

  &__actions {
    @apply flex items-center gap-2;
  }

  &__menu {
    @apply max-w-0 overflow-hidden text-gray-600 hover:text-gray-100;

    .⁂-icon-button {
      @apply text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500;

      svg {
        @apply h-4 w-4;
      }
    }
  }

  &:hover .⁂-chat-list-item__menu {
    @apply max-w-full;
  }

  &__unread {
    @apply size-2 rounded-full bg-secondary-500;
  }

  &__timestamp {
    @include mixins.text($theme: muted, $size: xs, $align: right, $truncate: true);
  }

  &__unread + &__timestamp {
    @apply text-gray-900 dark:text-gray-100;
  }
}