// Helper styles for inline icons used with the "icon" shortcode
.article--content {
  .inline {
    margin: 0 .15rem;
    &.middle:before { vertical-align: middle; }
    &.top:before { vertical-align: text-top; }
    &.xsmall:before { font-size: .8rem; }
    &.small:before { font-size: .9rem; }
    &.large:before { font-size: 1.1rem; }

    &.add-btn-round {
      font-family: "icomoon";
      color:#fff;
      background:#7a65f2;
      border-radius:50%;
      margin:0 .25rem;
      display: inline-block;
      vertical-align: text-top;
      font-size: .7rem;
      width: 20px;
      height: 20px;
      padding-left: .28rem;
      line-height: 1.25rem;
    }

    &.ui-toggle {
      display: inline-block;
      position: relative;
      width: 34px;
      height: 22px;
      background: #1C1C21;
      border: 2px solid #383846;
      border-radius: .7rem;
      vertical-align: text-bottom;

      .circle {
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        height: 12px;
        width: 12px;
        background: #22ADF6;
        top: 3px;
        right: 3px;
      }
    }
  }

  .nav-icon {
    background: linear-gradient(to right, #50ABEF, #9195f7);
    font-family: $roboto;
    display: inline-block;
    padding: .85rem 1rem;
    border-radius: 0 5px 5px 0;
    font-size: 1.05rem;
    margin-bottom: 1rem;

    .icon {
      font-size: 1.35rem;
      vertical-align: middle;
      margin-right: 1.25rem;
    }

    strong {
      color: $g20-white;
    }
  }
}
