@use 'backend' as *;

// HEADER
#{c(chat chatAvatar)} {
  transition:
    all 0.3s ease-in-out,
    transform 0.1s ease-in-out;
  &#{c(chat chatHeaderClickable)}:active {
    transform: scale(0.9);
  }
}
#{c(chat botTag)} {
  background: cv('color.main');
  color: var(--header-primary);
}

// EDITING
#{c(chat operations)} {
  a {
    color: cv('color.main');
  }
}

// SYSTEM MESSAGE
#{c(chat systemMessageContent)} {
  a {
    color: var(--text-link);
  }
}

// CODEBLOCK
#{c(chat markup)} {
  code {
    background: cv('shading.card');
    // INLINE
    &#{c(chat codeInline)} {
      border:none;
      background: hsl(from cv('shading.card') h s calc(100 - l) / calc(alpha * 0.5));
      padding: 2px 6px
    }
  }
}

// REPLY
#{c(chat replied spine)} {
  border-color: cv('color.main');
  &:hover,
  &#{c(chat replied contentHovered)} {
    border-color: cv('color.hover');
  }
}
#{c(chat replied textPreview)} {
  color: cv('text.normal');
  opacity: 0.7;
  #{c(chat chatHeaderClickable)}:hover,
  #{c(chat replied spineHovered)} {
    opacity: 1;
  }
}

// EXECUTE COMMAND
#{c(chat replied app spine)} {
  &::before {
    border-color: cv('color.main');
  }
}
#{c(chat replied app executedCommand)} {
  #{c(chat replied app launcherCommandName)} {
    color: cv('color.main');
    background: transparent;
    &:hover {
      color: cv('color.hover');
      background: transparent;
    }
  }
}

// REPLY HIGHLIGHT
#{c(chat replying)} {
  --background-mentioned: hsl(from var(--hsl-main-color) h s l/.1);
  --background-mentioned-hover: hsl(from var(--hsl-hover-color) h s l/.1);
  background: var(--background-mentioned);
  &:hover,
  #{c(chat messageSelected)}  {
    background: var(--background-mentioned-hover) !important; // way easier than whatever discord does
  }
  &::before {
    background: cv('color.hover');
  }
}

// MENTION
#{c(chat mentionWrapper)} {
  background-color: cv('color.main');
  color: cv('text.normal');
  border-radius: 5px;
  padding: 0 4px;
  &:hover {
    background-color: cv('color.hover');
  }
}

// MENTIONED BG
#{c(chat mentioned)} {
  --background-mentioned: hsl(from var(--hsl-main-color) h s l/.1);
  --background-mentioned-hover: hsl(from var(--hsl-hover-color) h s l/.1);
  &:before {
    background-color: cv('color.main');
  }
}

// QUOTES
#{c(chat quoteContainer)} {
  #{c(chat quoteDivider)} {
    border-radius: 0;
  }
}

// PUBLISH TO FOLLOWERS
#{c(chat publish container)} {
  background: cv('shading.card');
}

// EMBEDS
#{c(embeds embedFull)} {
  background: cv('shading.card');
  border-top: none;
  border-right: none;
  border-bottom: none;
}

// EMBED DOWNLOAD BUTTON
#{c(embeds hoverButton group)} {
  background: cv('shading.popout');
}
#{c(embeds hoverButton button)} {
  &#{c(embeds hoverButton selected)},
  &:hover {
    background: transparent;
  }
}

// ATTACHMENTS
#{c(embeds attachment file)} {
  background: cv('shading.card');
  border: none;
}
#{c(embeds attachment upload progressBar)} {
  background: cv('color.main') !important;
}

// INVITE
#{c(embeds invite wrapper)} {
  background: cv('shading.card');
  border: none;
}
#{c(embeds invite statusOnline)} {
  background: cv('color.online');
}
#{c(embeds invite statusOffline)} {
  background: cv('color.offline');
}

#{c(embeds invite guildInviteContainer)} {
  background: cv('shading.card');
}

#{c(embeds invite guildInviteFooter)} {
  background: none;
}

// GIFTS
#{c(embeds gift tile)} {
  background: cv('shading.card');
  border: none;
  &:hover {
    background: cv('shading.card');
  }
}

// MEDIA
#{c(embeds media audioWrapper)} {
  background: cv('shading.card');
  border: none;
}
#{c(embeds media audioControls)} {
  background: transparent;
}
#{c(embeds media videoWrapper)} {
  background: cv('shading.card');
}

// TEXT CONTAINER
#{c(embeds textContainer textContainer)},
#{c(embeds textContainer footer)} {
  background: cv('shading.card');
  border: none;
}
#{c(embeds textContainer codeView)} {
  background: transparent;
}
#{c(embeds textContainer languageSelectorPopout)} {
  background: cv('shading.popout');
}
#{c(embeds textContainer modalTextContainer)} {
  background: transparent;
  border: none;
}

// HAS THREAD
#{c(chat cozy)} {
  &#{c(chat hasThread)} {
    // cozy view
    &::after {
      border-color: cv('color.main');
    }
  }
}
#{c(embeds threadContainer)} {
  // compact view
  border-color: cv('color.main');
}
#{c(embeds threadContainer)} {
  background: cv('shading.card');
  border: none;
}
#{c(embeds threadCTA)} {
  color: cv('color.main');
}

// VOICE MESSAGE
#{c(embeds voiceMessage container)} {
  background: cv('shading.card');
  border: none;
}
#{c(embeds voiceMessage ripple)} {
  background: cv('color.main');
}
:is(#{c(main themeLight)}, #{c(main themeDark)}) {
  #{c(embeds voiceMessage container)} {
    &:not(#{c(embeds voiceMessage playing)}) {
      #{c(embeds voiceMessage playButtonContainer)} {
        background: cv('color.main');
        &:is(:hover, :active) {
          background: cv('color.hover');
        }
      }
    }
  }
}
#{c(embeds voiceMessage playing)} {
  #{c(embeds voiceMessage playIcon)} {
    color: cv('color.main');
  }
}

// AUTOMOD
#{c(embeds automod card)},
#{c(embeds automod footerContainer)} {
  background: cv('shading.card');
}
#{c(embeds automod dot)} {
  background: transparent;
}

// POLL
#{c(embeds poll finished container)},
#{c(embeds poll container)} {
  background: cv('shading.card');
  border: none;
}

#{c(embeds poll answer)} {
  #{c(embeds poll answerInner)}#{c(embeds poll currentlyVoting)}#{c(embeds poll selected)} {
    outline: 1px solid cv('color.main');
  }
}
#{c(embeds poll secondaryButtonPresentation)} {
  background: cv('color.main');
  border: transparent;
}
#{c(embeds poll checkbox)} {
  border-width: 1px;
}
#{c(embeds poll radioForeground)} {
  color: currentColor;
}
#{c(embeds poll checkboxSelected)} {
  border: 1px solid cv('color.main');
  background: transparent;
}
#{c(embeds poll votedStyles)} {
  --custom-poll-style-vote-percentage: hsl(from var(--hsl-main-color) h s l/.2);
  --custom-poll-style-border: var(--hsl-main-color);
}
