/**
 * default layout style of MUSE Player
 * @Copyright(c) 2017 MoeFront Studio, kirainmoe
 */
@import './mixins.styl';

fullscreen() {
  width: 100%;
  height: 100%;
  position: fixed;

  .muse-lyric__text {
    font-size: 24px;
    margin-top: 30px;
  }
  .muse-lyric__translation {
    font-size: 18px;
    margin-top: 15px;
  }

  .muse-drawer.muse-drawer__state-close  {
    padding: 30% 15px 10px 15px;
  }

  .muse-lyric__state-active .muse-lyric__text {
    font-size: 32px!important;
  }
}

.position-relative {
  width: 100%;
  height: 100%;

  position: relative;
}

.muse-player.muse-layout-default {
  width: 320px;
  height: (320 / 9) * 14px;
  max-width: 100%;

  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 3px 6px #666;

  position: relative;
}

.muse-cover {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0px;
  left: 0px;

  // filter(blur(4px));
  transform(scale(1.01));
  transition(.35s all ease-in-out);
}

/*
                                                                              888                    888 888
                                                                              888                    888 888
                                                                              888                    888 888
    88888b.d88b.  888  888 .d8888b   .d88b.          .d8888b .d88b.  88888b.  888888 888d888 .d88b.  888 888  .d88b.  888d888
    888 "888 "88b 888  888 88K      d8P  Y8b        d88P"   d88""88b 888 "88b 888    888P"  d88""88b 888 888 d8P  Y8b 888P"
    888  888  888 888  888 "Y8888b. 88888888 888888 888     888  888 888  888 888    888    888  888 888 888 88888888 888
d8b 888  888  888 Y88b 888      X88 Y8b.            Y88b.   Y88..88P 888  888 Y88b.  888    Y88..88P 888 888 Y8b.     888
Y8P 888  888  888  "Y88888  88888P'  "Y8888          "Y8888P "Y88P"  888  888  "Y888 888     "Y88P"  888 888  "Y8888  888
 */
.muse-controller {
  width: 100%;
  height: 70px;

  background: rgba(0, 0, 0, .6);
  padding: 10px 0px;

  position: absolute;
  bottom: 0px;
  z-index: 10;

  .muse-controller__container {
    width: 100%;
    height: 100%;
    position: relative;
  }

  /*
                                  d8b          8888888b.           888             d8b 888
                                  Y8P          888  "Y88b          888             Y8P 888
                                               888    888          888                 888
  88888b.d88b.  888  888 .d8888b  888  .d8888b 888    888  .d88b.  888888  8888b.  888 888
  888 "888 "88b 888  888 88K      888 d88P"    888    888 d8P  Y8b 888        "88b 888 888
  888  888  888 888  888 "Y8888b. 888 888      888    888 88888888 888    .d888888 888 888
  888  888  888 Y88b 888      X88 888 Y88b.    888  .d88P Y8b.     Y88b.  888  888 888 888
  888  888  888  "Y88888  88888P' 888  "Y8888P 8888888P"   "Y8888   "Y888 "Y888888 888 888
   */
  .muse-musicDetail {
    width: 70%;
    height: 100%;
    // line-height: 30px;

    padding: 0px 10px;
    position: relative;

    .muse-musicDetail__title {
      width: 100%;
      margin: 0px;

      font-size: 18px;
      font-weight: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color: #fff;
    }

    .muse-musicDetail__artist {
      color: #999;
      font-weight: normal;

      display: block;
      margin-top: 8px;
    }
  } // .muse-musicDetail

  /*
           888                    .d8888b.                    888                    888
           888                   d88P  Y88b                   888                    888
           888                   888    888                   888                    888
  88888b.  888  8888b.  888  888 888         .d88b.  88888b.  888888 888d888 .d88b.  888
  888 "88b 888     "88b 888  888 888        d88""88b 888 "88b 888    888P"  d88""88b 888
  888  888 888 .d888888 888  888 888    888 888  888 888  888 888    888    888  888 888
  888 d88P 888 888  888 Y88b 888 Y88b  d88P Y88..88P 888  888 Y88b.  888    Y88..88P 888
  88888P"  888 "Y888888  "Y88888  "Y8888P"   "Y88P"  888  888  "Y888 888     "Y88P"  888
  888                        888
  888                   Y8b d88P
  888                    "Y88P"
   */

  .muse-playControl {
    width: 30%;
    height: 100%;

    position: absolute;
    bottom: 0px;
    right: 0px;

    font-size: 1rem !important;
    padding: 0px 10px;

    .muse-btn__play {
      width: 50px;
      height: 50px;
      line-height: 50px;

      float: right;
      background: rgba(255, 255, 255, .5);

      border: 0px;
      border-radius: 50%;
      cursor: pointer;
      outline: none;
      padding: 0px

      transition(.5s all ease-in-out);

      &:hover {
        background: rgba(0, 0, 0, .5);
        svg {
          fill: #fff;
        }
      }

      svg {
        fill: #000;
        display: block;
        margin: 0 auto;
        transition(.5s all ease-in-out);
      }
    } // .muse-btn__play
  } // .muse-playControl
} // .muse-controller

/*
    88888b.d88b.  888  888 .d8888b   .d88b.         88888b.  888d888 .d88b.   .d88b.  888d888 .d88b.  .d8888b  .d8888b
    888 "888 "88b 888  888 88K      d8P  Y8b        888 "88b 888P"  d88""88b d88P"88b 888P"  d8P  Y8b 88K      88K
    888  888  888 888  888 "Y8888b. 88888888 888888 888  888 888    888  888 888  888 888    88888888 "Y8888b. "Y8888b.
d8b 888  888  888 Y88b 888      X88 Y8b.            888 d88P 888    Y88..88P Y88b 888 888    Y8b.          X88      X88
Y8P 888  888  888  "Y88888  88888P'  "Y8888         88888P"  888     "Y88P"   "Y88888 888     "Y8888   88888P'  88888P'
                                                    888                           888
                                                    888                      Y8b d88P
                                                    888                       "Y88P" */
.muse-progress {
  width: 100%;
  height: 3px;

  position: absolute;
  bottom: 70px;
  z-index: 11;

  background: rgb(55, 141, 59);
  cursor: pointer;

  .muse-progress__container {
    width: 100%;
    height: 100%;
  }

  .muse-progress__played {
    height: 100%;
    background: rgb(138, 194, 73);
    position: relative;
    transition(.1s all);
  }

  .muse-progress__handle {
    width: 12px;
    height: 12px;
    display: block;

    position: absolute;
    top: -4px;
    right: -10px;

    background: #fff;
    border-radius: 50%;
    border: 2px solid rgb(138, 194, 73);

    cursor: pointer;
    transition(.2s all ease-out);

    &:hover {
      transform(scale(1.3));
    }
  }
} // .muse-progress

/*
                                                                      888                   888
                                                                      888                   888
                                                                      888                   888
    88888b.d88b.  888  888 .d8888b   .d88b.         .d8888b   .d88b.  888  .d88b.   .d8888b 888888 .d88b.  888d888
    888 "888 "88b 888  888 88K      d8P  Y8b        88K      d8P  Y8b 888 d8P  Y8b d88P"    888   d88""88b 888P"
    888  888  888 888  888 "Y8888b. 88888888 888888 "Y8888b. 88888888 888 88888888 888      888   888  888 888
d8b 888  888  888 Y88b 888      X88 Y8b.                 X88 Y8b.     888 Y8b.     Y88b.    Y88b. Y88..88P 888
Y8P 888  888  888  "Y88888  88888P'  "Y8888          88888P'  "Y8888  888  "Y8888   "Y8888P  "Y888 "Y88P"  888 */
.muse-selector {
  width: 100%;
  height: 50px;

  position: absolute;
  top: 50%;
  z-index: 12;
  pointer-events: none;

  transform(translateY(-50%));

  .muse-selector_prev, .muse-selector_next {
    width: 30px;
    height: 30px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    pointer-events: auto;

    svg {
      width: 30px;
      height: 30px;
      margin-top: 5px;
      fill: #fff;
    }
  }

  .muse-selector_next {
    float: right;
  }
} //.muse-selector

/*
                                                         888
                                                         888
                                                         888
    88888b.d88b.  888  888 .d8888b   .d88b.          .d88888 888d888 8888b.  888  888  888  .d88b.  888d888
    888 "888 "88b 888  888 88K      d8P  Y8b        d88" 888 888P"      "88b 888  888  888 d8P  Y8b 888P"
    888  888  888 888  888 "Y8888b. 88888888 888888 888  888 888    .d888888 888  888  888 88888888 888
d8b 888  888  888 Y88b 888      X88 Y8b.            Y88b 888 888    888  888 Y88b 888 d88P Y8b.     888
Y8P 888  888  888  "Y88888  88888P'  "Y8888          "Y88888 888    "Y888888  "Y8888888P"   "Y8888  888
*/
.muse-drawer {
  width: 100%;
  height: calc(100% - 70px);

  background: rgba(0, 0, 0, .6);
  overflow: hidden;
  padding: 20px 20px;

  position: absolute;
  bottom: 70px;
  z-index: 10;
  opacity: 1;

  transition(.5s all ease-in-out);

  .muse-drawer__container {
    z-index: 15;
    transition(.3s all ease-in-out);
  }

  .muse-drawer__state-playlist-active {
    transform(translateX(calc(-100% - 20px)));
  }

  /*
  888                  d8b
  888                  Y8P
  888
  888 888  888 888d888 888  .d8888b
  888 888  888 888P"   888 d88P"
  888 888  888 888     888 888
  888 Y88b 888 888     888 Y88b.
  888  "Y88888 888     888  "Y8888P
           888
      Y8b d88P
       "Y88P"
   */
  .muse-drawer__lyric {
    width: 100%;
    height: 95%;

    display: inline-block;

    float: left;
    overflow: hidden;
    text-align: center;

    .muse-drawer__lyric-container {
      transition(.5s all linear);
    }

    li {
      margin: 15px 0px;
      list-style: none;
      line-height: 20px;
    }
    .muse-lyric__text, .muse-lyric__translation {
      display: block;

      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
    }
    .muse-lyric__text {
      font-size: 15px;
      color: darken(#fff, 25%);
      transition(.7s color linear);
    }
    .muse-lyric__translation {
      color: darken(#fff, 25%);
      font-size: 12px;
      transition(.7s color linear);
    }
    .muse-lyric__state-active {
      .muse-lyric__text {
        font-size: 16px;
        color: #fff;
      }
      .muse-lyric__translation {
        font-size: 14px;
        color: #fff;
      }
    }
  }

  /*
           888                   888      d8b          888
           888                   888      Y8P          888
           888                   888                   888
  88888b.  888  8888b.  888  888 888      888 .d8888b  888888
  888 "88b 888     "88b 888  888 888      888 88K      888
  888  888 888 .d888888 888  888 888      888 "Y8888b. 888
  888 d88P 888 888  888 Y88b 888 888      888      X88 Y88b.
  88888P"  888 "Y888888  "Y88888 88888888 888  88888P'  "Y888
  888                        888
  888                   Y8b d88P
  888                    "Y88P"
  */
  .muse-drawer__playList {
    width: 98%;
    height: 95%;
    overflow-y: auto;

    display: inline-block;

    position: absolute;
    z-index: 13;
    left: calc(100% + 24px);

    &::-webkit-scrollbar {
      width: 5px;
      margin-left: 5px;
      background: rgba(0, 0, 0, .3);
    }

    &::-webkit-scrollbar-thumb {
      width: 5px;
      background: rgba(255, 255, 255, .8);
    }

    .muse-playList__item {
      width: 100%;
      height: 40px;
      line-height: 40px;

      font-size: 14px;

      overflow: hidden;
      color: #fff;
      cursor: pointer;
      transition(.3s all);

      padding: 0px 10px;

      &.muse-playList__item-state-playing {
        border-left: 3px solid rgb(138, 197, 73);
        background: rgba(0, 0, 0, .3);
      }

      &:hover {
        background: rgba(0, 0, 0, .3);
      }

      .muse-playList__item-key {
        margin-right: 10px;
      }

      .muse-playList__item-artist::before {
        content: " - ";
      }
    }
  }

  .muse-drawer__panel-toggler {
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 20px;
    left: 0px;

    text-align: center;

    .muse-btn__lyric, .muse-btn__playlist {
      margin: 0px 5px;

      border-radius: 50%;

      display: inline-block;
      cursor: pointer;

      transition(.3s all ease-in-out);

      svg {
        fill: #fff;
      }

      &:hover {
        svg { fill: #000; }
      }
    }
  }

  /* drawer states */
  &.muse-drawer__state-close {
    padding: 90% 15px 10px 15px;
    background: transparent;

    .muse-drawer__lyric li {
      text-shadow: 1px 1px 1px lighten(#000, 10%);
    }

    .muse-drawer__lyric, .muse-drawer__playList {
      height: 100%;
    }

    .muse-drawer__panel-toggler {
      display: none;
    }
  }
} // .muse-drawer

/*
      88888b.d88b. 888  888.d8888b  .d88b.       88888b.d88b.  .d88b. 88888b. 888  888
      888 "888 "88b888  88888K     d8P  Y8b      888 "888 "88bd8P  Y8b888 "88b888  888
      888  888  888888  888"Y8888b.88888888888888888  888  88888888888888  888888  888
   d8b888  888  888Y88b 888     X88Y8b.          888  888  888Y8b.    888  888Y88b 888
   Y8P888  888  888 "Y88888 88888P' "Y8888       888  888  888 "Y8888 888  888 "Y88888
 */
.muse-menu {
  width: 220px;

  font-size: 14px;
  background: #fff;
  color: #888;

  position: fixed;
  z-index: 20;

  visibility: normal;
  opacity: 1;

  box-shadow: 0.06rem 0.06rem 0.1rem rgba(0,0,0,.2), -0.06rem 0 0.06rem rgba(0,0,0,.1);

  transition(.1s opacity ease-out);

  &.muse-menu__state-close {
    visibility: hidden;
    opacity: 0;
  }

  .muse-menu__item {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    cursor: pointer;
    transition(.3s all ease-out);
  }

  .muse-menu__item:hover {
    color: #fff;
    background: rgb(66, 129, 244);
  }

  .muse-volume {
    width: 100%;
    height: 5px;
    background: rgb(55, 141, 59);

    margin-top: 10px;

    .muse-volume__container {
      width: calc(100% - 8px);
      height: 100%;
    }

    .muse-volume__current {
      @extends .muse-progress .muse-progress__played;
    }

    .muse-volume__handle {
      @extends .muse-progress .muse-progress__handle;
    }
  } //.muse-volume
  .muse-menu__offset span {
    display: inline-block;

    width: 50%;
    height: 25px;

    font-size: 10px;
    line-height: 19px;
    padding: 3px 0px;
    margin-top: 3px;
    text-align: center;

    color: rgb(138, 194, 73);

    transition(.3s all);

    &:hover {
      color: #000;
    }
  }

  .muse-menu__playrate-container {
    float: right;
    & > a {
      color: rgb(138, 194, 73) !important;
      font-size: 16px;
      display: inline-block;
      text-decoration: none !important;
      border: 0px !important;
      padding: 0px 8px;
      margin: -10px 0px;
    }

    .muse-menu__playrate-disabled {
      color: #000 !important;
    }
  }
}

.muse-player.muse-layout-default[data-length='1'] {
  .muse-btn__playlist, .muse-selector {
    display: none;
  }
}

/* fullscreen related */
.muse-player.muse-layout-default:-webkit-full-screen {
  fullscreen();
}
.muse-player.muse-layout-default:-moz-full-screen {
  fullscreen();
}
.muse-player.muse-layout-default:full-screen {
  fullscreen();
}