@use 'mixins';

.⁂-status {
  @apply cursor-pointer;

  &__wrapper {
    @apply space-y-4;
  }
}

.⁂-status-info {
  @apply flex gap-2 items-center w-fit max-w-full cursor-default rounded-full border border-gray-200 bg-gray-100 px-3 py-1 black:border-gray-800 black:bg-gray-900 dark:border-transparent dark:bg-primary-800 rtl:space-x-reverse;

  p {
    @include mixins.text($theme: muted, $size: xs, $weight: medium, $truncate: true);
  }
}

.⁂-status-reply-mentions {
  @apply mb-1 block text-sm text-gray-700 dark:text-gray-600;
}

.⁂-status-reactions-bar {
  @apply flex gap-2 flex-wrap pt-2;

  &__button {
    @apply flex cursor-pointer items-center gap-2 overflow-hidden rounded-md border border-gray-400 px-1.5 py-1 transition-all bg-transparent dark:border-primary-700 dark:bg-primary-700 black:border-primary-800 black:bg-primary-800;

    &:not(:disabled) {
      @apply hover:bg-primary-100 hover:dark:border-primary-600 hover:dark:bg-primary-600 hover:black:bg-primary-700 cursor-pointer;
    }

    &--active {
      @apply bg-primary-100 dark:border-primary-500 dark:bg-primary-500 dark:ring-2 dark:ring-primary-300 black:border-primary-600 black:bg-primary-600;

      &:not(:disabled) {
        @apply hover:bg-primary-200 hover:dark:border-primary-300 hover:dark:bg-primary-300 hover:black:bg-primary-500;
      }
    }

    img,
    svg {
      @apply h-5 max-w-48 transition-transform;
    }

    &:hover img,
    &:hover svg {
      @apply scale-125;
    }

    p {
      @include mixins.text($theme: inherit, $size: xs, $weight: semibold);
    }
  }

  &__picker-button {
    @apply cursor-pointer rounded-md border border-gray-400 bg-transparent p-1.5 transition-colors hover:bg-gray-50 black:border-primary-800 black:bg-primary-800 hover:black:bg-primary-700 dark:border-primary-700 dark:bg-primary-700 hover:dark:border-primary-600 hover:dark:bg-primary-600;

    svg {
      @apply size-4;
    }
  }
}

.⁂-status-action-bar {
  @apply flex items-center gap-2;

  &--md {
    @apply gap-8;
  }

  &--lg {
    @apply justify-between grow;
  }

  &__button {
    @apply -m-1 flex items-center rounded-full p-2 rtl:space-x-reverse transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0 text-gray-600 hover:text-gray-800 dark:hover:text-white bg-transparent hover:bg-primary-100 dark:hover:bg-primary-800 black:hover:bg-gray-800;

    &:not(:disabled) {
      @apply hover:text-gray-600 dark:hover:text-white;
    }

    &__text {
      @include mixins.text($theme: inherit, $size: sm);
    }

    &:has(.⁂-status-action-bar__button__text) {
      @apply gap-2;
    }

    &:not(:has(.⁂-status-action-bar__button__text)) {
      @apply gap-1;
    }

    &--active {
      @apply text-accent-300 hover:text-accent-300 dark:hover:text-accent-300;

      &.⁂-status-action-bar__button--reblog {
        @apply text-success-600 dark:text-success-400 hover:text-success-600 dark:hover:text-success-400;
      }
    }
  }
}

.thread__status {
  .⁂-status__wrapper {
    padding: 0;
  }
}

.thread__status,
[column-type='filled'] {
  .⁂-status__wrapper {
    box-shadow: none;
  }
}

.⁂-media-gallery {
  @apply overflow-hidden rounded-md rounded-lg box-border overflow-hidden isolate relative w-full h-auto;

  &__item {
    @apply border-0 box-border block float-left relative overflow-hidden;

    &__icons {
      @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;

      .svg-icon {
        @apply size-24;
      }
    }

    &-overflow {
      @apply absolute w-full h-full inset-0 bg-white/75 z-[2] text-center font-bold text-5xl flex items-center justify-center pointer-events-none;
      color: #333;
    }

    &-thumbnail {
      @apply text-gray-400 cursor-zoom-in block no-underline leading-[0] relative z-[1] h-full w-full;

      img::before {
        line-height: normal;
      }

      video {
        @apply w-full h-full object-cover;
      }
    }
  }

  &__preview {
    @apply bg-gray-200 dark:bg-gray-900 w-full h-full object-cover absolute top-0 left-0 z-0;
  }

  &__gifv {
    @apply h-full overflow-hidden relative w-full;
  }

  &__item-gifv-thumbnail {
    @apply cursor-zoom-in h-full object-cover relative w-full z-[1] transform-none top-0;
  }

  &__gifv__label,
  &__filename__label,
  &__file-extension__label {
    pointer-events: none;
    position: absolute;
    display: block;
    bottom: 0.375rem;
    left: 0.375rem;
    z-index: 1;
    background: #00000050;
    @apply py-0.5 px-1.5 font-semibold text-white opacity-90 text-xs leading-[18px];
    transition: opacity 0.1s ease;
  }

  &__gifv {
    &.autoplay {
      .⁂-media-gallery__gifv__label {
        display: none;
      }
    }

    &:hover {
      .⁂-media-gallery__gifv__label {
        opacity: 1;
      }
    }
  }

  &--compact {
    display: flex;
    border-radius: 0.125rem;
    gap: 0.125rem;
    height: 3rem;
    background: transparent;

    .⁂-media-gallery__item {
      height: 3rem;
      width: 3rem;
      inset: auto;
      float: left;

      &-overflow {
        font-size: 1.25rem;
        line-height: 1.75rem;
      }

      &__icons svg {
        height: 2rem;
        width: 2rem;
      }
    }

    .⁂-media-gallery__file-extension__label {
      display: none;
    }
  }
}

.⁂-interaction-popover {
  @apply flex flex-col gap-1 max-w-96;

  &__header {
    @include mixins.text($weight: semibold, $align: center);
  }

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

.⁂-media-modal__content {
  .⁂-status-action-bar {
    .⁂-status-action-bar__button,
    .⁂-icon-button {
      @apply text-white/80 hover:text-white bg-transparent dark:bg-transparent;

      &--active.⁂-status-action-bar__button--reblog {
        @apply text-success-600 dark:text-success-400 hover:text-success-600 dark:hover:text-success-400;
      }
    }
  }
}

.⁂-read-more-button {
  @apply flex items-center border-0 bg-transparent p-0 pt-2 text-gray-900 hover:underline active:underline dark:text-gray-300;

  &__gradient {
    @apply pointer-events-none absolute -top-16 h-16 w-full bg-gradient-to-b from-transparent to-white black:to-black dark:to-primary-900;
  }

  &__container {
    position: relative;
    margin-top: -1rem;
  }
}

.⁂-status-content {
  @apply relative text-ellipsis break-words text-gray-900 focus:outline-none dark:text-gray-100;

  &:has(button) {
    cursor: pointer;
  }

  &--preview + .⁂-read-more-button__container {
    margin-top: -0.5rem;
  }

  &--poll + .⁂-read-more-button__container .⁂-read-more-button__gradient {
    @apply to-gray-100 dark:to-primary-800;
  }

  &--quote + .⁂-read-more-button__container .⁂-read-more-button__gradient {
    @apply group-hover:to-gray-100 black:group-hover:to-gray-800 dark:group-hover:to-gray-800;
  }

  &__container {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    &:has(.⁂-poll) {
      @apply bg-gray-100 dark:bg-primary-800 rounded-md p-4;
    }
  }
}

.⁂-status-title {
  @include mixins.text($size: 2xl, $weight: medium);

  &--clamp span:first-child {
    @apply line-clamp-3;
  }

  button {
    @include mixins.button($theme: muted, $size: xs);
    margin-left: 0.5rem;
    vertical-align: middle;

    svg {
      @apply size-4 transition-transform;
    }
  }

  &[aria-expanded='true'] button svg {
    transform: rotate(180deg);
  }
}
