.post-body .note {
  $note-icons = hexo-config('note.icons');
  $note-style = hexo-config('note.style');

  border-radius: $note-border-radius;
  margin-bottom: 20px;
  padding: 1em;
  position: relative;

  if ($note-style == 'simple') {
    border: 1px solid $gainsboro;
    border-left-width: 5px;
  }

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

  if ($note-style == 'flat') {
    background: lighten($gainsboro, 65%);
    border: initial;
    border-left: 3px solid $gainsboro;
  }

  h2, h3, h4, h5, h6 {
    if ($note-icons) {
      margin-top: 3px;
    } else {
      margin-top: 0;
    }

    border-bottom: initial;
    margin-bottom: 0;
    padding-top: 0;
  }

  p, ul, ol, table, pre, blockquote, img {
    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  if ($note-icons) {
    &:not(.no-icon) {
      padding-left: 2.5em;

      &::before {
        font-size: 1.5em;
        left: .4em;
        position: absolute;
        top: calc(50% - 1em);
        font-family-icons();
      }
    }
  }

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

    if ($note-style == 'modern') {
      background: $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: $note-primary-bg;
    }

    if ($note-style == 'modern') {
      background: $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: $note-info-bg;
    }

    if ($note-style == 'modern') {
      background: $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: $note-success-bg;
    }

    if ($note-style == 'modern') {
      background: $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: $note-warning-bg;
    }

    if ($note-style == 'modern') {
      background: $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: $note-danger-bg;
    }

    if ($note-style == 'modern') {
      background: $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;
        }
      }
    }
  }
}
