.sidenote {
  position: relative;
  border-left-width: 4px;
  border-left-style: solid;
  margin: 3em 0 4em;
}

.sidenote:before {
  content: "";
  width: 40px;
  height: 40px;
  background-image: url(//www.samunderwood.co.uk/wp-content/uploads/bulb-white.svg);
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 16px;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  padding: 6px 16px;
  background-color: var(--primary-color);
  align-self: flex-start;
  position: absolute;
  top: -20px;
  left: -22px;
}

/* Sitenote Custom Styling */
.sidenote :is(h2, h3, h4, h5) {
  font-size: 1.5em;
  margin-top: 1.5555556em;
  margin-bottom: .6666667em;
  line-height: 1.2222222;
}

.sidenote :is(img, .wp-block-code) {
  box-shadow: none;
}

.sidenote :is(.wp-block-image, .wp-block-code) {
  margin-left: auto;
  margin-right: auto;
}

.sidenote :is(p, ul, pre, figure):last-child {
  margin-bottom: 0;
}

.sidenote :is(p, h2, h3, h4, h5):first-child {
  margin-top: 0;
}

/* Alert */
.sidenote.warning {
  background-color: hsla(53, 95%, 90%, 1)!important;
  border-left-color: hsla(40, 95%, 65%, 1)!important;
}

.sidenote.warning:before {
  border-color: hsla(40, 95%, 65%, 1);
  background-color: hsla(40, 95%, 65%, 1);
  background-image: url(//www.samunderwood.co.uk/wp-content/uploads/exclamation-white.svg);
}

.sidenote.success {
  background-color: hsla(155, 75%, 95%, 1)!important;
  border-left-color: hsla(155, 100%, 35%, 1)!important;
}

.sidenote.success:before {
  border-color: hsla(155, 75%, 95%, 1);
  background-color: hsla(155, 100%, 35%, 1);
  background-image: url(//www.samunderwood.co.uk/wp-content/uploads/check-badge-white.svg);
}

.sidenote:is(.fire, .links, .tools) {
  background-color: #f3f5f9!important;
  border-left-color: #243e63!important;
}

.sidenote:is(.fire, .links, .tools):before {
  border-color: #243e63;
  background-color: #243e63;
}

.sidenote.fire:before {
  background-image: url(//www.samunderwood.co.uk/wp-content/uploads/fire-icon.svg);
}

.sidenote.link:before {
  background-image: url(//www.samunderwood.co.uk/wp-content/uploads/link-icon-white.svg);
}

.sidenote.tools:before {
  background-image: url(//www.samunderwood.co.uk/wp-content/uploads/tool-icon-white.svg);
}

/* List Styles */

.sidenote:is(.fire, .links, .tools) ul li:before {
  background-color: var(--secondary-color)!important;
}

.sidenote.warning ul li:before {
  background-color: hsla(40, 95%, 65%, 1)!important;
}

.sidenote.warning ul ul li:before {
  border-color: hsla(40, 95%, 65%, 1)!important;
  background-color: transparent!important;
}