Iris/src/scss/components/_playback-controls.scss

.playback-controls {
  position: absolute;
  z-index: 99;
  bottom: 0;
  right: 0;
  left: 0;
  transform-style: preserve-3d;
  display: flex;
  flex-flow: row;
  align-items: center;
  align-content: center;

  &__background {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
  }

  .dark-theme & {
    color: colour(white);

    &__background {
      background: colour(grey);
      box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.6);
    }
  }

  .light-theme & {
    color: colour(darkest_grey);

    &__background {
      background: colour(white);
      box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.1);
    }
  }

  .current-track__wrapper {
    width: 210px;
    padding-right: 20px;
    z-index: 1;
    text-decoration: none;

    @keyframes slide_left {
      0% {
        transform: translateX(0);
        opacity: 1;
      }
      100% {
        transform: translateX(-15vw);
        opacity: 0;
      }
    }

    @keyframes slide_right {
      0% {
        transform: translateX(0);
        opacity: 1;
      }
      100% {
        transform: translateX(15vw);
        opacity: 0;
      }
    }

    @keyframes slide_from_left {
      0% {
        transform: translateX(15vw);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slide_from_right {
      0% {
        transform: translateX(-15vw);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @include responsive($bp_medium) {
      .current-track {
        &__incoming,
        &__outgoing {
          animation-duration: .25s;
          animation-timing-function: ease-in-out;
          transform: translateX(0);
        }
      }
      &[direction="previous"] {
        .current-track__incoming {
          animation-name: slide_from_right;
        }
        .current-track__outgoing {
          animation-name: slide_right;
        }
      }

      &[direction="next"] {
        .current-track__incoming {
          animation-name: slide_from_left;
        }
        .current-track__outgoing {
          animation-name: slide_left;
        }
      }
    }

    .current-track {
      width: 100%;
      display: flex;
      position: relative;
      align-items: center;

      &__outgoing {
        z-index: 2;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        .text {
          @include animate(0.15s);
          opacity: 0;
        }
      }

      .thumbnail {
        cursor: pointer;
        width: 44px;
        margin: 8px;
        margin-right: 12px;

        &__image {
          background-color: colour(middle_grey);
        }

        &:before {
          @include animate();
          display: block;
          content: "\f065";
          font-family: "FontAwesome";
          position: absolute;
          top: 50%;
          left: 0;
          bottom: 0;
          right: 0;
          margin-top: -9px;
          text-align: center;
          font-size: 18px;
          color: colour(white);
          z-index: 3;
          opacity: 0;
        }

        &:after {
          @include animate();
          content: "";
          display: block;
          background: rgba(0, 0, 0, 0.75);
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          border-radius: 3px;
          opacity: 0;
          z-index: 2;
        }

        &:hover {
          &:after,
          &:before {
            opacity: 1;
          }
        }
      }

      .text {
        opacity: 1;
        line-height: 1.1rem;
        font-size: 0.9rem;
        min-width: 0;

        .title {
          @include one_line_text;
        }

        .links-sentence {
          opacity: 0.5;
          display: block;
          @include one_line_text;

          &__item {
            color: inherit;
            text-decoration: none;
            border-bottom: 1px dotted transparent;
          }
        }
      }
    }
  }

  .control {
    @include animate();
    @include noselect();
    @include click_feedback();
    cursor: pointer;
    padding: 12px 8px;
    display: inline-block;
    vertical-align: bottom;
    background: none;
    color: colour(white);

    .light-theme & {
      color: colour(darkest_grey);
    }

    .icon {
      font-size: 0.9rem;
      margin-bottom: 0;
    }

    &--active {
      color: colour(turquoise) !important;
    }

    &:hover,
    &:focus {
      opacity: 1;
    }
  }

  section {
    &.playback {
      display: flex;
      align-items: center;
      .control {
        padding: 4px;

        .icon {
          font-size: 1.3rem;
        }

        &.play {
          .light-theme & {
            color: colour(turquoise);
          }

          .icon {
            font-size: 3rem;
          }
        }
      }
    }

    &.progress {
      flex-grow: 1;
      display: flex;
      align-items: center;

      .slider {
        flex-grow: 1;
        &__track {
          &__progress {
            @include animate(0.2s, linear);
          }
        }
      }

      .time {
        font-size: 11px;
        width: 40px;

        &--current {
          text-align: right;
          padding-right: 10px;
        }

        &--total {
          padding-left: 10px;
        }
      }
    }

    &.settings {
      text-align: center;
      padding: 0 30px;
    }

    &.volume {
      font-size: 18px;
      width: 10rem;
      padding-right: 30px;
      display: flex;
      align-items: center;

      .slider__wrapper {
        flex-grow: 1;
      }
    }

    &.triggers {
      display: none;
    }
  }

  @include responsive($bp_medium) {
    &--touch-enabled .control.next {
      display: none;
    }

    .current-track__wrapper {
      order: 2;
      flex-grow: 1;
      text-align: center;
      font-size: 0.9rem;
      line-height: 1.2em;
      margin: 0;
      padding: 0;
      display: flex;

      .text {
        padding: 0;
        flex-grow: 1;

        .title,
        .artist {
          padding-top: 0;
        }
      }

      .thumbnail-wrapper {
        display: none;
      }
    }

    section {
      &.playback {
        order: 1;
        width: 6rem;

        .control {
          &.play {
            padding: 4px;
          }

          &.previous,
          &.stop {
            display: none;
          }
        }
      }

      &.settings,
      &.volume,
      &.progress {
        display: none;
      }

      &.triggers {
        display: block;
        width: 6rem;
        order: 3;
        text-align: center;

        .icon {
          font-size: 1.2rem;
        }

        @include resolution(2) {
          bottom: 4px;

          .icon {
            font-size: 1.4rem;
          }
        }

        .sidebar-toggle.open {
          opacity: 1 !important;

          &:before {
            background: rgba(0, 0, 0, 0.8);
            content: "";
            display: block;
            position: fixed;
            bottom: 0;
            right: 0;
            width: 100vw;
            height: 100vh;
            z-index: 99;
          }
        }
      }
    }

    &--expanded {
      max-height: 100%;

      .playback-controls__background {
        height: 230px;
      }

      section {
        &.settings {
          position: absolute;
          display: flex;
          right: 0;
          bottom: 90px;
          padding-right: 10px;
          text-align: right;
          width: 100px;
        }

        &.volume {
          position: absolute;
          width: auto;
          display: flex;
          right: 100px;
          left: 10px;
          bottom: 88px;

          @include resolution(2) {
            right: 115px;

            .slider__wrapper {
              bottom: 9px;
            }
          }
        }

        &.progress {
          position: absolute;
          display: flex;
          bottom: 60px;
          left: 0;
          right: 0;
        }
      }
    }

    @include resolution(2) {
      .control {
        padding: 14px 8px;
      }
    }
  }
}