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

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

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

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

  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
    

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

  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 
        font-family: 'FontAwesome'
        font-size: larger
        left: 15px
        position: absolute
        top: 13px
      
  &.default 
    if ($note-style == 'flat') 
      background-color: $note-default-bg
    

    if ($note-style == 'modern') 
      background-color: $note-modern-default-bg
      border-color: $note-modern-default-border
      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') 
      background-color: $note-modern-primary-bg
      border-color: $note-modern-primary-border
      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') 
      background-color: $note-modern-info-bg
      border-color: $note-modern-info-border
      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') 
      background-color: $note-modern-success-bg
      border-color: $note-modern-success-border
      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') 
      background-color: $note-modern-warning-bg
      border-color: $note-modern-warning-border
      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') 
      background-color: $note-modern-danger-bg
      border-color: $note-modern-danger-border
      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