/* 
Blockquote styling similar to Github
https://github.com/orgs/community/discussions/16925
SVGs from Github, colors from Nokia branding guidelines
*/

blockquote {
    /*--quote-color-note_txt: #005aff;*/
    --quote-color-note_txt: hsla(219, 89%, 36%, 1);
    --quote-color-note_bg: hsla(206, 100%, 50%, 0.15);
    --quote-color-tip_txt: hsla(140, 100%, 19%, 1);
    --quote-color-tip_bg: hsla(140, 83%, 94%, 1);
    --quote-color-important_txt: hsla(40, 100%, 17%, 1);
    --quote-color-important_bg: hsla(40, 100%, 92%, 1);
    --quote-color-warning_txt: hsla(24, 100%, 22%, 1);
    --quote-color-warning_bg: hsla(24, 100%, 94%, 1);
    --quote-color-caution_txt: hsla(0, 69%, 34%, 1);
    --quote-color-caution_bg: hsla(0, 100%, 96%, 1);
    font-size: 14px;
    border-left: none;
    border-radius: 8px;
    /*border-color: var(--quote-color);*/
    background-color: var(--quote-color_bg);
  }
  
  blockquote p:first-child {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: var(--quote-color_txt);
  }
  blockquote p:first-child > svg {
    margin-right: 0.5em;
  }
  
  blockquote.custom-quote p:last-child {
    margin-bottom: 10px !important;
  }
  
  .quote-note {
    --quote-color_txt: var(--quote-color-note_txt);
    --quote-color_bg: var(--quote-color-note_bg);
  }
  
  .quote-tip {
    --quote-color_txt: var(--quote-color-tip_txt);
    --quote-color_bg: var(--quote-color-tip_bg);
  }
  
  .quote-important {
    --quote-color_txt: var(--quote-color-important_txt);
    --quote-color_bg: var(--quote-color-important_bg);
  }

  .quote-warning {
    --quote-color_txt: var(--quote-color-warning_txt);
    --quote-color_bg: var(--quote-color-warning_bg);
  }
  
  .quote-caution {
    --quote-color_txt: var(--quote-color-caution_txt);
    --quote-color_bg: var(--quote-color-caution_bg);
  }