.note
  $note-icons = hexo-config('note.icons')
  $note-style = hexo-config('note.style')
  position: relative
  margin: 0 0 1rem
  padding: 15px

  if ($note-style == 'simple')
    border: 1px solid $light-grey
    border-left-width: 5px

  if ($note-style == 'modern')
    border: 1px solid transparent
    background-color: $whitesmoke

  if ($note-style == 'flat')
    border: initial
    border-left: 5px solid $light-grey
    background-color: lighten($light-grey, 65%)

  if hexo-config('note.border_radius') is a 'unit'
    border-radius: unit(hexo-config('note.border_radius'), px)

  h2,
  h3,
  h4,
  h5,
  h6
    if $note-icons
      margin-top: 3px
    else
      margin-top: 0

    margin-bottom: 0
    padding-top: 0 !important
    border-bottom: initial

  p,
  ul,
  ol,
  table,
  pre,
  blockquote,
  img
    &:first-child
      margin-top: 0 !important

    &:last-child
      margin-bottom: 0 !important

  if $note-icons
    &:not(.no-icon)
      padding-left: 45px

      &::before
        position: absolute
        top: 13px
        left: 15px
        font-size: larger
        font-family: 'FontAwesome'

  &.default
    if ($note-style == 'flat')
      background-color: $note-default-bg

    if ($note-style == 'modern')
      border-color: $note-modern-default-border
      background-color: $note-modern-default-bg
      color: $note-modern-default-text

      a,
      span.exturl
        &:not(.btn)
          border-bottom: 1px solid $note-modern-default-text
          color: $note-modern-default-text

          &:hover
            border-bottom: 1px solid $note-modern-default-hover
            color: $note-modern-default-hover

    if ($note-style != 'modern')
      border-left-color: $note-default-border

      h2,
      h3,
      h4,
      h5,
      h6
        color: $note-default-text

    if $note-icons
      &:not(.no-icon)
        &::before
          content: $note-default-icon

          if ($note-style != 'modern')
            color: $note-default-text

  &.primary
    if ($note-style == 'flat')
      background-color: $note-primary-bg

    if ($note-style == 'modern')
      border-color: $note-modern-primary-border
      background-color: $note-modern-primary-bg
      color: $note-modern-primary-text

      a,
      span.exturl
        &:not(.btn)
          border-bottom: 1px solid $note-modern-primary-text
          color: $note-modern-primary-text

          &:hover
            border-bottom: 1px solid $note-modern-primary-hover
            color: $note-modern-primary-hover

    if ($note-style != 'modern')
      border-left-color: $note-primary-border

      h2,
      h3,
      h4,
      h5,
      h6
        color: $note-primary-text

    if $note-icons
      &:not(.no-icon)
        &::before
          content: $note-primary-icon

          if ($note-style != 'modern')
            color: $note-primary-text

  &.info
    if ($note-style == 'flat')
      background-color: $note-info-bg

    if ($note-style == 'modern')
      border-color: $note-modern-info-border
      background-color: $note-modern-info-bg
      color: $note-modern-info-text

      a,
      span.exturl
        &:not(.btn)
          border-bottom: 1px solid $note-modern-info-text
          color: $note-modern-info-text

          &:hover
            border-bottom: 1px solid $note-modern-info-hover
            color: $note-modern-info-hover

    if ($note-style != 'modern')
      border-left-color: $note-info-border

      h2,
      h3,
      h4,
      h5,
      h6
        color: $note-info-text

    if $note-icons
      &:not(.no-icon)
        &::before
          content: $note-info-icon

          if ($note-style != 'modern')
            color: $note-info-text

  &.success
    if ($note-style == 'flat')
      background-color: $note-success-bg

    if ($note-style == 'modern')
      border-color: $note-modern-success-border
      background-color: $note-modern-success-bg
      color: $note-modern-success-text

      a,
      span.exturl
        &:not(.btn)
          border-bottom: 1px solid $note-modern-success-text
          color: $note-modern-success-text

          &:hover
            border-bottom: 1px solid $note-modern-success-hover
            color: $note-modern-success-hover

    if ($note-style != 'modern')
      border-left-color: $note-success-border

      h2,
      h3,
      h4,
      h5,
      h6
        color: $note-success-text

    if $note-icons
      &:not(.no-icon)
        &::before
          content: $note-success-icon

          if ($note-style != 'modern')
            color: $note-success-text

  &.warning
    if ($note-style == 'flat')
      background-color: $note-warning-bg

    if ($note-style == 'modern')
      border-color: $note-modern-warning-border
      background-color: $note-modern-warning-bg
      color: $note-modern-warning-text

      a,
      span.exturl
        &:not(.btn)
          border-bottom: 1px solid $note-modern-warning-text
          color: $note-modern-warning-text

          &:hover
            border-bottom: 1px solid $note-modern-warning-hover
            color: $note-modern-warning-hover

    if ($note-style != 'modern')
      border-left-color: $note-warning-border

      h2,
      h3,
      h4,
      h5,
      h6
        color: $note-warning-text

    if $note-icons
      &:not(.no-icon)
        &::before
          content: $note-warning-icon

          if ($note-style != 'modern')
            color: $note-warning-text

  &.danger
    if ($note-style == 'flat')
      background-color: $note-danger-bg

    if ($note-style == 'modern')
      border-color: $note-modern-danger-border
      background-color: $note-modern-danger-bg
      color: $note-modern-danger-text

      a,
      span.exturl
        &:not(.btn)
          border-bottom: 1px solid $note-modern-danger-text
          color: $note-modern-danger-text

          &:hover
            border-bottom: 1px solid $note-modern-danger-hover
            color: $note-modern-danger-hover

    if ($note-style != 'modern')
      border-left-color: $note-danger-border

      h2,
      h3,
      h4,
      h5,
      h6
        color: $note-danger-text

    if $note-icons
      &:not(.no-icon)
        &::before
          content: $note-danger-icon

          if ($note-style != 'modern')
            color: $note-danger-text