%attributes{
  background-color: $attributes-background;//$color-highlight;//mix($color-foreground,mix($color-foreground,$color-background));
  padding: $box-padding;
  margin: -$box-padding (-$retrace-constant*$box-padding);
  margin-top: 0;
  margin-bottom: 0%;
  //overflow: hidden;
  clear: both;
  .highlight{
    text-align: center;
    .big, .bigger{
      font-weight: bold;
    }
    label{
      @include small;
      margin-bottom: $gap;
    }
  }
}

.attribute {
  min-height: 22px;
  margin: 0 -0.5*$gap;
  padding: 0 0.5*$gap;
  clear: both;
  & > div.value{
  }
  & > div.label{
    @include respond-to(min-mini-screen){
      float: left;
      width: 30%;
    }
    clear: left;
    @include small;
    font-weight: normal;
    border-color: transparent !important;
    background: none;
    color: $color-text !important;
    td{
      padding-left: $gap;
      padding-right: $gap;
    }
  }
}

table.attributes{
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: $gap;
  th,td{
    border: 1px solid transparent;
    vertical-align: top;
  }
  td{
    width: 35%;
    padding: 1px 0;
    padding-left: 0.5*$gap;
    padding-right: 0.5*$gap;
  }
  th{
    width: 15%;
    @include smaller;
    font-weight: normal;
    border-color: transparent !important;
    background: none;
    color: $color-text !important;
    td{
      padding-left: $gap;
      padding-right: $gap;
    }
  }
  @include respond-to(max-small-screen) {
    &, tbody, thead, tfoot, tr,th,td{
      display: block;
      overflow: hidden;
    }
    th{
      clear: left;
      width: 30% !important;
      float: left;
    }
    td{
      width: 60% !important;
      float: right;
    }
  }

}
.more-attributes-toggler{
  @extend %button-mini;
  text-align: center;
  margin-bottom: 0;
  &:before{
    margin-right: 0.5*$gap;
  }
  &>span{
    &:last-child{
      display: none;
    }
  }
  &.open{
    &>span{
      &:last-child{
        display: inline;
      }
      &:first-child{
        display: none;
      }
    }
  }
}
