/* User Provided Stylesheet */

/* TODO
- topic
*/


/* Code toegevoegd 17/05. Leuke kleurtjes zodat het makkelijk te zien is wat waar komt */

/*Title color in dark mode*/
.dark aside.admonition-experiment .dark\:text-white {
   color: rgb(23 25 25); 
}

/* Parent */
aside.admonition-experiment {
  border-color: rgb(255, 0, 0) !important; /* Important zorgt ervoor dat we over de oude stijl heen schrijven */
  background-color: rgb(255, 255, 255); /* Change background color text part*/
} 

/* Title */
aside.admonition-experiment > div:first-child {
  background-color: rgb(251, 183, 183);  /* Change header background color */
}

/* Icon */
aside.admonition-experiment > div:first-child::before {
  content: "🧪";
  /* add padding left so it is not directly on the side*/
  padding-left: 0.2em;
  margin-left: 0.5em;
}

aside.admonition-experiment > div:first-child > div:first-child {
  background-color: rgb(251, 183, 183); /* changes header color of text part
  margin-left: 0 !important; /* voorkomt dubbele margin */
}

/* end of new code */

.admonition-experiment .admonition-title-experiment {
  background-color: black; /* Change header background color */
  color: #FFFFFF; /* Change header text color */
}

/* Custom icon using ::before pseudo-element */
.admonition-experiment .admonition-title-experiment::before {
  content: "🧪"; /* Use an emoji or */
  content: "\f0c3"; /* Use a FontAwesome icon code */
  font-family: "Font Awesome 5 Free"; /* If using FontAwesome */
  margin-right: 0.5em;
}

aside.admonition-experiment img {
display: block;
}



/* ADMONITION INTERMEZZO */
/* Parent */
aside.admonition-intermezzo {
  border-color: rgb(162, 0, 255) !important; 
  background-color: rgb(255, 255, 255); 
} 

/* Title */
aside.admonition-intermezzo > div:first-child {
  background-color: rgb(218, 154, 255);  
}

/* Icon */
aside.admonition-intermezzo > div:first-child::before {
  content: "📖";
  /* add padding left so it is not directly on the side*/
  padding-left: 0.2em;
  margin-left: 0.5em;
}

aside.admonition-intermezzo > div:first-child > div:first-child {
  background-color: rgb(218, 154, 255); /* changes header color of text part
  margin-left: 0 !important; /* voorkomt dubbele margin */
}

.admonition-intermezzo .admonition-title-intermezzo {
  background-color: black; /* Change header background color */
  color: #FFFFFF; /* Change header text color */
}

/* Custom icon using ::before pseudo-element */
.admonition-intermezzo .admonition-title-intermezzo::before {
  content: "📖"; /* Use an emoji or */
  content: "f518"; /* Use a FontAwesome icon code */
  font-family: "Font Awesome 5 Free"; /* If using FontAwesome */
  margin-right: 0.5em;
}

aside.admonition-intermezzo img {
display: block;
}


/* ADMONITION EXAMPLE */
/* Parent */
aside.admonition-example {
  border-color: rgb(12, 35, 64) !important; 
  background-color: rgb(255, 255, 255); 
} 

/* Title */
aside.admonition-example > div:first-child {
  background-color: rgb(0, 118, 194);  
}

/* Icon */
aside.admonition-example > div:first-child::before {
  content: "🔍";
  color:rgb(12, 35, 64)
  /* add padding left so it is not directly on the side*/
  padding-left: 0.2em;
  margin-left: 0.5em;
}

aside.admonition-example > div:first-child > div:first-child {
  background-color: rgb(0, 118, 194); /* changes header color of text part
  margin-left: 0 !important; /* voorkomt dubbele margin */
}

.admonition-example .admonition-title-example {
  background-color: black; /* Change header background color */
  color: #FFFFFF; /* Change header text color */
}

/* Custom icon using ::before pseudo-element */
.admonition-example .admonition-title-example::before {
  content: "🔍"; /* Use an emoji or */
  content: "f002"; /* Use a FontAwesome icon code */
  font-family: "Font Awesome 5 Free"; /* If using FontAwesome */
  margin-right: 0.5em;
}

aside.admonition-example img {
display: block;
}


/* dark mode white inverter */
.dark img[src$=".svg"]:not(.no-invert) {
  filter: invert(1) brightness(1);
}


:root {
  --tud-raspberry: rgb(165,0,52);
  --tud-raspberry-min: rgb(165,0,52,3%);
  --tud-raspberry-mid: rgb(165,0,52,20%);
  --tud-yellow: #FFB81C;
  --tud-yellow-min: #FFB81C05;
  --tud-yellow-mid: #FFB81C20;
  --tud-darkGreen: #009B77;
  --tud-darkGreen-min: #009B7710;
  --tud-darkGreen-mid: #009B7725;
  --tud-blue: #0076C2;
  --tud-blue-min: #0076C210;
  --tud-blue-mid: #0076C225;
  --tud-black: var(--pst-color-text-base);
  --tud-black-min: #56565605;
  --tud-black-mid: #56565625;
  --tud-orange: #EC6842;
  --tud-orange-min: #EC684210;
  --tud-orange-mid: #EC684225;
  --tud-cyan: #00A6D6;
  --tud-cyan-min: #00A6D610;
  --tud-cyan-mid: #00A6D625;
  --tud-gray: #7d7d7d;
  --tud-gray-min: #7d7d7d05;
  --tud-gray-mid: #7d7d7d20;
  --tud-purple: #6f1d77;
  --tud-purple-min: #6f1d7705;
  --tud-purple-mid: #6f1d7720;
  --tud-pink: #EF60A3;
  --tud-pink-min: #EF60A310;
  --tud-pink-mid: #EF60A325;
  --tud-red: #E03C31;
  --tud-red-min: #E03C3110;
  --tud-red-mid: #E03C3125;
  --tud-green: #6CC24A;
  --tud-green-min: #6CC24A10;
  --tud-green-mid: #6CC24A25;
  --tud-darkBlue: #0C2340;
  --tud-darkBlue-min: #0C234010;
  --tud-darkBlue-mid: #0C234025;
  }

html[data-theme="dark"] {
  --tud-raspberry: #ffa7f5;
  --tud-raspberry-min: #ffa7f503;
  --tud-raspberry-mid: #ffa7f520;
  --tud-yellow: #a43a00;
  --tud-yellow-min: #a43a0005;
  --tud-yellow-mid: #a43a0020;
  --tud-darkGreen: #00bd87;
  --tud-darkGreen-min: #00bd8710;
  --tud-darkGreen-mid: #00bd8725;
  --tud-blue: #09baff;
  --tud-blue-min: #09baff10;
  --tud-blue-mid: #09baff25;
  --tud-orange: #ff581f;
  --tud-orange-min: #ff581f10;
  --tud-orange-mid: #ff581f25;
  --tud-cyan: #00a7ef;
  --tud-cyan-min: #00a7ef10;
  --tud-cyan-mid: #00a7ef25;
  --tud-gray: #828282;
  --tud-gray-min: #82828205;
  --tud-gray-mid: #82828220;
  --tud-purple: #ffa7ff;
  --tud-purple-min: #ffa7ff05;
  --tud-purple-mid: #ffa7ff20;
  --tud-pink: #ff47ab;
  --tud-pink-min: #ff47ab10;
  --tud-pink-mid: #ff47ab25;
  --tud-red: #ff7161;
  --tud-red-min: #ff716110;
  --tud-red-mid: #ff716125;
  --tud-green: #008000;
  --tud-green-min: #00800010;
  --tud-green-mid: #00800025;
  --tud-darkBlue: #c1e3ff;
  --tud-darkBlue-min: #c1e3ff10;
  --tud-darkBlue-mid: #c1e3ff25;
}
/* ADMONITIONS */
/* Admonitions can be used using :class: ... (see docs) */

/* Admonitions Danger and Error */
aside.danger, 
 aside.error {
  border-color: var(--tud-red);
  background-color: var(--tud-red-min);
}
aside.danger > div:first-child,
 aside.error > div:first-child {
  background-color: var(--tud-red-mid);
}
div.admonition.danger > div:first-child::after,
 div.admonition.error > div:first-child::after {
  color: var(--tud-red);
}

.myst-admonition-attention, .myst-admonition-warning, .myst-admonition-important, .myst-admonition-caution {
  border-color: var(--tud-orange);
  background-color: var(--tud-orange-min);
}

/* Admonition Caution, Warning, Attention, Important */
aside.caution, aside.warning, aside.attention, aside.important {
  border-color: var(--tud-orange);
  background-color: var(--tud-orange-min);
}
.myst-admonition-attention > div:first-child,
.myst-admonition-warning > div:first-child,
.myst-admonition-important > div:first-child,
.myst-admonition-caution > div:first-child {
  background-color: var(--tud-orange-mid);
}
.myst-admonition-caution > div:first-child::after,
.myst-admonition-warning > div:first-child::after,
.myst-admonition-attention > div:first-child::after,
.myst-admonition-important > div:first-child::after {
  color: var(--tud-orange);
}

/* Admonition Hint, Note, SeeAlso, Tip, Remark */
.myst-admonition-hint, .myst-admonition-note, 
  .myst-admonition-seealso, .myst-admonition-tip, .myst-admonition-remark {
  border-color: var(--tud-green);
  background-color: var(--tud-green-min);
}
.myst-admonition-hint > div:first-child,
.myst-admonition-note > div:first-child,
.myst-admonition-seealso > div:first-child,
.myst-admonition-tip > div:first-child,
.myst-admonition-remark > div:first-child  {
  background-color: var(--tud-green-mid);
}

.myst-admonition-hint > div:first-child::after,
.myst-admonition-note > div:first-child::after,
.myst-admonition-seealso > div:first-child::after,
.myst-admonition-tip > div:first-child::after,
.myst-admonition-remark > div:first-child::after {
  color: var(--tud-green);
}

/* Admonitions important */

.myst-admonition-important {
  border-color: var(--tud-orange);
  background-color: var(--tud-orange-min);
}
.myst-admonition-important > div:first-child {
  background-color: var(--tud-orange-mid);
}

.myst-admonition-important > div:first-child > svg {
  fill: var(--tud-orange);
}

 /* Admonition class */
aside.admonition {
  border-color: var(--tud-cyan);
  background-color: var(--tud-cyan-min);
}
aside.admonition > div:first-child {
  background-color: var(--tud-cyan-mid);
}
aside.admonition > div:first-child::after {
  color: var(--tud-cyan);
}

/* PROOFS PRF:... */
/* As we are unable to add classes to proofs, we target the id's */
/* Every prf:xyz must have :label: xyz-... where any text can be added to distinguish different proofs */

/* prf:proof */

aside[id^="proof-"] {
  background-color: var(--tud-cyan-min);
  border-left: .2rem solid lightgrey;
  border-radius: .25rem;
}

aside[id^="proof-"] > div:first-child {
  display: none;
}


/* prf:solution */
aside[id^="solution-"] {
  background-color: var(--tud-purple-min);
  border-left: .2rem solid var(--tud-purple);
  border-radius: .25rem;
}
aside[id^="solution-"] > .div:first-child {
  background-color: var(--tud-purple-mid);
}


/* prf:definition */

aside[id^="definition-"] {
  background-color: var(--tud-blue-min);
  border-left: .2rem solid var(--tud-blue);
  border-radius: .25rem;
}
aside[id^="definition-"] > div:first-child {
  background-color: var(--tud-blue-mid);
}

/* prf: (Theorem, Lemma, Preposition, Corollary, Criterion)  */
aside[id^="theorem-"],
 aside[id^="criterion-"],
  aside[id^="lemma-"],
   aside[id^="proposition-"], 
    aside[id^="corollary-"] {
      background-color: var(--tud-darkGreen-min);
      border-left: .2rem solid var(--tud-darkGreen);
      border-radius: .25rem;
}

aside[id^="theorem-"] > div:first-child,
  aside[id^="criterion-"] > div:first-child,
   aside[id^="lemma-"] > div:first-child,
    aside[id^="proposition-"] > div:first-child,
     aside[id^="corollary-"] > div:first-child {
      background-color: var(--tud-darkGreen-mid);
}
  
/* prf: (Axiom, Conjecture, Assumption) */
aside[id^="axiom-"], 
  aside[id^="assumption-"],
  aside[id^="conjecture-"]{
  background-color: var(--tud-red-min);
  border-left: .2rem solid var(--tud-red);
  border-radius: .25rem;
}
aside[id^="axiom-"] > div:first-child,
  aside[id^="assumption-"] > div:first-child,
  aside[id^="conjecture-"] > div:first-child{
  background-color: var(--tud-red-mid);
}

/* prf: (Property, Observation) */
aside[id^="property-"],
 aside[id^="observation-"]{
    background-color: var(--tud-orange-min);
    border-left: .2rem solid var(--tud-orange);
    border-radius: .25rem;
  }
aside[id^="property-"] > div:first-child,
  aside[id^="observation-"] > div:first-child{
    background-color: var(--tud-orange-mid);
}

/* prf:Algorithm */

aside[id^="algorithm-"] {
  background-color: var(--tud-darkBlue-min);
  /* border-left: .2rem solid var(--tud-darkBlue); */
  border-radius: .25rem;
}
aside[id^="algorithm-"] > div:first-child {
  background-color: var(--tud-darkBlue-mid);
  border-top: .15rem solid var(--tud-darkBlue-mid);
  border-bottom: .15rem solid var(--tud-darkBlue-mid);
}
  
/* prf:Example */
aside[id^="example-"] {
  background-color: var(--tud-yellow-min);
  border-left: .2rem solid var(--tud-yellow);
  border-radius: .25rem;
}
aside[id^="example-"] > div:first-child {
  background-color: var(--tud-yellow-mid);
}

 /* BUTTON */
a.button{
  color: #FFFFFF !important;
  background-color: var(--tud-cyan) !important;
  border-color: var(--tud-cyan) !important;
}

/* EXERCISE AND SOLUTION */

aside[id^="exercise-"] {
  border-left: .2rem solid var(--tud-raspberry);
  border-radius: .25rem;
  background-color: var(--tud-raspberry-min);
}

aside[id^="exercise-"] > div:first-child {
  background-color: var(--tud-raspberry-mid);
}

/* Solution */
aside[id^="solution-"] {
  border-color: var(--tud-purple);
  background-color: var(--tud-purple-min);
}
aside[id^="solution-"] > div:first-child  {
  color: var(--tud-purple);
  background-color: var(--tud-purple-mid);
}

aside[id^="solution-"] > div:first-child > div:first-child > span {
  color: black; /* Makes only the <p> element and its content visible */
}

/* <a> elemts in for example the menubar on the side */

html {
  --pst-color-primary: var(--tud-cyan) !important;
  --pst-color-secondary: var(--tud-green) !important;
  --pst-color-table-row-hover-bg: var(--tud-raspberry-mid) !important;
}

/* if <a> element has aria-current:"page" then make text pst-color-primary */
a[aria-current="page"] {
  color: var(--pst-color-primary) !important;
  background-color: white;
}

/* If not, make text colour secondary on hover */
a:hover:not([aria-current="page"]) {
  color: var(--pst-color-secondary) !important;
}

/* Class prev next title */
.prev-next-title {
  color: var(--pst-color-primary) !important;
}

/* Override text-blue-800 to pst-color-primary */
/* This colour seems to be only used in the TOC.  */
.text-blue-800 {
  color: black; /* I set this to black as this is the case in the jb1 stylesheet */
}

li > .text-blue-600 {
  color: var(--pst-color-primary) !important;
}

li.border-l-blue-500 {
  border-color: var(--pst-color-primary) !important;
}

li > a {
  background: white !important;
}
/* Colours as classes */

.tud-red {color: var(--tud-red);}
.tud-blue {color: var(--tud-blue);}
.tud-green {color: var(--tud-green);}
.tud-tud-raspberry {color: var(--tud-raspberry);}
.tud-yellow {color: var(--tud-yellow);}
.tud-darkGreen {color: var(--tud-darkGreen);}
.tud-orange {color: var(--tud-orange);}
.tud-cyan {color: var(--tud-cyan);}
.tud-gray {color: var(--tud-gray);}
.tud-purple {color: var(--tud-purple);}
.tud-pink {color: var(--tud-pink);}
.tud-darkBlue {color: var(--tud-darkBlue);}