.custom-block {
  .custom-block-title {
    font-weight: 600;
    margin-bottom: -0.4rem;
  }
  &.tip, &.warning, &.danger {
    padding: 0.1rem 1.5rem;
    border-left-width: 0.5rem;
    border-left-style: solid;
    margin: 1rem 0;
  }
  &.tip {
    background-color: #f3f5f7;
    border-color: #42b983;
  }
  &.warning {
    background-color: rgba(255, 229, 100, 0.3);
    border-color: darken(#ffe564, 35%);
    color: darken(#ffe564, 70%);
    .custom-block-title {
      color: darken(#ffe564, 50%);
    }
    a {
      color: $textColor;
    }
  }
  &.danger {
    background-color: #ffe6e6;
    border-color: darken(red, 20%);
    color: darken(red, 70%);
    .custom-block-title {
      color: darken(red, 40%);
    }
    a {
      color: $textColor;
    }
  }
}

pre.vue-container {
  border-left-width: 0.5rem;
  border-left-style: solid;
  border-color: #42b983;
  border-radius: 0px;
  & > code {
    font-size: 0.85rem !important;
    & > p {
      margin: -5px 0 -20px 0;
    }
    code {
      background-color: #42b983 !important;
      padding: 3px 5px;
      border-radius: 3px;
      color: #000;
    }
    em {
      color: #808080;
      font-weight: light;
    }
  }
}