.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;
    border: 1px solid #cccccc;
    border-right: none;
    transform: skew(-30deg);
    -webkit-transform: skew(-30deg);
    -moz-transform: skew(-30deg);
    -o-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    border-bottom: none;
    padding: 2px 10px;
    color: #666666;
    background-color: #fff;

    &:after{
      position: absolute;
      bottom: 0;
      right: -8px;
      content: '';
      height: 25px;
      width: 15px;
      background-color: #fff;
      border-right: 1px solid #cccccc;
      transform: skew(30deg);
      -webkit-transform: skew(30deg);
      -moz-transform: skew(30deg);
      -o-transform: skew(30deg);
      -ms-transform: skew(30deg);
      background-color: transparent;
      z-index: 1;
    }

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

    > a {
      background-color: @bpp-tabs-tab-link-background-color;
      color: @bpp-tabs-tab-link-color;
      display: inline-block;
      font-size: 12px;
      padding: 0;
      cursor: default;
      transform: skew(30deg);
      -webkit-transform: skew(30deg);
      -moz-transform: skew(30deg);
      -o-transform: skew(30deg);
      -ms-transform: skew(30deg);
      text-decoration: none;

      &:hover {
        color: darken(@bpp-tabs-tab-link-color, 10%);
      }
    }
  }

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

  > li.bpp-active {
    background-color: #1890ff;
    &:after{
      background-color: #1890ff;
      border-bottom-color: #1890ff;
    }
    a {
      border: none;
      background-color: transparent;
      color: #fff;
    }
  }
}

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

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