/* 
 * Theme made by: @nexy7574 (@nex:nexy7574.co.uk)
 * Theme name: Discord Light
 * Theme source: https://css.gomuks.app/theme/discord-light
 */

:root {
  --discord-mentioned-overlay: color-mix(in oklab, hsl(36.894 calc(1 * 100%) 31.569% / 0.0784313725490196) 100%, hsl(0 0% 0% / 0.0784313725490196) 0%); /* The yellow overlay on a message when you've been pinged */
  --discord-jump-overlay: color-mix(in oklab, hsl(234.935 calc(1 * 85.556%) 64.706% / 0.1607843137254902) 100%, hsl(0 0% 0% / 0.1607843137254902) 0%);  /* In discord, this will have that purple overlay on a message when you jump to it.
                                                          it will also phase from 0.1 to 0 alpha, and then be removed, however that can't be
                                                          done with gomuks in pure CSS as it requires removing a class after adding it. */
  --discord-mention-pill-hover-background: rgb(114, 137, 218);
  --discord-mention-pill-background: color-mix(in oklab, hsl(234.935 calc(1 * 85.556%) 64.706% / 0.23921568627450981) 100%, hsl(0 0% 0% / 0.23921568627450981) 0%);
  --discord-mention-pill-text: color-mix(in oklab, hsl(230.769 calc(1 * 49.727%) 35.882% / 1) 100%, #000 0%);
  --discord-mention-pill-text-hover: hsl(0 0% 100% / 1);
  --discord-segment-divider-colour: color-mix(in oklab, hsl(240 calc(1 * 4%) 60.784% / 0.23921568627450981) 100%, hsl(0 0% 0% / 0.23921568627450981) 0%);

  /* Colours from https://discord.com/branding - 2025-09-30 */
  --discord-blurple: #5865F2;
  --discord-light-blurple: #E0E3FF;
  --discord-green: #57F287;
  --discord-yellow: #FEE75C;
  --discord-fuchsia: #EB459E;
  --discord-red: #ED4245;
  --discord-white: #fff;
  --discord-black: #000;

  /* And role colour presets */
  --discord-role-teal: #19BB9C;
  --discord-role-dark-teal: #107F69;
  --discord-role-green: #2ECB70;
  --discord-role-dark-green: #1E8B4C;
  --discord-role-blue: #3498DB;
  --discord-role-dark-blue: #1F6594;
  --discord-role-purple: #9B58B5;
  --discord-role-dark-purple: #70368A;
  --discord-role-pink: #E91D62;
  --discord-role-dark-pink: #AC1356;
  --discord-role-yellow: #F1C30E;
  --discord-role-dark-yellow: #C17B0D;
  --discord-role-yellow-orange: #E74C3C;
  --discord-role-dark-yellow-orange: #A84300;
  --discord-role-orange: #E74C3C;
  --discord-role-dark-orange: #992D21;
  --discord-role-light-grey: #95A5A6;
  --discord-role-dark-grey: #979C9F;
  --discord-role-blue-grey: #5F7C8B;
  --discord-role-dark-blue-grey: #546D79;

  /* These variables are the same across themes */
  --timeline-jump-bg-color: var(--discord-jump-overlay);
  --timeline-jump-hover-bg-color: var(--discord-jump-overlay);
  --timeline-highlight-bg-color: var(--discord-mentioned-overlay);
  --timeline-highlight-hover-bg-color: var(--discord-mentioned-overlay);
  --highlight-pill-background-color: var(--discord-mention-pill-background);
  --border-color: var(--discord-segment-divider-colour);
  --pill-background-color: var(--discord-mention-pill-background);
  --room-list-background-overlay: rgba(0,0,0,0);
}

/* From Discord's Light theme as of 2025-09-30 */
:root {
  --text-color: color-mix(in oklab, hsl(231.429 calc(1 * 6.542%) 20.98% / 1) 100%, #000 0%);
  --background-color: color-mix(in oklab, hsl(0 calc(1 * 0%) 98.431% / 1) 100%, #000 0%);
  --timeline-hover-bg-color: color-mix(in oklab, hsl(240 calc(1 * 4%) 60.784% / 0.12156862745098039) 100%, hsl(0 0% 0% / 0.12156862745098039) 0%);
  --room-list-background: color-mix(in oklab, hsl(240 calc(1 * 4.348%) 95.49% / 1) 100%, #000 0%);
  --room-list-entry-selected-color: hsl(240 4% 60.784% / 0.23921568627450981);
  --composer-background-color: color-mix(in oklab, hsl(0 calc(1 * 0%) 100% / 1) 100%, #000 0%);
  --right-panel-background-color: color-mix(in oklab, hsl(0 calc(1 * 0%) 98.431% / 1) 100%, #000 0%);
  --blockquote-border-color: color-mix(in oklab, hsl(240 calc(1 * 4%) 60.784% / 0.47843137254901963) 100%, hsl(0 0% 0% / 0.47843137254901963) 0%);
  --space-list-background-overlay: color-mix(in oklab, hsl(240 calc(1 * 4.348%) 95.49% / 1) 100%, #000 0%);

  /* In light mode, the unread counter becomes unreadable (ironically) without this */
  --unread-counter-text-color: var(--text-color);
  /* Reply text starts to fail contrast requirements with the default value of #bbb; #616161 is dark enough but still faded */
  --semisecondary-text-color: #616161;
}

/* Set the right panel (member list, profile viewer, moderation tooling, pin viewer, thread view) background colour */
.right-panel-content {
  background-color: var(--right-panel-background-color);
}

/* Set the hover background colour and add padding to events */
.timeline.event {
  padding: 1em;
  background: var(--timeline-hover-bg-color);
}

/* Increase the padding of room list entries */
div.room-entry {
  padding: .25rem 0;
  contain-intrinsic-height: 3.5rem;
}

/* Disable cosmetic stuff on the message composer */
div.message-composer {
  box-shadow: none;
  border: 1px solid oklab(0.678888 0.00325716 -0.011175 / 0.160784);
  border-radius: 8px;
  min-height: 56px;
  vertical-align: baseline;
  
  & > .input-area {
    min-height: 56px;
  }
}

/* Change the colour of blockquotes */
.html-body {
  blockquote {
    border-left: 4px solid var(--blockquote-border-color) !important;
  }

  /* Add mention pill colours to user mentions */
  & a.hicli-matrix-uri-user:not(.hicli-matrix-uri-plaintext) {
    color: var(--discord-mention-pill-text) !important;
    
    &:hover {
      color: var(--discord-mention-pill-text-hover) !important;
      background-color: var(--discord-mention-pill-hover-background);
    }
  }
}

/* Add the divider border to the space & room lists, and right panel */
div.room-list {
  border-left: 1px solid var(--discord-segment-divider-colour);
  border-right: 1px solid var(--discord-segment-divider-colour);
  /* And between the room list & search function */
  border-top: 1px solid var(--discord-segment-divider-colour);

  & div.room_entry {
    /* Increase the padding of room list entries */
    padding: .25rem 0;
    contain-intrinsic-height: 3.5rem;
    /* Make it more visually distinct when you're hovering a room */
    cursor: pointer
  }
}

/* Colour the send button in */
div.message-composer > div.input-area > button[title="Send message"]:not(:disabled) > svg {
	fill: var(--discord-blurple) !important;
  color: var(--discord-blurple) !important;
}