/*********************************************
* for icons, see https://sphinx-design.readthedocs.io/en/latest/badges_buttons.html
*********************************************/

/*********************************************
* Variables *  
*********************************************/
:root {
  --note-title-color: rgba(255,138,255,.1);
  --note-background-color:  rgba(255,138,255,.1);
  --note-border-color: #7e2894;
  --grey-border-color: #ccc;
  --pst-icon-my-test: "\f040";
  /*
  --my-checkpoint-background-color: #7e2894;
  --my-hint-background-color:  rgba(255, 255, 204, 0.99);
  --my-answer-background-color:  rgba(17, 250, 46, 0.29);
  */
  --my-checkpoint-title-color: #C8F2BF; /*#A1D0ED;*/
  --my-checkpoint-background-color: #DAF6D3; /*#A1D0ED;*/
  --my-hint-background-color:  #ECFAE9; /*#DEEEF9;*/
  --my-answer-background-color: #ECFAE9; /*#DEEEF9;*/
  --my-exercise-hint-background-color: #FFF9FB;
}

/*********************************************
* Check point question *
* icon: circle-check 
*********************************************/
div.my-checkpoint {
  border-color: var(--note-border-color);
  background-color: var(--my-checkpoint-background-color);
}

div.my-checkpoint p.admonition-title {
  background-color: var(--my-checkpoint-title-color);
}

/* Remove content box */
div.my-checkpoint p.admonition-title::after {
  content: "\f058";
}


/*********************************************
* Hint *
* icon: lightbulb;
*********************************************/
div.my-hint {
  border-color: var(--note-border-color);
  background-color: var(--my-hint-background-color);
}

div.my-hint p.admonition-title {
  background-color: var(--my-hint-background-color);
}

/* Remove content box */
div.my-hint p.admonition-title::after {
  content: var(--pst-icon-lightbulb);
}


/*********************************************
* Solution *
* icon: pencil;
*********************************************/
div.my-answer{
  border-color: var(--grey-border-color);
  background-color: none;
}

div.my-answer p.admonition-title {
  background-color: var(--my-answer-background-color);
  text-decoration: none;
}

/* Remove content box */
div.my-answer p.admonition-title::after {
  content: "\f040";
}


/*********************************************
* Exercise-hint *
* icon: lightbulb;
*********************************************/
div.my-exercise-hint {
  border-color: var(--note-border-color);
  background-color: var(--my-exercise-hint-background-color);
}

div.my-exercise-hint p.admonition-title {
  background-color: var(--my-exercise-hint-background-color);
}

/*********************************************/

div.extra-credit {
    border-left-color: rgba(var(--pst-color-success), 1);
}
div.extra-credit .admonition-title {
    background-color: rgba(var(--pst-color-success), .1)
}
div.extra-credit .admonition-title:before {
    color: rgba(var(--pst-color-success), 1);
    content: '\f040';
}