.component-wrapper{
  background: $color-light;
  padding: pxToRem(40 20);
  .component-hgroup{
    .component-title{
      font-size: pxToRem(40);
      color:#444;
  }
    .component-subtitle{
      margin-top: pxToRem(20);
      font-size: pxToRem(26);
      color:#666;
  }
    .component-notice{
      margin-top: pxToRem(20);
      padding-left: pxToRem(20);
      border-left: pxToRem(4) solid #ccc;
      font-size: pxToRem(26);
      color: #999;
  }
}
  .component-item{
    margin-top: pxToRem(40);
    &.api{
      .component-item-content{
        margin-top:pxToRem(80);
        &.no-header{
          margin-top: 0;
        }
        .component-item-content-header{
          .component-item-content-title{
            color:#2d8cf0;
          }
          .component-item-content-subtitle{
            color:#495060;
          }
        }
      }
    }
    .component-item-hgroup{
      .component-item-title{
        font-size: pxToRem(32);
        color:#555;
    }
      .component-item-subtitle{
        font-size: pxToRem(32);
        color:#666;
    }
  }
    .component-item-content{
      margin-top: pxToRem(20);
      .component-item-content-hgroup{
        border: 1px solid #ccc;
        border-radius: pxToRem(6);
        .component-item-content-title{
          font-size: pxToRem(26);
          font-weight: 500;
          color:#333;
      }
        .component-item-content-subtitle{
          margin-top: pxToRem(20);
          font-size: pxToRem(22);
          color:#495060;
      }
    }
      .component-item-content-header{
        .component-item-content-title{
          font-size: pxToRem(26);
          font-weight: 500;
          color:#333;
        }
        .component-item-content-subtitle{
          margin-top: pxToRem(20);
          font-size: pxToRem(22);
          color:#495060;
        }
      }
      .component-item-content-main{
        margin-top: pxToRem(20);
        border: 1px solid #ccc;
        border-radius: pxToRem(6);
        &.api{
          margin:0;
          padding:0;
          border: none;
          border-radius: 0;
          &:hover{
            box-shadow: none;
        }
      }
        &:hover{
          box-shadow: 2px 2px 4px #aaa;
      }
        .component-item-preview{
          padding: pxToRem(20);
      }
        .component-item-code{
          .code-view{
            margin-top: pxToRem(20);
            background-color: #fff;
            overflow: auto;
          }
          .code-toggle{
            padding: pxToRem(20 0);
            text-align: center;
            border-top: 1px solid #f2f2f2;
            color: $color-primary;
            &:active{
              background: #f2f2f2;
            }
          }
      }
    }
  }
}
}