@import url(https://fonts.googleapis.com/css?family=Questrial);

$body-bg:    #313d53;
$left-blur:  #9d5d78;
$right-blur: #658577;
$footer:     #29354c;
$panel-1:    #726983;
$panel-2:    #d17865;
$panel-3:    #dbdac8;
$panel-size: 650px;
$dot-color:  #313d53;
$widget:     750px;
$questrial:  'Questrial', sans-serif;
$foot-red:   #d27486;
$foot-green: #6b8d7c;
$foot-blue:  #44587f;

body {
  background: $body-bg;
  -webkit-font-smoothing: antialised;
  text-rendering: optimizelegibility;
  overflow-x: hidden;
}

.widget {
  position: relative;
  margin: 0 auto;
  width: $widget;
  
  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    height: 800px; width: 600px;
    border-radius: 50%;
    
    filter: url("#blur");
    filter: blur(100px);
      filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='100'); 
  }
  
  &:before {
    background: $left-blur;
    transform:
      translate3d(-40%, -50%, 0);
  }
  &:after {
    background: $right-blur;
    transform: translate3d(80%, -50%, 0);
  }
}
.widget__panels,
.widget__player,
.widget__footer {
  position: relative;
  z-index: 2;
}
.panel {
  padding: 2em;
  margin: 0 auto;
  width: $panel-size;
  
  border-radius: 8px;
  box-shadow: 0 5px 30px rgba(0,0,0,.3);
  
  &.panel--a {
    width: $panel-size * .8;
    background: $panel-1;
    transform: translateY(50px);
  }
  &.panel--b {
    background: $panel-2;
    width: $panel-size * .9;
    transform: translateY(0px);
  }
  &.panel--c {
    background: $panel-3;
    transform: translateY(-40px);
  }
}
  .circle {
    height: 375px;
    width: 375px;
    margin: 2em auto 4em;
    
    background:
      linear-gradient(
        #d5835b 15%,
        #d47966 15%,
        #d47966 30%,
        #b86b61 30%,
        #b86b61 42.5%,
        #d27486 42.5%,
        #d27486 52.5%,
        #aa617c 52.5%,
        #aa617c 62.5%,
        #a36d8f 62.5%,
        #a36d8f 72.5%,
        #766d88 72.5%,
        #766d88 82.5%,
        #313d53 82.5%
      );
    
    border-radius: 50%;
  }

  .dots {
    background: $dot-color;
    height: 3px;
    width: 3px;
    margin: 0 auto 2em;
    
    border-radius: 50%;
    box-shadow:
      6px  0   0 $dot-color,
      12px 0   0 $dot-color,
      18px 0   0 $dot-color,
      30px 0   0 $dot-color,
      0    6px 0 $dot-color,
      6px  6px 0 $dot-color,
      18px 6px 0 $dot-color,
      24px 6px 0 $dot-color,
      30px 6px 0 $dot-color,
      36px 6px 0 $dot-color;
    transform: translateX(-18px);
  }

.widget__player {
  margin: 2em auto;
}
  .player__controls {
    display: flex;
    justify-content: space-between;
  }
    .player__button {
      position: relative;
      height: 75px;
      width: 75px;

      background: rgba(0,0,0,.1);
      border: 0;
      border-radius: 50%;
      cursor: pointer;

      &:before,
      &:after {
        content: '';
        position: absolute;
        top: 17%;
        left: 50%;
        width: 2px;
        height: 66%;
      }
    }
      .dislike {      
        &:before,
        &:after {
          background: rgba(#ad7da2, .75);
          mix-blend-mode: screen;
        }
        &:before {
          transform: rotate(45deg);
        }
        &:after {
          transform: rotate(135deg);
        }
      }
      .like {
        &:before,
        &:after {
          background: rgba(#7ba0a2, .75);
          mix-blend-mode: screen;
        }
        &:after {
          transform: rotate(90deg);
        }
      }
    .player__info {
      font-family: $questrial;
      text-align: center;
    }

      .player__title {
        margin: .65em 0 .5em;
        color: #fff;
        font-size: 2.25em;
        letter-spacing: -1px;
      }
      .player__album {
        color: #cdfcff;
        font-size: 1.75em;
        font-family: 'Avenir Next', Roboto, sans-serif;
        font-weight: 300;
      }
    .player__progress {
      margin-top: 2em;
      
      progress {
        width: 100%;
      }
      progress[value] {
        height: 2px;
        appearance: none;
        border: none;
        background-color: #648099;
        color: #648099;
        
        &::-webkit-progress-bar {
          background: #648099;
        }
        &::-webkit-progress-value {
          height: 4px;
          position: relative;
          top: -1px;
          background: #fff;
          box-shadow: 0 0 30px 4px rgba(255,255,255,.3);
          border-radius: 5px;
        }
      }
    }
      .player__likes {
        margin-top: .5em;
        margin-bottom: .5em;
        color: #fff;
        font-family: 'Roboto', sans-serif;
        font-size: 6em;
        font-weight: 500;
        letter-spacing: 5px;
        text-align: center;
      }
.widget__footer {
  height: 120px;
  background: $footer;
}
  .foot-dots {
    position: relative;
    top: 50%;
    display: flex;
    justify-content: space-around;
    width: $widget;
    margin: 0 auto;
    transform: translateY(-35%);
  }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      
      &.red {
        background: $foot-red;
        box-shadow: 0 0 20px 20px rgba($foot-red, .05);
      }
      &.green {
        background: $foot-green;
        box-shadow: 0 0 20px 20px rgba($foot-green, .05);
      }
      &.blue {
        background: $foot-blue;
        box-shadow: 0 0 20px 20px rgba($foot-blue, .05);
      }
    }
    .triangle {
      position: relative;
      top: -5px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 17.32px solid #fff;
      &:before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        background: rgba(#fff, .15);
        height: 20px;
        width: 30px;
        border-radius: 50%;
        transform: translateX(-50%);
        filter: url("#smallblur");
        filter: blur(15px);
      }
    }