.bpp-properties-tab-bar {
  border-bottom: 1px solid @bpp-tabs-border-color;
  padding: 0 15px 1px;

  .scroll-tabs-button {
    font-size: 16px;
    padding: 3px 4px 3px 4px;
    color: @bpp-tabs-button-color;

    &:hover {
      font-weight: bold;
    }

    &.scroll-tabs-left {
      float: left;
      margin-left: -15px;
    }

    &.scroll-tabs-right {
      float: right;
      margin-right: -15px;
    }
  }

  &:not(.scroll-tabs-overflow) {
    .scroll-tabs-button {
      display: none;
    }
  }
}

ul.bpp-properties-tabs-links {
  margin: 5px 0 -1px 0;
	padding: 0 0 0 7px;
	white-space: nowrap;
	overflow: hidden;

  > li {
    display: inline-block;
    position: relative;
    z-index: 10;
    margin: 0;

    -moz-transform: skew(-30deg);
    -o-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    padding: 2px 10px;
    color: #909399;
    background-color: #fff;

    &:after{
      position: absolute;
      bottom: 0;
      right: -3px;
      content: '';
      height: 27px;
      background-color: #fff;

      -moz-transform: skew(30deg);
      -o-transform: skew(30deg);
      -ms-transform: skew(30deg);
      background-color: transparent;
      z-index: 1;
    }

    &.bpp-hidden {
      .bpp-hidden;
    }

    > a {
      color: #909399;
      display: inline-block;
      font-size: 12px;
      padding: 0;
      cursor: default;
      -moz-transform: skew(30deg);
      -o-transform: skew(30deg);
      -ms-transform: skew(30deg);
      text-decoration: none;

      &:hover {
        color: #4d4d4d;
      }
    }
  }

  // > li + li {
  //   margin-left: 4px;
  // }

  > li.bpp-active {
    border-bottom: 3px solid #1890ff;
    font-weight: bolder;
    &:after{
      background-color: #1890ff;
      border-bottom-color: #1890ff;
    }
    a {
      border: none;
      background-color: transparent;
      color: #30333a;
    }
  }
}

.bpp-properties-tab,
.bpp-properties-tab.bpp-hidden {
  display: none;
}

.bpp-properties-tab.bpp-active {
  display: block;
}