@use "../../../styles/mixins";

.Chat {
  --background-color: var(--color-background);
  --thumbs-background: var(--background-color);

  --z-forum-indicator: 2;
  --z-badge: 4;
  --z-status: 8; // Avatar stories require a higher z-index than the ripple to work

  body.is-ios &,
  body.is-macos & {
    --color-text-meta: var(--color-text-meta-apple);
  }

  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;

  -webkit-touch-callout: none;

  &.standalone {
    position: static;

    .LastMessageMeta {
      margin-inline-end: 0;
    }
  }

  &.animate-opacity {
    will-change: opacity;
    transition: opacity 0.2s ease-out;
  }

  &.animate-transform {
    will-change: transform;
    transition: transform 0.2s ease-out;
  }

  &:hover,
  &.ListItem.has-menu-open {
    .avatar-badge {
      --_color-outline: var(--color-chat-hover);
    }

    .avatar-badge-wrapper {
      --outline-color: var(--color-chat-hover);
    }

    .ChatCallStatus {
      border-color: var(--color-chat-hover);
    }
  }

  // Super specific selector to override the same in `ListItem`
  @media (min-width: 600px) {
    &:not(.has-ripple):not(.is-static),
    body.no-page-transitions & {
      .ListItem-button:active {
        --background-color: var(--color-chat-hover) !important;
      }
    }
  }

  &:not(.standalone):last-of-type {
    border-bottom: 0.5rem solid transparent; // `margin` does not help, and `padding` affects forum indicator height
  }

  @media (max-width: 600px) {
    &.selected {
      --background-color: var(--color-chat-hover) !important;

      .avatar-badge {
        --_color-outline: var(--color-chat-hover);
      }

      .ChatCallStatus {
        border-color: var(--color-chat-hover);
      }
    }
  }

  @media (min-width: 600px) {
    &.selected:not(.forum),
    &.selected:not(.forum):hover {
      --background-color: var(--color-chat-active) !important;

      .title .custom-emoji {
        color: var(--color-white);
      }

      .VerifiedIcon, .StarIcon {
        --color-fill: #fff;
        --color-checkmark: var(--color-primary);
      }

      .avatar-badge {
        --_color-outline: var(--color-chat-active) !important;
      }

      .avatar-online {
        background-color: var(--color-white);
      }

      .ChatCallStatus {
        border-color: var(--color-chat-active) !important;
      }

      .ListItem-button {
        --background-color: var(--color-chat-active) !important;
        --color-text: var(--color-white);
        --color-text-meta-colored: var(--color-white);
        --color-text-meta: var(--color-white);
        --color-text-secondary: var(--color-white);
        --color-error: var(--color-white);
        --color-list-icon: var(--color-white);
        --color-chat-username: var(--color-white);
      }

      .icon-muted {
        color: var(--color-white) !important;
      }

      .general-forum-icon {
        color: var(--color-white) !important;
      }

      .ChatBadge:not(.pinned):not(.muted) {
        color: var(--color-chat-active);
        background: var(--color-white);
      }

      .ChatBadge:not(.pinned).muted {
        color: var(--color-white);
        background: #FFFFFF33;
      }

      .avatar-badge-wrapper .ChatBadge:not(.pinned) {
        --outline-color: transparent;
      }

      .avatar-badge-wrapper .ChatBadge:not(.pinned).muted {
        background: var(--color-gray);
      }
    }
  }

  &.selected-forum {
    &::before {
      transform: translateX(0) scaleY(1) !important;
    }
  }

  body.is-ios &,
  body.is-android & {
    .ListItem-button {
      border-radius: 0 !important;
    }
  }

  @media (max-width: 600px) {
    .ListItem-button {
      border-radius: 0 !important;
    }
  }

  &.forum {
    --color-chat-username: var(--color-text);

    &::before {
      content: '';
      position: absolute;
      top: 0.625rem;
      bottom: 0.625rem;
      left: -0.4375rem; // `.chat-list` left padding
      width: 0.3125rem;

      transform: translateX(-0.375rem) scaleY(0.5);
      transition: transform var(--layer-transition);

      body.no-page-transitions & {
        transition: none;
      }

      background: var(--color-primary);
      z-index: var(--z-forum-indicator);

      border-start-end-radius: var(--border-radius-default);
      border-end-end-radius: var(--border-radius-default);
    }

    @media (max-width: 600px) {
      &::before {
        left: 0;
      }
    }

    .ListItem-button {
      padding-top: 0.3125rem;
      padding-bottom: 0.3125rem;
    }

    .title {
      line-height: 1.375rem;
    }

    .status {
      background-color: var(--background-color);
    }
  }

  .ripple-container {
    z-index: var(--z-chat-ripple);
  }

  .status {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    z-index: var(--z-status);
    overflow: visible !important;
  }

  .avatar-badge-wrapper {
    position: absolute;
    bottom: 0;
    right: 0.5rem;
    z-index: var(--z-badge);

    --outline-color: var(--color-background);

    .ChatBadge {
      box-shadow: 0 0 0 2px var(--outline-color);
    }

    .ChatBadge-transition {
      position: relative;
      transition: opacity var(--layer-transition), transform var(--layer-transition);

      body.no-page-transitions & {
        transition: opacity var(--layer-transition);
      }
    }
  }

  .avatar-badge {
    --_color-outline: var(--color-background);
    position: absolute;
    bottom: 0.0625rem;
    right: 0.0625rem;
    flex-shrink: 0;
  }

  .avatar-subscription {
    @include mixins.filter-outline(1px, var(--_color-outline));
  }

  .avatar-online {
    border-radius: 50%;
    border: 2px solid var(--_color-outline);
    background-color: #0ac630;

    width: 0.875rem;
    height: 0.875rem;

    opacity: 0.5;
    transform: scale(0);
    transition: opacity 200ms, transform 200ms;

    &.avatar-online-shown {
      opacity: 1;
      transform: scale(1);
    }
  }

  .info {
    transition: opacity 300ms ease, transform var(--layer-transition);

    body.no-page-transitions & {
      transition: opacity 300ms ease;
    }

    .title .custom-emoji {
      color: var(--color-primary);
    }

    .icon-muted {
      font-size: 1.125rem;
      margin-left: 0.25rem;
      color: var(--color-list-icon);

      body.is-ios & {
        margin-top: 0;
        margin-right: 0.5rem;
      }
    }

    .general-forum-icon {
      font-size: 1.25rem;
      color: var(--color-text-secondary);
    }

    .LastMessageMeta {
      body.is-ios & {
        font-size: 0.875rem;
        margin-right: 0;
      }
    }

    .last-message,
    .typing-status {
      padding-right: 0.25rem;
      flex-grow: 1;
      color: var(--color-text-secondary);
      unicode-bidi: plaintext;

      &[dir="ltr"] {
        text-align: left;
      }

      .sender-name {
        color: var(--color-chat-username);

        body.is-macos &,
        body.is-ios & {
          color: var(--color-text);
        }
      }

      .draft {
        color: var(--color-error);
      }
    }

    .last-message {
      .draft {
        &::after {
          content: ": ";
        }
      }

      .colon, .chat-prefix-icon {
        margin-inline-end: 0.1875rem;
      }

      .chat-prefix-icon {
        display: inline-block;
        color: var(--color-list-icon);
        font-size: 0.875rem;
        transform: translateY(1px);
      }

      .media-preview-spoiler {
        filter: blur(1px);
      }

      .media-preview--image {
        width: 1.25rem;
        height: 1.25rem;
        object-fit: cover;
        border-radius: 0.125rem;
        vertical-align: -0.25rem;
        margin-inline-end: 0.25rem;
        margin-inline-start: 0.125rem;

        body.is-ios & {
          width: 1.125rem;
          height: 1.125rem;
          vertical-align: -0.1875rem;
        }

        &.round {
          border-radius: 0.625rem;
        }
      }

      .emoji-small {
        width: 1rem;
        height: 1rem;
        vertical-align: -0.125rem;
      }

      .icon-play {
        position: relative;
        display: inline-block;
        font-size: 0.75rem;
        color: #fff;
        margin-inline-start: -1.25rem;
        margin-inline-end: 0.5rem;
        bottom: 0.0625rem;

        body.is-ios & {
          margin-inline-start: -1.125rem;
          bottom: 0;
        }
      }
    }
  }

  &[dir="rtl"] {
    .info {
      .LastMessageMeta {
        margin-left: 0;
        margin-right: auto;
      }

      .title,
      .subtitle {
        padding-left: 0.125rem;
        padding-right: 0;
      }

      .icon-muted {
        margin-left: 0;
        margin-right: 0.25rem;
      }

      .last-message,
      .typing-status {
        padding-left: 0.5rem;
        padding-right: 0;
        text-align: right;
        unicode-bidi: plaintext;
      }
    }
  }
}