@mixin uxg-changelog-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);

  uxg-changelog {
    .title {
      .changelog-icon {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjExNXB4IiBoZWlnaHQ9IjExNXB4IiB2aWV3Qm94PSIwIDAgMTE1IDExNSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8dGl0bGU+c3VwcG9ydDwvdGl0bGU+DQogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJDaGFuZ2Vsb2ctb3AzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDg3LjAwMDAwMCwgLTEwMy4wMDAwMDApIiBmaWxsPSIjQzEzN0EyIiBmaWxsLXJ1bGU9Im5vbnplcm8iPg0KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4Ny4wMDAwMDAsIDEwMy4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8ZyBpZD0ic3VwcG9ydCI+DQogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMC4yOTgzNjI4LDg5LjkyMjk4MTggQzE4LjY4MjYyOTYsODkuOTIyOTgxOCAxNy4xMjk0MTI4LDkwLjMyOTI5MDkgMTUuNzUxNDE2OCw5MS4wOTIyMjk3IEM4LjQ5MjUwNDU5LDgxLjcxNjk1NCA0LjUwODIwMzYxLDcwLjA3MDYwNDcgNC41MDgyMDM2MSw1OC4xMzk0ODQxIEM0LjUwODIwMzYxLDI4LjU4NTM2NDggMjguMzcxNzQ1Niw0LjU0MjE0NzIgNTcuNzA1MDA2Miw0LjU0MjE0NzIgQzYxLjI3MTA2NTYsNC41NDIxNDcyIDY0LjgzNTM2NDEsNC44OTk2NjM5MiA2OC4yOTkyODQ3LDUuNjA0OTM4NzggQzY5LjUxNzkwODUsNS44NTMzMzc0NiA3MC43MDgzNTYsNS4wNTg0NjE3IDcwLjk1NDg5ODQsMy44Mjg4ODgxNSBDNzEuMjAxNDQwOCwyLjU5OTMxNDU5IDcwLjQxMjUwNTEsMS40MDE2NzgyNCA2OS4xOTIxMjA0LDEuMTUyMzkyNDggQzY1LjQzNDk5MDUsMC4zODc2NzkzMDQgNjEuNTcwNDM4NywwIDU3LjcwNTAwNjIsMCBDNDIuMjkxNzA0NywwIDI3LjgwMDI5NTQsNi4wNDc2MjA1NCAxNi45MDEzNjEsMTcuMDI4NjE2NCBDNi4wMDI0MjY1MSwyOC4wMDk2MTE5IDAsNDIuNjEwMTMxMyAwLDU4LjEzOTQ4NDEgQzAsNzEuMjAyNTkzIDQuNDAyNTQyNTksODMuOTUwNzY3OSAxMi40MTc4MTE3LDk0LjE3MDU5OTEgQzExLjM4NTg1NTcsOTUuNzIzOTc4IDEwLjgzMTEzNTIsOTcuNTQ5NzA4MiAxMC44MzExMzUyLDk5LjQ2MTQ5MDkgQzEwLjgzMTEzNTIsMTAyLjAwOTM1MiAxMS44MTY0MjQzLDEwNC40MDQ2MjUgMTMuNjA0NzM3MiwxMDYuMjA1NTE1IEMxNS4zOTIxNjkzLDEwOC4wMDcyOTIgMTcuNzY5NTQyMywxMDkgMjAuMjk4MzYyOCwxMDkgQzIyLjgyNzE4MzMsMTA5IDI1LjIwNDU1NjMsMTA4LjAwNzI5MiAyNi45OTI4NjkxLDEwNi4yMDU1MTUgQzI4Ljc4MTE4MiwxMDQuNDA0NjI1IDI5Ljc2NTU5MDQsMTAyLjAwODQ2NCAyOS43NjU1OTA0LDk5LjQ2MDYwMzYgQzI5Ljc2NTU5MDQsOTYuOTEzNjMwMiAyOC43ODExODIsOTQuNTE3NDcwMiAyNi45OTI4NjkxLDkyLjcxNjU3OTcgQzI1LjIwNDU1NjMsOTAuOTE0ODAyMSAyMi44MjcxODMzLDg5LjkyMjk4MTggMjAuMjk4MzYyOCw4OS45MjI5ODE4IFogTTIzLjgwNDU0NzgsMTAyLjk5NDA3NSBDMjIuODY4NTY3MiwxMDMuOTM3OTkgMjEuNjIyNjQ3NiwxMDQuNDU3ODUzIDIwLjI5ODM2MjgsMTA0LjQ1Nzg1MyBDMTguOTc0MDc4LDEwNC40NTc4NTMgMTcuNzI5MDM5MSwxMDMuOTM3OTkgMTYuNzkyMTc4LDEwMi45OTQwNzUgQzE1Ljg1NTMxNjksMTAyLjA1MDE2IDE1LjMzOTMzODgsMTAwLjc5NTc0NyAxNS4zMzkzMzg4LDk5LjQ2MTQ5MDkgQzE1LjMzOTMzODgsOTguMTI2MzQ3OCAxNS44NTUzMTY5LDk2Ljg3MTkzNDYgMTYuNzkyMTc4LDk1LjkyODAxOTcgQzE3LjcyODE1ODYsOTQuOTg0MTA0NyAxOC45NzQwNzgsOTQuNDY1MTI5IDIwLjI5ODM2MjgsOTQuNDY1MTI5IEMyMS42MjI2NDc2LDk0LjQ2NTEyOSAyMi44Njc2ODY4LDk0Ljk4NDk5MTggMjMuODA0NTQ3OCw5NS45MjgwMTk3IEMyNC43NDE0MDg5LDk2Ljg3MTkzNDYgMjUuMjU3Mzg2OCw5OC4xMjYzNDc4IDI1LjI1NzM4NjgsOTkuNDYxNDkwOSBDMjUuMjU3Mzg2OCwxMDAuNzk1NzQ3IDI0Ljc0MTQwODksMTAyLjA1MDE2IDIzLjgwNDU0NzgsMTAyLjk5NDA3NSBMMjMuODA0NTQ3OCwxMDIuOTk0MDc1IFoiIGlkPSJTaGFwZSI+PC9wYXRoPg0KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAyLjU2MjA1NiwyMC44MjY3Mzk2IEMxMDUuMDE2MTM2LDE3LjEyMjkzNzkgMTA0LjYyMTk2NywxMi4wNTkxNTM1IDEwMS4zNzYwMjEsOC43OTM1OTc5IEM5OS41ODUwNjI1LDYuOTkyNzA3NjIgOTcuMjA0MTcyOSw2IDk0LjY3MTYxMTgsNiBDOTIuMTM5MDUwNiw2IDg5Ljc1ODE2MSw2Ljk5MjcwNzYyIDg3Ljk2NzIwMjksOC43OTM1OTc5IEM4Ni4xNzYyNDQ4LDEwLjU5NTM3NTUgODUuMTkwMzgwMiwxMi45OTA2NDg0IDg1LjE5MDM4MDIsMTUuNTM4NTA5MSBDODUuMTkwMzgwMiwxOC4wODYzNjk4IDg2LjE3NjI0NDgsMjAuNDgxNjQyNyA4Ny45NjcyMDI5LDIyLjI4MzQyMDMgQzg5Ljc1ODE2MSwyNC4wODUxOTc5IDkyLjEzOTA1MDYsMjUuMDc3MDE4MiA5NC42NzE2MTE4LDI1LjA3NzAxODIgQzk2LjI4OTczNDksMjUuMDc3MDE4MiA5Ny44NDUyNDkzLDI0LjY3MDcwOTEgOTkuMjI1MjgzNiwyMy45MDc3NzAzIEMxMDYuNDk0OTMzLDMzLjI4MzkzMzEgMTEwLjQ4NTEyOCw0NC45MjkzOTUzIDExMC40ODUxMjgsNTYuODYwNTE1OSBDMTEwLjQ4NTEyOCw4Ni40MTQ2MzUyIDg2LjU4NjI4NjgsMTEwLjQ1Nzg1MyA1Ny4yMDk2MzYyLDExMC40NTc4NTMgQzUzLjY3MzU3NDQsMTEwLjQ1Nzg1MyA1MC4xMzc1MTIzLDExMC4xMDc0MzMgNDYuNzAxMDk1LDEwOS40MTU0NjUgQzQ1LjQ3ODkwNDgsMTA5LjE2OTcyOCA0NC4yODkzNDE5LDEwOS45NjcyNjUgNDQuMDQ0MTk4NiwxMTEuMTk2ODM5IEM0My43OTk5MzY4LDExMi40MjcyOTkgNDQuNTkyNjg0OSwxMTMuNjIzMTYyIDQ1LjgxNDg3NSwxMTMuODY5Nzg2IEM0OS41NDIyODk4LDExNC42MTk0MTggNTMuMzc2NDAzOSwxMTUgNTcuMjA5NjM2MiwxMTUgQzcyLjY0NTczNzIsMTE1IDg3LjE1ODU4MjMsMTA4Ljk1MjM3OSA5OC4wNzM2Mzg0LDk3Ljk3MTM4MzYgQzEwOC45ODg2OTUsODYuOTkwMzg4MSAxMTUsNzIuMzg5ODY4NyAxMTUsNTYuODYwNTE1OSBDMTE1LDQzLjc5NjUxOTcgMTEwLjU5MDA2MywzMS4wNDc0NTc5IDEwMi41NjIwNTYsMjAuODI2NzM5NiBaIE05MS4xNjAyNDA0LDE5LjA3MTk4MDMgQzkwLjIyMTk5MzUsMTguMTI4MDY1NCA4OS43MDUyNTI0LDE2Ljg3MzY1MjIgODkuNzA1MjUyNCwxNS41Mzg1MDkxIEM4OS43MDUyNTI0LDE0LjIwNDI1MzQgOTAuMjIxOTkzNSwxMi45NDk4NDAyIDkxLjE2MDI0MDQsMTIuMDA1OTI1MiBDOTIuMDk3NjA1NSwxMS4wNjIwMTAzIDkzLjM0NTM2ODEsMTAuNTQyMTQ3MiA5NC42NzE2MTE4LDEwLjU0MjE0NzIgQzk1Ljk5Nzg1NTUsMTAuNTQyMTQ3MiA5Ny4yNDU2MTc4LDExLjA2MjAxMDMgOTguMTgzODY0NywxMi4wMDU5MjUyIEMxMDAuMTE5NDQsMTMuOTU0MDgwNSAxMDAuMTE5NDQsMTcuMTIzODI1IDk4LjE4Mzg2NDcsMTkuMDcxOTgwMyBDOTcuMjQ1NjE3OCwyMC4wMTUwMDgyIDk1Ljk5Nzg1NTUsMjAuNTM0ODcxIDk0LjY3MTYxMTgsMjAuNTM0ODcxIEM5My4zNDQ0ODYxLDIwLjUzNDg3MSA5Mi4wOTc2MDU1LDIwLjAxNTAwODIgOTEuMTYwMjQwNCwxOS4wNzE5ODAzIFoiIGlkPSJTaGFwZSI+PC9wYXRoPg0KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDguNzA0Njk1OSw5NS43NDcyNTI3IEM0OC43MDQ2OTU5LDk2Ljk5MTU0MzcgNDkuNzEzOTQ1NSw5OCA1MC45NTcyNDk0LDk4IEw2NS4wNDE4Njg0LDk4IEM2Ni4yODYwNTIxLDk4IDY3LjI5NDQyMTksOTYuOTkxNTQzNyA2Ny4yOTQ0MjE5LDk1Ljc0NzI1MjcgTDY3LjI5NDQyMTksOTEuMzc5OTE1IEM3MC4yNTYxNzc3LDkwLjU4MjY1MzcgNzMuMDg3NzA4LDg5LjQwODc2MTEgNzUuNzQ4NTM2OSw4Ny44NzU4MzcxIEw3OC44MzE3MTk1LDkwLjk1OTI4NDkgQzc5LjI1NDA3MzMsOTEuMzgxNjc1IDc5LjgyNjg5MDcsOTEuNjE5MjY5MyA4MC40MjUyMjUyLDkxLjYxOTI2OTMgQzgxLjAyMTc5OTgsOTEuNjE5MjY5MyA4MS41OTU0OTcxLDkxLjM4MTY3NSA4Mi4wMTc4NTA5LDkwLjk1ODQwNSBMOTEuOTczMDgxNSw4MC45OTUyNzgyIEM5Mi44NTIxMDU0LDgwLjExNTI5ODggOTIuODUyMTA1NCw3OC42ODg4NTIyIDkxLjk3MzA4MTUsNzcuODA5NzUyNyBMODguODkzNDE4Nyw3NC43Mjk4MjQ5IEM5MC40MjYyMTA4LDcyLjA2ODc2NzIgOTEuNjAwMDAyMyw2OS4yMzY5OTM0IDkyLjM5NzE5NTIsNjYuMjc0OTgyOCBMOTYuNzQ3NDM5Miw2Ni4yNzQ5ODI4IEM5Ny45OTE2MjMsNjYuMjc0OTgyOCA5OS4wMDAwMDI0LDY1LjI2NjUyNjMgOTkuMDAwMDAyNCw2NC4wMjIyMzU2IEw5OS4wMDAwMDI0LDQ5LjkzNjQwNTMgQzk5LjAwMDAwMjQsNDguNjkyMTE0NiA5Ny45OTE2MjMsNDcuNjgzNjU4MSA5Ni43NDc0MzkyLDQ3LjY4MzY1ODEgTDkyLjM5NjMxNTMsNDcuNjgzNjU4MSBDOTEuNTk5MTIyNSw0NC43MjI1Mjc1IDkwLjQyNjIxMDgsNDEuODkwNzUzOSA4OC44OTM0MTg3LDM5LjIyOTY5NjIgTDkxLjk1NjM2MzUsMzYuMTY2NDg3OCBDOTIuMzc4NzE3MywzNS43NDQwOTc2IDkyLjYxNjI5MTIsMzUuMTcwMzUxMSA5Mi42MTYyOTEyLDM0LjU3Mjg0NSBDOTIuNjE1NDExMywzMy45NzUzMzkyIDkyLjM3NzgzNzQsMzMuNDAxNTkyNiA5MS45NTU0ODM2LDMyLjk3OTIwMjUgTDgxLjk5MjMzMzcsMjMuMDIzMTE1NSBDODEuMTEzMzA5OCwyMi4xNDQwMTYzIDc5LjY4Njk4NTksMjIuMTQ0MDE2MyA3OC44MDcwODIyLDIzLjAyMzk5NTYgTDc1Ljc0ODUzNjksMjYuMDgzNjg0IEM3My4wODc3MDgsMjQuNTUwNzU5NyA3MC4yNTYxNzc3LDIzLjM3Njg2NzMgNjcuMjk0NDIxOSwyMi41Nzk2MDU5IEw2Ny4yOTQ0MjE5LDE4LjI1Mjc0NzMgQzY3LjI5NDQyMTksMTcuMDA4NDU2MyA2Ni4yODYwNTIxLDE2IDY1LjA0MTg2ODQsMTYgTDUwLjk1NzI0OTQsMTYgQzQ5LjcxMzk0NTUsMTYgNDguNzA0Njk1OSwxNy4wMDg0NTYzIDQ4LjcwNDY5NTksMTguMjUyNzQ3MyBMNDguNzA0Njk1OSwyMi41ODA0ODYgQzQ1Ljc0MzgxOTksMjMuMzc2ODY3MyA0Mi45MTIyODk2LDI0LjU1MDc1OTcgNDAuMjUxNDYwNywyNi4wODM2ODQgTDM3LjE5MjAzNTUsMjMuMDIzOTk1NiBDMzYuMzEzMDExNiwyMi4xNDQ4OTYyIDM0Ljg4NjY4NzgsMjIuMTQ0MDE2MyAzNC4wMDY3ODQsMjMuMDIzMTE1NSBMMjQuMDQ0NTE0LDMyLjk4MDA4MjQgQzIzLjYyMTI4MDMsMzMuNDAyNDcyNSAyMy4zODM3MDY0LDMzLjk3NTMzOTIgMjMuMzgzNzA2NCwzNC41NzI4NDUgQzIzLjM4MzcwNjQsMzUuMTcwMzUxMSAyMy42MjEyODAzLDM1Ljc0NDA5NzYgMjQuMDQzNjM0MSwzNi4xNjY0ODc4IEwyNy4xMDY1Nzg5LDM5LjIyOTY5NjIgQzI1LjU3Mzc4NjcsNDEuODkwNzUzOSAyNC4zOTk5OTUzLDQ0LjcyMTY0NzUgMjMuNjAyODAyNCw0Ny42ODM2NTgxIEwxOS4yNjA0Nzc1LDQ3LjY4MzY1ODEgQzE4LjAxNjI5MzcsNDcuNjgzNjU4MSAxNy4wMDc5MjM5LDQ4LjY5MjExNDYgMTcuMDA3OTIzOSw0OS45MzU1MjU0IEwxNy4wMDAwMDI0LDY0LjAyMTM1NTcgQzE2Ljk5OTEyNSw2NC42MTg4NjE1IDE3LjIzNjY5ODksNjUuMTkyNjA4MyAxNy42NTkwNTI3LDY1LjYxNDk5ODQgQzE4LjA4MTQwNjUsNjYuMDM3Mzg4NSAxOC42NTQyMjM5LDY2LjI3NDk4MjggMTkuMjUyNTU4NCw2Ni4yNzQ5ODI4IEwyMy42MDI4MDI0LDY2LjI3NDk4MjggQzI0LjM5OTk5NTMsNjkuMjM2OTkzNCAyNS41NzM3ODY3LDcyLjA2ODc2NzIgMjcuMTA2NTc4OSw3NC43Mjk4MjQ5IEwyNC4wMjY5MTYxLDc3LjgwOTc1MjcgQzIzLjE0Nzg5MjIsNzguNjg4ODUyMiAyMy4xNDcwMTI0LDgwLjExNTI5ODggMjQuMDI2OTE2MSw4MC45OTUyNzgyIEwzMy45ODIxNDY3LDkwLjk1ODQwNSBDMzQuNDA0NTAwNSw5MS4zODA3OTUxIDM0Ljk3NzMxNzksOTEuNjE5MjY5MyAzNS41NzQ3NzI0LDkxLjYxOTI2OTMgTDM1LjU3NTY1MjQsOTEuNjE5MjY5MyBDMzYuMTczMTA2OSw5MS42MTkyNjkzIDM2Ljc0NTkyNDMsOTEuMzgxNjc1IDM3LjE2ODI3ODEsOTAuOTU5Mjg0OSBMNDAuMjUwNTgwOSw4Ny44NzU4MzcxIEM0Mi45MTIyODk2LDg5LjQwODc2MTEgNDUuNzQzODE5OSw5MC41ODI2NTM3IDQ4LjcwNDY5NTksOTEuMzc5OTE1IEw0OC43MDQ2OTU5LDk1Ljc0NzI1MjcgWiBNNDEuMTM0MDA0Miw4My4xMzgwMjggQzQwLjI0MjY2MTgsODIuNTYxNjQxNSAzOS4wNjk3NTAyLDgyLjY4NjU5ODcgMzguMzE4MzEyMyw4My40MzcyMjEgTDM1LjU3NTY1MjQsODYuMTgwMTE2OCBMMjguODA0NzkzMiw3OS40MDMzOTU1IEwzMS41NDQ4MTM1LDc2LjY2MjI1OTYgQzMyLjI5NTM3MTQsNzUuOTExNjM3MiAzMi40MjAzMTc2LDc0LjczODYyNDggMzEuODQzOTgwNiw3My44NDcyMDU1IEMyOS44MDE3MjQxLDcwLjY4NjMxOTUgMjguMzY1NzIxMiw2Ny4yMjE4NDA3IDI3LjU3NzMyNzUsNjMuNTQ4ODA2NSBDMjcuMzUzODMyLDYyLjUxMTMxMSAyNi40MzY5NzIyLDYxLjc2OTQ4ODMgMjUuMzc0OTI4NCw2MS43Njk0ODgzIEwyMS41MDU5OTE4LDYxLjc2OTQ4ODMgTDIxLjUxMTI3MTMsNTIuMTg5MTUyNiBMMjUuMzc0OTI4NCw1Mi4xODkxNTI2IEMyNi40MzY5NzIyLDUyLjE4OTE1MjYgMjcuMzUzODMyLDUxLjQ0ODIxIDI3LjU3NzMyNzUsNTAuNDA5ODM0NCBDMjguMzY1NzIxMiw0Ni43Mzc2ODAyIDI5LjgwMTcyNDEsNDMuMjczMjAxNCAzMS44NDM5ODA2LDQwLjExMjMxNTQgQzMyLjQyMDMxNzYsMzkuMjIwODk2MyAzMi4yOTUzNzE0LDM4LjA0Nzg4MzggMzEuNTQ0ODEzNSwzNy4yOTcyNjEyIEwyOC44MjIzOTEzLDM0LjU3MzcyNTIgTDM1LjU5ODUyOTgsMjcuODAyMjgzNyBMMzguMzE4MzEyMywzMC41MjMxNzk5IEMzOS4wNjk3NTAyLDMxLjI3MzgwMjMgNDAuMjQxNzgxNywzMS4zOTc4Nzk0IDQxLjEzNDAwNDIsMzAuODIyMzcyOSBDNDQuMjkzNzM4NSwyOC43Nzk5NDA4IDQ3Ljc1NzkxOTQsMjcuMzQzODE0NCA1MS40MzA2Mzc3LDI2LjU1NTM1MjkgQzUyLjQ2ODA0NCwyNi4zMzE4MzggNTMuMjA5ODAyOSwyNS40MTQwMTk1IDUzLjIwOTgwMjksMjQuMzUyNzY0NCBMNTMuMjA5ODAyOSwyMC41MDU0OTQ1IEw2Mi43ODkzMTQ4LDIwLjUwNTQ5NDUgTDYyLjc4OTMxNDgsMjQuMzUxODg0NSBDNjIuNzg5MzE0OCwyNS40MTQwMTk1IDYzLjUzMDE5MzYsMjYuMzMxODM4IDY0LjU2ODQ4LDI2LjU1NDQ3MjggQzY4LjI0MDMxODUsMjcuMzQzODE0NCA3MS43MDUzNzkyLDI4Ljc3OTA2MDcgNzQuODY1MTEzNSwzMC44MjE0OTMgQzc1Ljc1NjQ1NiwzMS4zOTc4Nzk0IDc2LjkyOTM2NzYsMzEuMjczODAyMyA3Ny42Nzk5MjU2LDMwLjUyMjMgTDgwLjQwMDU4NzcsMjcuODAyMjgzNyBMODcuMTc2NzI2NCwzNC41NzM3MjUyIEw4NC40NTQzMDQyLDM3LjI5NjM4MTMgQzgzLjcwMjg2NjUsMzguMDQ3ODgzOCA4My41Nzg4MDAyLDM5LjIyMDg5NjMgODQuMTU1MTM2OSw0MC4xMTIzMTU0IEM4Ni4xOTczOTM3LDQzLjI3MzIwMTQgODcuNjMyNTE2NSw0Ni43Mzc2ODAyIDg4LjQyMTc5MDMsNTAuNDA5ODM0NCBDODguNjQ0NDA1OSw1MS40NDgyMSA4OS41NjIxNDU1LDUyLjE4OTE1MjYgOTAuNjI0MTg5MSw1Mi4xODkxNTI2IEw5NC40OTQ4ODU3LDUyLjE4OTE1MjYgTDk0LjQ5NDg4NTcsNjEuNzY5NDg4MyBMOTAuNjI0MTg5MSw2MS43Njk0ODgzIEM4OS41NjIxNDU1LDYxLjc2OTQ4ODMgODguNjQ1Mjg1Nyw2Mi41MTEzMTEgODguNDIxNzkwMyw2My41NDg4MDY1IEM4Ny42MzMzOTY1LDY3LjIyMDk2MDcgODYuMTk3MzkzNyw3MC42ODYzMTk1IDg0LjE1NTEzNjksNzMuODQ2MzI1NSBDODMuNTc4ODAwMiw3NC43Mzg2MjQ4IDgzLjcwMzc0NjQsNzUuOTExNjM3MiA4NC40NTQzMDQyLDc2LjY2MjI1OTYgTDg3LjE5NDMyNDUsNzkuNDAyNTE1MyBMODAuNDIzNDY1Myw4Ni4xNzkyMzY4IEw3Ny42ODA4MDU1LDgzLjQzNzIyMSBDNzYuOTI5MzY3Niw4Mi42ODU3MTg1IDc1Ljc1NjQ1Niw4Mi41NjE2NDE1IDc0Ljg2NTExMzUsODMuMTM4MDI4IEM3MS43MDQ0OTk0LDg1LjE4MDQ2MDIgNjguMjQwMzE4NSw4Ni42MTU3MDY2IDY0LjU2ODQ4LDg3LjQwNTA0ODEgQzYzLjUzMDE5MzYsODcuNjI4NTYzIDYyLjc4OTMxNDgsODguNTQ1NTAxNCA2Mi43ODkzMTQ4LDg5LjYwNzYzNjYgTDYyLjc4OTMxNDgsOTMuNDk0NTA1NSBMNTMuMjA5ODAyOSw5My40OTQ1MDU1IEw1My4yMDk4MDI5LDg5LjYwNzYzNjYgQzUzLjIwOTgwMjksODguNTQ2MzgxMyA1Mi40NjgwNDQsODcuNjI4NTYzIDUxLjQzMDYzNzcsODcuNDA1MDQ4MSBDNDcuNzU4Nzk5Myw4Ni42MTY1ODY1IDQ0LjI5NDYxODQsODUuMTgwNDYwMiA0MS4xMzQwMDQyLDgzLjEzODAyOCBMNDEuMTM0MDA0Miw4My4xMzgwMjggWiIgaWQ9IlNoYXBlIj48L3BhdGg+DQogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik03Niw1Ny41IEM3Niw0Ny4yOTg4OTM3IDY3LjcwMTEwNjMsMzkgNTcuNSwzOSBDNDcuMjk4ODkzNywzOSAzOSw0Ny4yOTg4OTM3IDM5LDU3LjUgQzM5LDY3LjcwMTEwNjMgNDcuMjk4ODkzNyw3NiA1Ny41LDc2IEM2Ny43MDExMDYzLDc2IDc2LDY3LjcwMTEwNjMgNzYsNTcuNSBaIE00My40Nzc4NTE5LDU3LjUgQzQzLjQ3Nzg1MTksNDkuNzY3ODM0NCA0OS43Njc4MzQ0LDQzLjQ3Nzg1MTkgNTcuNSw0My40Nzc4NTE5IEM2NS4yMzIxNjU2LDQzLjQ3Nzg1MTkgNzEuNTIyMTQ4MSw0OS43Njg3MDg5IDcxLjUyMjE0ODEsNTcuNSBDNzEuNTIyMTQ4MSw2NS4yMzEyOTExIDY1LjIzMjE2NTYsNzEuNTIyMTQ4MSA1Ny41LDcxLjUyMjE0ODEgQzQ5Ljc2NzgzNDQsNzEuNTIyMTQ4MSA0My40Nzc4NTE5LDY1LjIzMjE2NTYgNDMuNDc3ODUxOSw1Ny41IFoiIGlkPSJTaGFwZSI+PC9wYXRoPg0KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNzcuNSw4IEM3OC4xNTgyMDMyLDggNzguODAyNzM0Myw3LjczMjU3ODY4IDc5LjI2NzU3ODIsNy4yNjgwMDcxMiBDNzkuNzMyNDIxOCw2LjgwMDUwNzUzIDgwLDYuMTU2MzUzNjkgODAsNS40OTg1MzYxMSBDODAsNC44NDQ2MjIyNCA3OS43MzMzOTg1LDQuMTk5NDkyNDcgNzkuMjY3NTc4MiwzLjczMTk5Mjg4IEM3OC44MDI3MzQzLDMuMjY3NDIxMzIgNzguMTU4MjAzMiwzIDc3LjUsMyBDNzYuODM5ODQzOCwzIDc2LjE5ODI0MjMsMy4yNjc0MjEzMiA3NS43MzMzOTg1LDMuNzMxOTkyODggQzc1LjI2NzU3ODMsNC4xOTk0OTI0NyA3NSw0Ljg0MTY5NDQ1IDc1LDUuNDk4NTM2MTEgQzc1LDYuMTU4MzA1OCA3NS4yNjc1NzgyLDYuODAwNTA3NTMgNzUuNzMzMzk4NSw3LjI2ODAwNzEyIEM3Ni4xOTgyNDIzLDcuNzMyNTc4NjggNzYuODM5ODQzOCw4IDc3LjUsOCBaIiBpZD0iUGF0aCI+PC9wYXRoPg0KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMzcuNSwxMDcgQzM2Ljg0Mjc3MzUsMTA3IDM2LjE5NzI2NTcsMTA3LjI2NzU3OCAzNS43MzI0MjE4LDEwNy43MzI0MjIgQzM1LjI2NzU3ODIsMTA4LjE5NzI2NiAzNSwxMDguODQyNzc0IDM1LDEwOS41IEMzNSwxMTAuMTYwMTU2IDM1LjI2NzU3ODIsMTEwLjgwMjczNCAzNS43MzI0MjE4LDExMS4yNjc1NzggQzM2LjE5NzI2NTcsMTExLjczMjQyMiAzNi44NDI3NzM1LDExMiAzNy41LDExMiBDMzguMTU3MjI2NSwxMTIgMzguODAyNzM0MywxMTEuNzMyNDIyIDM5LjI2NzU3ODIsMTExLjI2NzU3OCBDMzkuNzMyNDIxOCwxMTAuODAyNzM0IDQwLDExMC4xNTcyMjYgNDAsMTA5LjUgQzQwLDEwOC44NDI3NzQgMzkuNzMyNDIxOCwxMDguMTk3MjY2IDM5LjI2NzU3ODIsMTA3LjczMjQyMiBDMzguODAyNzM0MywxMDcuMjY3NTc4IDM4LjE1NzIyNjUsMTA3IDM3LjUsMTA3IFoiIGlkPSJQYXRoIj48L3BhdGg+DQogICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+');
        background-repeat: no-repeat;
        background-size: contain;
      }

      .creator {
        color: mat-color($primary, default);
      }

      span {
        color: mat-color($foreground, text);
      }
    }

    .changelog-container {
      .release-detail,
      .last-release,
      .first-release {
        background-color: mat-color($background, card);
        @include mat-elevation(4, $mat-elevation-color);
      }

      .change {
        .new {
          color: mat-color($primary, default);
          border: 1px solid mat-color($primary, default);
          background-color: mat-color($primary, 300, 0.1);
        }
        .update {
          color: map-get($uxg-grass, 100);
          border: 1px solid map-get($uxg-grass, 100);
          background-color: mat-color($uxg-grass, 100, 0.1);
        }
        .bugfix {
          color: map-get($uxg-crimson, 100);
          border: 1px solid map-get($uxg-crimson, 100);
          background-color: mat-color($uxg-crimson, 100, 0.1);
        }
        .deprecated {
          color: mat-color($foreground, text, 0.6);
          border: 1px solid mat-color($foreground, text, 0.6);
          background-color: mat-color($mat-grey, 400, 0.1);
        }
      }

      .release-detail {
        &::after {
          border-left: 2px dotted mat-color($primary, default);
        }
      }

      .first-release {
        &::after {
          background-color: mat-color($primary, default);
        }
      }
  
      .release-detail::before,
      .last-release::before {
        color: mat-color($background, default);
        border: 8px solid mat-color($primary, default);
        background-color: mat-color($primary, default);
      }
  
      .first-release::before {
        background-color: mat-color($background, card);
        border: 5px solid mat-color($primary, default);
      }
    }
  }
}

@mixin uxg-changelog-typography($config) {
  uxg-changelog {
    .title {
      .creator {
        @include mat-typography-level-to-styles($config, h2);
      }

      span {
        @include mat-typography-level-to-styles($config, h2);
      }
    }

    @include layout-bp(xs) {
      .title {
        .creator {
          @include mat-typography-level-to-styles($config, h3);
        }

        span {
          @include mat-typography-level-to-styles($config, h3);
        }
      }
    }
  }
}