<div id="aspect-content">
  <div class="aspect-tab ">
    <input id="item-18" type="checkbox" class="aspect-input" name="aspect">
    <label for="item-18" class="aspect-label"></label>
    <div class="aspect-content">
        <div class="aspect-info">
            <div class="chart-pie negative over50">
                <span class="chart-pie-count">-69</span>
                <div>
                    <div class="first-fill"></div>
                    <div class="second-fill" style="transform: rotate(249deg)"></div>
                </div>
            </div>
            <span class="aspect-name">Lorem ipsum</span>
        </div>
        <div class="aspect-stat">
            <div class="all-opinions">
                <span class="all-opinions-count">18</span>
                <span>opinion</span>
            </div>
            <div>
                <span class="positive-count">4</span>
                <span class="neutral-count">1</span>
                <span class="negative-count">13</span>
            </div>
        </div>
    </div>
    <div class="aspect-tab-content">
        <div class="sentiment-wrapper">
            <div>
                <div>
                    <div class="positive-count opinion-header">
                        <span>positive</span>
                        <span>4</span>
                    </div>
                    <div>
                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div class="neutral-count opinion-header">
                        <span>neutral</span>
                        <span>1</span>
                    </div>
                    <div>
                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div class="negative-count opinion-header">
                        <span>negative</span>
                        <span>13</span>
                    </div>
                    <div>
                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div class="aspect-tab ">
    <input id="item-14" type="checkbox" class="aspect-input" name="aspect">
    <label for="item-14" class="aspect-label"></label>
    <div class="aspect-content">
        <div class="aspect-info">
            <div class="chart-pie positive over50">
                <span class="chart-pie-count">58</span>
                <div>
                    <div class="first-fill"></div>
                    <div class="second-fill" style="transform: rotate(209deg)"></div>
                </div>
            </div>
            <span class="aspect-name">Lorem ipsum dolor sit amet</span>
        </div>
        <div class="aspect-stat">
            <div class="all-opinions">
                <span class="all-opinions-count">22</span>
                <span>opinion</span>
            </div>
            <div>
                <span class="positive-count">12</span>
                <span class="neutral-count">5</span>
                <span class="negative-count">5</span>
            </div>
        </div>
    </div>
    <div class="aspect-tab-content">
        <div class="sentiment-wrapper">
            <div>
                <div>
                    <div class="positive-count opinion-header">
                        <span>positive</span>
                        <span>12</span>
                    </div>
                    <div>
                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div class="neutral-count opinion-header">
                        <span>neutral</span>
                        <span>5</span>
                    </div>
                    <div>
                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div class="negative-count opinion-header">
                        <span>negative</span>
                        <span>5</span>
                    </div>
                    <div>
                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div class="aspect-tab ">
    <input id="item-2" type="checkbox" class="aspect-input" name="aspect">
    <label for="item-2" class="aspect-label"></label>
    <div class="aspect-content">
        <div class="aspect-info">
            <div class="chart-pie positive">
                <span class="chart-pie-count">33</span>
                <div>
                    <div class="first-fill"></div>
                    <div class="second-fill" style="transform: rotate(119deg)"></div>
                </div>
            </div>
            <span class="aspect-name">Lorem</span>
        </div>
        <div class="aspect-stat">
            <div class="all-opinions">
                <span class="all-opinions-count">7</span>
                <span>opinion</span>
            </div>
            <div>
                <span class="positive-count">3</span>
                <span class="neutral-count">2</span>
                <span class="negative-count">2</span>
            </div>
        </div>
    </div>
    <div class="aspect-tab-content">
        <div class="sentiment-wrapper">
            <div>
                <div>
                    <div class="positive-count opinion-header">
                        <span>positive</span>
                        <span>3</span>
                    </div>
                    <div>
                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div class="neutral-count opinion-header">
                        <span>neutral</span>
                        <span>2</span>
                    </div>
                    <div>
                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div class="negative-count opinion-header">
                        <span>negative</span>
                        <span>2</span>
                    </div>
                    <div>
                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

$positive-circle   : #82d428;
$negative-circle   : #ff6e00;
$circle-gray       : #e4e4e4;
$header-black      : #242a32;
$background-color  : #6fcae7;
$tab-text          : #5d5d5d;
$white			       : #fff;
$reviews-text-black: #363636;
$white-light-gray  : #f9f9f9;

@mixin user-select() {
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
}

@mixin chart($radius, $width) {
  .chart-pie {
    position: relative;
    display: inline-block;
    height: $radius;
    width: $radius;
    border-radius: 50%;
    background-color: $circle-gray;
    vertical-align: middle;
     
    &:after {
      content: '';
      display: block;
      position: absolute;
      height: $radius - $width;
      width: $radius - $width;
      top: $width / 2;
      left: $width / 2;
      border-radius: 50%;
      background-color: $white;
    }
  }
  .chart-pie-count {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    line-height: 44px;
    color: $header-black;
    text-align: center;
    z-index: 1;
  }
  .chart-pie > div {
    clip: rect(0, $radius, $radius, $radius / 2);
  }
  .chart-pie > div,
  .chart-pie.over50 .first-fill {
    position: absolute;
    height: $radius;
    width: $radius;
    border-radius: 50%;
  }
  .chart-pie.over50 > div {
    clip: rect(auto,auto,auto,auto);
  }
  .chart-pie.over50 .first-fill {
    clip: rect(0, $radius, $radius, $radius / 2);
  }
  .chart-pie:not(.over50) .first-fill {
      display: none;
  }
  .second-fill {
    position: absolute;
    clip: rect(0, $radius / 2, $radius, 0);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-width: $width - 1;
    border-style: solid;
    box-sizing: border-box;
  }
  .chart-pie.positive {
    .first-fill {
      background-color: $positive-circle;
    }
    .second-fill {
      border-color: $positive-circle;
    }
  }
  .chart-pie.negative {
    .first-fill {
      background-color: $negative-circle;
    }
    .second-fill {
      border-color: $negative-circle;
    }
  }
}
body {
  background-color: $background-color;
  overflow-y: scroll;
  overflow-x: hidden;
}
#aspect-content {
  margin: 50px 0 0;
  font-family: "Poppins", sans-serif;
    * {
      box-sizing: border-box;
    }
}
.aspect-tab {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 10px;
  border-radius: 4px;
  background-color: $white;
  box-shadow: 0 0 0 1px rgba(236,236,236,1);
  opacity: 1;
  transition: box-shadow .2s, opacity .4s;
  
  &:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .11);
  }
}
.aspect-input {
  display: none;
}
.aspect-input:checked ~ .aspect-content + .aspect-tab-content {
  max-height: 3000px;
}
.aspect-input:checked ~ .aspect-content:after {
    transform: rotate(0);
}
.aspect-label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  max-height: 80px;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
  z-index: 1;
  cursor: pointer;
  &:hover ~ .aspect-content:after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHoiIG9wYWNpdHk9Ii44NyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM1NTZBRUEiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE1Ljg4IDE1LjI5TDEyIDExLjQxbC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxIDEtMS40MS0xLjQxbDQuNTktNC41OWEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBsNC41OSA0LjU5Yy4zOS4zOS4zOSAxLjAyIDAgMS40MS0uMzkuMzgtMS4wMy4zOS0xLjQyIDB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=');
  }
}
.aspect-content {
  position: relative;
  display: block;
  height: 80px;
  margin: 0;
  padding: 0 87px 0 30px;
  font-size: 0;
  white-space: nowrap;
  cursor: pointer;
  @include user-select();
  &:before,
  &:after  {
    content: '';
    display: inline-block;
    vertical-align: middle;
  }
  &:before {
    height: 100%;
  }
  &:after {
    position: absolute;
    width: 24px;
    height: 100%;
    right: 30px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHoiIG9wYWNpdHk9Ii44NyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiNBOUFDQUYiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE1Ljg4IDE1LjI5TDEyIDExLjQxbC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxIDEtMS40MS0xLjQxbDQuNTktNC41OWEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBsNC41OSA0LjU5Yy4zOS4zOS4zOSAxLjAyIDAgMS40MS0uMzkuMzgtMS4wMy4zOS0xLjQyIDB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=');
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg);
  }
}
.aspect-name {
  display: inline-block;
  width: 75%;
  margin-left: 16px;
  font-weight: 500;
  color: $header-black;
  white-space: normal;
  text-align: left;
  vertical-align: middle;
}
.aspect-stat {
  width: 40%;
  text-align: right;
}
.all-opinions,
.aspect-name {
  font-size: 14px;
  line-height: 22px;
}
.all-opinions {
  color: $tab-text;
  text-align: left;
}
.aspect-content + .aspect-tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s;
}
.aspect-content > div,
.aspect-stat > div {
  display: inline-block;
}
.aspect-content > div {
  vertical-align: middle;
}
.positive-count,
.negative-count,
.neutral-count {
  display: inline-block;
  margin: 0 0 0 20px;
  padding-left: 26px;
  background-repeat: no-repeat;
  font-size: 13px;
  line-height: 20px;
  color: $reviews-text-black;
}
.positive-count {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiM3RUQzMjEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDE4LjU3MWMtNC43MjYgMC04LjU3MS0zLjg0NS04LjU3MS04LjU3MSAwLTQuNzI2IDMuODQ1LTguNTcxIDguNTcxLTguNTcxIDQuNzI2IDAgOC41NzEgMy44NDUgOC41NzEgOC41NzEgMCA0LjcyNi0zLjg0NSA4LjU3MS04LjU3MSA4LjU3MXpNMjAgMTBjMCA1LjUxNC00LjQ4NiAxMC0xMCAxMFMwIDE1LjUxNCAwIDEwIDQuNDg2IDAgMTAgMHMxMCA0LjQ4NiAxMCAxMHpNNSAxMS40MjdhNSA1IDAgMCAwIDEwIDAgLjcxNC43MTQgMCAxIDAtMS40MjkgMCAzLjU3MSAzLjU3MSAwIDAgMS03LjE0MiAwIC43MTQuNzE0IDAgMSAwLTEuNDI5IDB6bTEuMDcxLTVhMS4wNzEgMS4wNzEgMCAxIDAgMCAyLjE0MyAxLjA3MSAxLjA3MSAwIDAgMCAwLTIuMTQzem03Ljg1OCAwYTEuMDcxIDEuMDcxIDAgMSAwIDAgMi4xNDMgMS4wNzEgMS4wNzEgMCAwIDAgMC0yLjE0M3oiLz4KPC9zdmc+Cg==');
}
.negative-count {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNGRjZFMDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDE4LjU3MWMtNC43MjYgMC04LjU3MS0zLjg0NS04LjU3MS04LjU3MSAwLTQuNzI2IDMuODQ1LTguNTcxIDguNTcxLTguNTcxIDQuNzI2IDAgOC41NzEgMy44NDUgOC41NzEgOC41NzEgMCA0LjcyNi0zLjg0NSA4LjU3MS04LjU3MSA4LjU3MXpNMjAgMTBjMCA1LjUxNC00LjQ4NiAxMC0xMCAxMFMwIDE1LjUxNCAwIDEwIDQuNDg2IDAgMTAgMHMxMCA0LjQ4NiAxMCAxMHpNNSAxNC45OThhLjcxNC43MTQgMCAwIDAgMS40MjkgMCAzLjU3MSAzLjU3MSAwIDAgMSA3LjE0MiAwIC43MTQuNzE0IDAgMSAwIDEuNDI5IDAgNSA1IDAgMSAwLTEwIDB6bTEuMDcxLTguNTdhMS4wNzEgMS4wNzEgMCAxIDAgMCAyLjE0MiAxLjA3MSAxLjA3MSAwIDAgMCAwLTIuMTQzem03Ljg1OCAwYTEuMDcxIDEuMDcxIDAgMSAwIDAgMi4xNDIgMS4wNzEgMS4wNzEgMCAwIDAgMC0yLjE0M3oiLz4KPC9zdmc+Cg==');
}
.neutral-count {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNCQUMyRDYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDE4LjU3MWMtNC43MjYgMC04LjU3MS0zLjg0NS04LjU3MS04LjU3MSAwLTQuNzI2IDMuODQ1LTguNTcxIDguNTcxLTguNTcxIDQuNzI2IDAgOC41NzEgMy44NDUgOC41NzEgOC41NzEgMCA0LjcyNi0zLjg0NSA4LjU3MS04LjU3MSA4LjU3MXpNMjAgMTBjMCA1LjUxNC00LjQ4NiAxMC0xMCAxMFMwIDE1LjUxNCAwIDEwIDQuNDg2IDAgMTAgMHMxMCA0LjQ4NiAxMCAxMHpNNS43MTQgMTEuNDI3YS43MTQuNzE0IDAgMSAwIDAgMS40MjloOC41NzJhLjcxNC43MTQgMCAxIDAgMC0xLjQyOUg1LjcxNHptLjM1Ny01YTEuMDcxIDEuMDcxIDAgMSAwIDAgMi4xNDMgMS4wNzEgMS4wNzEgMCAwIDAgMC0yLjE0M3ptNy44NTggMGExLjA3MSAxLjA3MSAwIDEgMCAwIDIuMTQzIDEuMDcxIDEuMDcxIDAgMCAwIDAtMi4xNDN6Ii8+Cjwvc3ZnPgo=');
}
.aspect-info {
  width: 60%;
  white-space: nowrap;
  font-size: 0;
  &:before {
    content: '';
    display: inline-block;
    height: 44px;
    vertical-align: middle;
  }
}
@include chart(44px, 4px);
.aspect-tab-content {
  background-color: $white-light-gray;
  font-size: 0;
  text-align: justify;
}
.sentiment-wrapper {
  padding: 24px 30px 30px;
}
.sentiment-wrapper > div {
  display: inline-block;
  width: 33.3%;
  max-width: 390px;
  padding: 0 5px;
  box-sizing: border-box;
  vertical-align: top;
  cursor: default;
}
.sentiment-wrapper > div > div {
  width: 100%;
  padding: 16px 24px 20px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #ececec;
  text-align: left;
}
.opinion-header {
  position: relative;
  width: 100%;
  margin: 0 0 24px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: $header-black;
  text-transform: capitalize;
}
.opinion-header > span:nth-child(2) {
  position: absolute;
  right: 0;
}
.opinion-header + div > span {
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
  color: $reviews-text-black;
}
@media screen and (max-width: 800px) {
  .aspect-label {
    max-height: 102px;
  }
  .aspect-content {
    height: auto;
    padding: 10px 87px 10px 30px;
    &:before {
      display: none;
    }
    &:after {
      top: 0;
    }
  }
  .aspect-content > div {
    display: block;
    width: 100%;
  }
  .aspect-stat {
    margin-top: 10px;
    text-align: left;
  }
}
@media screen and (max-width: 750px) {
  .sentiment-wrapper > div {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .sentiment-wrapper > div:not(:first-child) {
    margin-top: 10px;
  }
}
@media screen and (max-width: 500px) {
  .aspect-label {
    max-height: 140px;
  }
  .aspect-stat > div {
    display: block;
    width: 100%;
  }
  .all-opinions {
    margin-bottom: 10px;
  }
  .all-opinions + div > span:first-child {
    margin: 0;
  }
}