// Functions
@function remy($value, $base: 16px) {
  @return ($value / $base) * 1rem;
}

// Mixins
@mixin transition($prop: all, $duration: .25s, $timing: cubic-bezier(.4, 0, 1, 1)) {
  transition: $prop $duration $timing;
}

// Colors
$color-black: #212121;
$color-blue: #03a9f4;
$color-red: #d30320;

// Variables
$boxshadow-0: 0 1px 3px -5px rgba(0, 0, 0, .13),
0 1px 3px -10px rgba(0, 0, 0, .23);
$boxshadow-1: 0 3px 6px -5px rgba(0, 0, 0, .16),
0 3px 6px -10px rgba(0, 0, 0, .23);
$boxshadow-2: 0 10px 20px -5px rgba(0, 0, 0, .19),
0 6px 6px -10px rgba(0, 0, 0, .23);
$boxshadow-3: 0 14px 28px -5px rgba(0, 0, 0, .25),
0 10px 10px -10px rgba(0, 0, 0, .22);
$radius: remy(4px);

// Base
html {
  font-size: 16px;
}

body {
  font-family: 'Roboto', Arial, Verdana, sans-serif;
  background: #e4f2fb;
}

a {
  text-decoration: none;
}

.player__container {
  margin-top: 2rem;
  margin-right: auto;
  margin-left: auto;
  max-width: remy(320px);
  background: #fff;
  border-radius: $radius;
  box-shadow: $boxshadow-2;
}

.body__cover {
  position: relative;
}

.body__cover img {
  max-width: 100%;
  border-radius: $radius;
}

.list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.body__buttons,
.body__info,
.player__footer {
  padding-right: 2rem;
  padding-left: 2rem;
}

.list--cover,
.list--footer {
  justify-content: space-between;
}

.list--header .list__link,
.list--footer .list__link {
  color: #888;
}

.list--cover {
  position: absolute;
  top: .5rem;
  width: 100%;

  li:first-of-type {
    margin-left: .75rem;
  }

  li:last-of-type {
    margin-right: .75rem;
  }

  a {
    font-size: 1.15rem;
    color: #fff;
  }
}

.range {
  position: relative;
  top: -1.5rem;
  right: 0;
  left: 0;
  margin: auto;
  background: rgba(#fff, .95);
  width: 80%;
  height: remy(2px);
  border-radius: $radius;
  cursor: pointer;

  &:before,
  &:after {
    content: "";
    position: absolute;
    cursor: pointer;
  }

  &:before {
    width: 3rem;
    height: 100%;
    background: linear-gradient(to right, rgba($color-red, .5), rgba($color-red, .85));
    border-radius: $radius;
    overflow: hidden;
  }

  &:after {
    top: remy(-6px);
    left: 3rem;
    z-index: 3;
    width: remy(14px);
    height: remy(14px);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .15);
    
    @include transition;
  }
  
  &:focus,
  &:hover {
    &:after {
      background: rgba($color-red, .95);
    }
  }
}

.body__info {
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
  text-align: center;
}

.info__album,
.info__song {
  margin-bottom: .5rem;
}

.info__artist,
.info__album {
  font-size: .75rem;
  font-weight: 300;
  color: #666;
}

.info__song {
  font-size: 1.15rem;
  font-weight: 400;
  color: $color-red;
}

.body__buttons {
  padding-bottom: 2rem;
}

.body__buttons {
  padding-top: 1rem;
}

.list--buttons {
  align-items: center;
  justify-content: center;
}

.list--buttons li:nth-of-type(n+2) {
  margin-left: 1.25rem;
}

.list--buttons a {
  padding-top: .45rem;
  padding-right: .75rem;
  padding-bottom: .45rem;
  padding-left: .75rem;
  font-size: 1rem;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(33,33,33,.1), 0 3px 12px rgba(33,33,33,.15);

  &:focus,
  &:hover {
    color: darken(rgba($color-red, .95), 8%);
    opacity: 1;
    box-shadow: 0 6px 9px rgba(33,33,33,.1), 0 6px 16px rgba(33,33,33,.15);
  }
}

.list--buttons li:nth-of-type(2) a {
  padding-top: .82rem;
  padding-right: 1rem;
  padding-bottom: .82rem;
  padding-left: 1.19rem;
  margin-left: .5rem;
  font-size: 1.25rem;
  color: rgba($color-red, .95);
}

.list--buttons li:first-of-type a,
.list--buttons li:last-of-type a {
  font-size: .95rem;
  color: #212121;
  opacity: .5;

  &:focus,
  &:hover {
    color: $color-red;
    opacity: .75;
  }
}

.list__link {
  @include transition;

  &:focus,
  &:hover {
    color: $color-red;
  }
}

.player__footer {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.list--footer a {
  opacity: .5;

  &:focus,
  &:hover {
    opacity: .9;
  }
}