.remark-directive-widgets {
  .note {
    border: 1px solid #eee;
    border-radius: 5px;
    border-left-width: 5px;
    padding: 0.5em 1em;
    margin: 1em 0;
    &.info {
      border-color: #428bca;
    }
    &.success {
      border-color: #3bcb5f;
    }
    &.warn {
      border-color: #ced335;
    }
    &.error {
      border-color: red;
    }
  }

  .blockquote {
    margin: 1em 0;
    padding: 1em;
    border-left: 3px solid transparent;
    color: #6a737d;
    .dark & { color: unset; }
    &.info {
      border-left-color: #49b1f5;
      background-color: rgba(73, 177, 245, 0.1);
    }
    &.success {
      border-left-color: #3bcb5f;
      background-color: rgba(59, 203, 95, 0.1);
    }
    &.warn {
      border-left-color: #ced335;
      background-color: rgba(206, 211, 53, 0.1);
    }
    &.error {
      border-left-color: red;
      background-color: rgba(255, 0, 0, 0.1);
    }
  }

  .btn {
    border: 1px solid #777;
    border-radius: 2px;
    padding: 0 0.8em;
    &:hover {
      color: #fff;
      background: #777;
    }
    transition: 0.3s;
  }
  
  .spoiler {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 1em 0;
    overflow: hidden;
    .dark & { border-color: #333; }
  }

  .spoiler summary:first-child {
    user-select: none;
    padding: 6px 15px;
    background: #efefef;
    color: #1f2d3d;
    cursor: pointer;
    .dark & { background: #333; color: #ccc; }
  }

  .spoiler[open] summary:first-child {
    border-bottom: 1px solid #ccc;
    .dark & { border-color: #333; }
  }

  .tabs {
    margin: 1em 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    .tab {
      padding: 1em;
      display: none;
      &.active { display: block; }
    }
    .tabs-nav {
      display: flex;
      .tab-ctrl {
        outline: none;
        width: 100%;
        padding: 0.5em 1em;
        cursor: pointer;
        background: #efefef;
        transition: background-color .3s;
        -webkit-transition: background-color .3s;
        .dark & { background: #333; }
        &.active {
          border-top: solid 2px #428bca;
          background: transparent;
        }
      }
    }
    .dark & { border-color: #333; }
  }

}
