.gh-alert {
  padding: 0.5rem 1rem;
  border-left-width: 0.25em;
  border-left-style: solid;

  &::before {
    display: block;
    height: 1rem;
    padding-top: 0.1rem;
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    background-size: 16px 16px;
    background-position: left;
    background-repeat: no-repeat;
  }

  &.note {
    border-left-color: #1f6feb;

    &::before {
      content: 'Note';
      color: #1f6feb;
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%231f6feb%22%20d%3D%22M0%208a8%208%200%201%201%2016%200A8%208%200%200%201%200%208m8-6.5a6.5%206.5%200%201%200%200%2013%206.5%206.5%200%200%200%200-13M6.5%207.75A.75.75%200%200%201%207.25%207h1a.75.75%200%200%201%20.75.75v2.75h.25a.75.75%200%200%201%200%201.5h-2a.75.75%200%200%201%200-1.5h.25v-2h-.25a.75.75%200%200%201-.75-.75M8%206a1%201%200%201%201%200-2%201%201%200%200%201%200%202%22%2F%3E%3C%2Fsvg%3E');
    }
  }

  &.tip {
    border-left-color: #238636;

    &::before {
      content: 'Tip';
      color: #238636;
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23238636%22%20d%3D%22M8%201.5c-2.363%200-4%201.69-4%203.75%200%20.984.424%201.625.984%202.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621%201.49a.75.75%200%200%201-1.484.211c-.04-.282-.163-.547-.37-.847a9%209%200%200%200-.542-.68l-.268-.32C3.201%207.75%202.5%206.766%202.5%205.25%202.5%202.31%204.863%200%208%200s5.5%202.31%205.5%205.25c0%201.516-.701%202.5-1.328%203.259q-.142.172-.268.319c-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751%200%200%201-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848l.213-.253c.561-.679.985-1.32.985-2.304%200-2.06-1.637-3.75-4-3.75M5.75%2012h4.5a.75.75%200%200%201%200%201.5h-4.5a.75.75%200%200%201%200-1.5M6%2015.25a.75.75%200%200%201%20.75-.75h2.5a.75.75%200%200%201%200%201.5h-2.5a.75.75%200%200%201-.75-.75%22%2F%3E%3C%2Fsvg%3E');
    }
  }

  &.important {
    border-left-color: #8957e5;

    &::before {
      content: 'Important';
      color: #8957e5;
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%238957e5%22%20d%3D%22M0%201.75C0%20.784.784%200%201.75%200h12.5C15.216%200%2016%20.784%2016%201.75v9.5A1.75%201.75%200%200%201%2014.25%2013H8.06l-2.573%202.573A1.458%201.458%200%200%201%203%2014.543V13H1.75A1.75%201.75%200%200%201%200%2011.25Zm1.75-.25a.25.25%200%200%200-.25.25v9.5c0%20.138.112.25.25.25h2a.75.75%200%200%201%20.75.75v2.19l2.72-2.72a.75.75%200%200%201%20.53-.22h6.5a.25.25%200%200%200%20.25-.25v-9.5a.25.25%200%200%200-.25-.25Zm7%202.25v2.5a.75.75%200%200%201-1.5%200v-2.5a.75.75%200%200%201%201.5%200M9%209a1%201%200%201%201-2%200%201%201%200%200%201%202%200%22%2F%3E%3C%2Fsvg%3E');
    }
  }

  &.warning {
    border-left-color: #9e6a03;

    &::before {
      content: 'Warning';
      color: #9e6a03;
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%239e6a03%22%20d%3D%22M6.457%201.047c.659-1.234%202.427-1.234%203.086%200l6.082%2011.378A1.75%201.75%200%200%201%2014.082%2015H1.918a1.75%201.75%200%200%201-1.543-2.575Zm1.763.707a.25.25%200%200%200-.44%200L1.698%2013.132a.25.25%200%200%200%20.22.368h12.164a.25.25%200%200%200%20.22-.368Zm.53%203.996v2.5a.75.75%200%200%201-1.5%200v-2.5a.75.75%200%200%201%201.5%200M9%2011a1%201%200%201%201-2%200%201%201%200%200%201%202%200%22%2F%3E%3C%2Fsvg%3E');
    }
  }

  &.caution {
    border-left-color: #da3633;

    &::before {
      content: 'Caution';
      color: #da3633;
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23da3633%22%20d%3D%22M4.47.22A.75.75%200%200%201%205%200h6c.199%200%20.389.079.53.22l4.25%204.25c.141.14.22.331.22.53v6a.75.75%200%200%201-.22.53l-4.25%204.25A.75.75%200%200%201%2011%2016H5a.75.75%200%200%201-.53-.22L.22%2011.53A.75.75%200%200%201%200%2011V5c0-.199.079-.389.22-.53Zm.84%201.28L1.5%205.31v5.38l3.81%203.81h5.38l3.81-3.81V5.31L10.69%201.5ZM8%204a.75.75%200%200%201%20.75.75v3.5a.75.75%200%200%201-1.5%200v-3.5A.75.75%200%200%201%208%204m0%208a1%201%200%201%201%200-2%201%201%200%200%201%200%202%22%2F%3E%3C%2Fsvg%3E');
    }
  }
}