.kuma-skins-panel{
   @include box-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    background:#fff;
    right: -253px;
    position: fixed;
    top: 30%;
    @include transition(all 0.35s);
    width: 250px;
    z-index: 999;
    padding: 20px;
    &.active{
      right: 0;
    }
    .control-panel{
      @include box-shadow(0 0 5px rgba(0, 0, 0, 0.5));
      position: absolute;
      top: 40px;
      left: -40px;
      @include size(40px, 40px);
      background: $theme-color;
      color: $white;
      font-size: 18px;
      line-height: 40px;
      text-align: center;
      &:hover{
        cursor: pointer;
      }
    }
    .panel-skins-content{
      padding-bottom: 20px;
      overflow: hidden;
      &:last-child{
        padding-bottom: 0;
      }
      .title{
        font-size: 14px;
        font-weight: 600;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        text-transform: uppercase;
        color: $black;
        margin-bottom: 10px;
      }
      .item-color {
        @include size(52px, 52px);
        @include border-radius(4px);
        border: 1px solid #ccc;
        display: inline-block;
        margin: 5px 6px 0 6px;
        border: 3px solid $nocolor;
        &:hover{
          cursor: pointer;
        }
        &.default{
            background: #efb54b;
        }
        &.green{
            background: #4C9D65;
        }
        &.lilac{
            background: #8F6684;
        }
        &.orange{
            background: #EB866A;
        }
        &.red{
            background: #cc562b;
        }
        &.yellow{
            background: #ecc311;
        }
        &.active{
          border-color: $black;
        }
      }

      .layout{
        width: 80px;
        margin-right: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        @include border-radius(4px);
        padding: 10px 0;
        text-align: center;
        text-transform: uppercase;
        display: inline-block;
        &:hover{
          cursor: pointer;
        }
        &.active{
          background-color: $theme-color;
          color: $white;
        }
        &:last-child{
          margin-right: 0;
        }
      }
    }
}

