$name-prefix: "cp-";

$primaryColor: #F44336;
$primaryDarkColor: #B71C1C;
$accentLightColor: #BDBDBD;
$accentColor: #757575;
$accentDarkColor: #616161;
$TextColor: #424242;
$backgroundColor: #fff;
$base-font-size: 12px;
$enable-transitions: true;

@mixin transition($transition...) {
  @if $enable-transitions {
    transition: $transition;
  }
}

@function strip-units($number){
  @return $number / ($number * 0 + 1);
}

@function toem($target-size,$context:$base-font-size){
  @if not unitless($target-size){
    $target-size: strip-units($target-size);
  }
  @if not unitless($context){
    $context: strip-units($context);
  }
  @return ($target-size / $context) * 1em;
}

@mixin box_shadow ($level) {
    @if $level == 1 {
        box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
    } @else if $level == 2 {
        box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;
    } @else if $level == 3 {
        box-shadow: rgba(0, 0, 0, 0.188235) 0px 10px 30px, rgba(0, 0, 0, 0.227451) 0px 6px 10px;
    } @else if $level == 4 {
        box-shadow: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;
    } @else if $level == 5 {
        box-shadow: rgba(0, 0, 0, 0.298039) 0px 19px 60px, rgba(0, 0, 0, 0.219608) 0px 15px 20px;
    }
}

@keyframes miss-pointer-event {
    0% {pointer-events: none;}
    50% {pointer-events: none;}
    100% {pointer-events: auto;}
}

$mainbody-height: toem(50px);
$mainbody-width: toem(300px);
$big-progress-height: toem(35px);
$border-radius: toem(4px);

c-player {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    font-size: $base-font-size;
    width: 300px;
    text-align: left;
	.#{$name-prefix}mainbody {
        display: flex;
        align-items: center;
        flex-direction: row;
		min-height: $mainbody-height;
        min-width: $mainbody-width;
        flex-wrap: wrap;
        background-color: $backgroundColor;
        position: relative;
        z-index: 1;
        border-radius: $border-radius;
        @include box_shadow(1);
        > * {
            margin-right: toem(7px)
        }
        &:hover{
            & + .#{$name-prefix}drop-down-menu.#{$name-prefix}drop-down-menu-info {
                height: toem(25px);
            }
        }
    }
    .#{$name-prefix}drop-down-menu {
        $lineheight: 25px;
        $margin: 2px;
        margin: toem(0px) toem($margin) 0;
        display: block;
        text-align: center;
        font-size: toem(12px);
        line-height: toem($lineheight);
        background-color: rgba($backgroundColor, 0.6);
        position: relative;
        z-index: 0;
        height: toem(0px);
        overflow: hidden;
        border-bottom-right-radius: $border-radius;
        border-bottom-left-radius: $border-radius;
        @include box_shadow(1);
        @include transition(transform 0.25s ease 0.1s, height 0.25s ease 0.1s);
        span.#{$name-prefix}audio-title {
            max-width: toem(170px);
            overflow: hidden;
            text-overflow: ellipsis;
        }
        span.#{$name-prefix}audio-artist {
            opacity: 0.6;
            max-width: toem(100px);
            overflow: hidden;
            text-overflow: ellipsis;
        }
        &.#{$name-prefix}drop-down-menu-top {
            order: -1;
        }
        &.#{$name-prefix}drop-down-menu-none {
            display: none;
        }
        &.#{$name-prefix}drop-down-menu-bottom {
            order: 1;
        }
        &.#{$name-prefix}drop-down-menu-info .#{$name-prefix}playlist {
            display: none;
        }
        &.#{$name-prefix}drop-down-menu-info:hover {
            height: toem(25px);
        }
        &.#{$name-prefix}drop-down-menu-playlist .#{$name-prefix}audio-info {
            display: none;
        }
        &.#{$name-prefix}drop-down-menu-playlist {
            height: auto;
        }
    }
    .#{$name-prefix}playlist {
        margin: toem(0px);
        padding: toem(0px);
        list-style: none;
        text-align: left;
        li {
            padding: toem(0px) toem(10px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .#{$name-prefix}play-icon {
                display: inline-block;
                width: toem(12px);
                height: toem(12px);
                vertical-align: text-top;
                margin: 0px toem(5px) 0 0;
                fill: rgba($primaryDarkColor, 0.8);
            }
            cursor: pointer;
        }
    }
    .#{$name-prefix}playlist-artist {
        opacity: 0.46;
    }
    .#{$name-prefix}center-container {
        flex-grow: 1;
        position: relative;
        height: $mainbody-height;
        pointer-events: auto;
        .#{$name-prefix}controls {
            opacity: 0;
        }
        &:hover {
            .#{$name-prefix}controls {
                opacity: 1;
                animation: miss-pointer-event 100ms;
                animation-fill-mode: both;
            }
            .#{$name-prefix}lyric {
                opacity: 0;
            }
        }
    }
    .#{$name-prefix}controls {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        @include transition(opacity 0.25s ease);
        > * {
            margin-right: toem(15px);
            -webkit-tap-highlight-color: transparent;
        }
    }
    .#{$name-prefix}lyric {
        $margin-left: toem(10px);
        $margin-top: toem(5px);
        display: flex;
        align-items: center;
        position: absolute;
        width: calc(100% - #{$margin-left * 2});
        height: calc(100% - #{$margin-top * 2});
        overflow: hidden;
        margin: $margin-top $margin-left;
        font-size: toem(14px);
        @include transition(opacity 0.25s ease);
    }
    .#{$name-prefix}lyric-text {
        flex-grow: 1;
        white-space: nowrap;
        text-align: center;
        color: $TextColor;
        .#{$name-prefix}lyric-text-sub {
            display: block;
            color: $accentColor;
            font-size: toem(12px, 14px);
        }
        .#{$name-prefix}lyric-text-zoomout {
            font-size: toem(12px);
            transform: translateY(toem(1px));
            display: inline-block;
            margin: 0px toem(2px, 14px);
        }
    }
    .#{$name-prefix}progress-container {
        flex-basis: 100%;
        margin: toem(0px);
        opacity: 0.8;
        position: absolute;
        width: 100%;
        bottom: 0px;
        border-bottom-left-radius: $border-radius;
        border-bottom-right-radius: $border-radius;
        overflow: hidden;
        pointer-events: none;
        > span {
            display: none
        }
    }
    &.#{$name-prefix}big .#{$name-prefix}progress-container {
        position: relative;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        height: $big-progress-height;
        padding: 0 toem(5px);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        justify-content: space-between;
        pointer-events: auto;
        color: $TextColor;
        > span {
            display: inline;
            margin: 0 toem(15px);
            font-size: 0.8em
        }
    }
    .#{$name-prefix}progress {
        overflow: hidden;
        .#{$name-prefix}progress-fill {
            display: block;
            height: toem(2px);
            background: $primaryColor;
        }
        .#{$name-prefix}progress-button {
            display: none;
        }
    }
    &.#{$name-prefix}big .#{$name-prefix}progress {
        @extend %#{$name-prefix}-controller;
        overflow: visible;
        .#{$name-prefix}progress-fill {
            @extend %#{$name-prefix}-controller-fill;
        }
        .#{$name-prefix}progress-button {
            @extend %#{$name-prefix}-controller-button;
        }
    }
    .#{$name-prefix}poster {
        width: $mainbody-height;
        height: $mainbody-height;
        background-repeat: repeat;
        background-position: 50% 50%;
        background-size: cover;
        background-color: #fafafa;
        background-origin: padding-box;
        background-attachment: scroll;
        border-right: toem(1px) solid #eee;
        background-image: url("../defaultposter.jpg");
        border-top-left-radius: $border-radius;
        border-bottom-left-radius: $border-radius;
        overflow: hidden;
        video {
            width: 100%;
            height: 100%;
        }
    }
    &.#{$name-prefix}big .#{$name-prefix}poster {
        flex-basis: 100%;
        width: $mainbody-width;
        height: $mainbody-width * 0.5625;
        border-right: none;
        border-bottom: toem(1px) solid #eee;
        margin: 0;
        border-top-left-radius: $border-radius;
        border-bottom-left-radius: 0;
        border-top-right-radius: $border-radius;
        border-bottom-right-radius: 0;
    }
    .#{$name-prefix}play-icon {
        $size: toem(12.5px);
        width:$size;
        height:$size;
        display: block;
        overflow: hidden;
        position: relative;
        .#{$name-prefix}play-icon-left {
            height: 100%;
            float: left;
            background-color: $primaryColor;
            width: 36%;
            @include transition(width 0.25s ease);
            overflow: hidden;
        }
        .#{$name-prefix}play-icon-right {
            height: 100%;
            float: right;
            background-color: $primaryColor;
            width: 36%;
            @include transition(width 0.25s ease);
            overflow: hidden;
        }
        .#{$name-prefix}play-icon-triangle-1 {
            transform: translate(0, -100%)
        }
        .#{$name-prefix}play-icon-triangle-2 {
            transform: translate(0, 100%)
        }
        .#{$name-prefix}play-icon-triangle-1,
        .#{$name-prefix}play-icon-triangle-2 {
            position: absolute;
            top: 0;
            right: 0;
            background-color: transparent;
            width: 0;
            height: 0;
            border-right: $size solid $backgroundColor;
            border-top: $size / 2 solid transparent;
            border-bottom: $size / 2 solid transparent;
            @include transition(transform 0.25s ease);
        }
        &.#{$name-prefix}play-icon-paused {
            .#{$name-prefix}play-icon-left {
                width: 50%;
            }
            .#{$name-prefix}play-icon-right {
                width: 50%;
            }
            .#{$name-prefix}play-icon-triangle-1 {
                transform: translate(0, -50%);
            }
            .#{$name-prefix}play-icon-triangle-2 {
                transform: translate(0, 50%);
            }
        }
        &.#{$name-prefix}play-icon-hover {
            .#{$name-prefix}play-icon-left {
                background-color: $primaryDarkColor;
            }
            .#{$name-prefix}play-icon-right {
                background-color: $primaryDarkColor;
            }
        }
    }
    .#{$name-prefix}play-button,
    .#{$name-prefix}volume-button,
    .#{$name-prefix}prev-button,
    .#{$name-prefix}list-button,
    .#{$name-prefix}mode-button,
    .#{$name-prefix}next-button {
        display: inline-block;
        $size: toem(12.5px);
        width: $size;
        height: $size;
        cursor: pointer;
    }
    .#{$name-prefix}volume-button {
        width: toem(20px);
        position: relative;
    }
    .#{$name-prefix}list-button {
        $size: toem(17.5px);
        width: $size;
        height: $size;
    }
    .#{$name-prefix}mode-button {
        $size: toem(19px);
        width: $size;
        height: $size;
    }
    .#{$name-prefix}play-button {
        $size: toem(30px);
        height: $size;
        width: $size;
        border: $primaryColor solid 1px;
        border-radius: 50%;
        .#{$name-prefix}play-icon.#{$name-prefix}play-icon-paused {
            margin: toem(8.25px);
        }
        .#{$name-prefix}play-icon {
            margin: toem(8.25px);
        }
        &:hover {
            border-color: $primaryDarkColor;
            @extend .#{$name-prefix}play-icon.#{$name-prefix}play-icon-hover;
        }
    }
    .#{$name-prefix}icon {
        $size: toem(12.5px);
        height: $size;
        width: $size;
        path {
            fill: $primaryColor;
        }
        &:hover {
            path {
                fill: $primaryDarkColor;
            }
        }
        &.#{$name-prefix}icon-dark {
            path {
                fill: $accentColor;
            }
            &:hover {
                path {
                    fill: $accentDarkColor;
                }
            }
        }
    }
    .#{$name-prefix}prev-icon {
        @extend .#{$name-prefix}icon;
    }
    .#{$name-prefix}next-icon {
        @extend .#{$name-prefix}icon;
        transform: rotateZ(180deg);
    }
    .#{$name-prefix}volume-icon {
        @extend .#{$name-prefix}icon;
        width: toem(20px);
    }
    .#{$name-prefix}random-icon,
    .#{$name-prefix}single-icon,
    .#{$name-prefix}loop-icon {
        @extend .#{$name-prefix}icon;
        $size: toem(19px);
        width: $size;
        height: $size;
        display: none;
    }
    .#{$name-prefix}mode-button[data-mode=listloop] .#{$name-prefix}loop-icon,
    .#{$name-prefix}mode-button[data-mode=singlecycle] .#{$name-prefix}single-icon,
    .#{$name-prefix}mode-button[data-mode=listrandom] .#{$name-prefix}random-icon {
        display: block;
    }
    .#{$name-prefix}list-icon {
        @extend .#{$name-prefix}icon;
        $size: toem(17.5px);
        width: $size;
        height: $size;
    }
    .#{$name-prefix}volume-container {
        $height: toem(25px);
        $width: toem(130px);
        position: absolute;
        left: 50%;
        top: -7px;
        height: $height;
        width: $width;
        transform: translateX(-50%) translateY(-120%);
        z-index: 1;
        visibility: hidden;
        text-align: left;
        border-radius: $border-radius;
        padding: 0 15px;
        background: $backgroundColor;
        @include box_shadow(1);
        &.#{$name-prefix}volume-container-show {
            visibility: visible;
        }
        &:hover {
            visibility: visible;
        }
        &:before {
            $size: toem(10px);
            content: '';
            width: toem(0px);
            height: toem(0px);
            display: inline-block;
            border-top: $size solid $backgroundColor;
            border-left: $size solid transparent;
            border-right: $size solid transparent;
            position: absolute;
            bottom: toem(0px);
            left: 50%;
            transform: translate(-50%,100%);
        }
        &:after {
            $size: toem(14.142135624px);
            content: '';
            width: $size;
            height: $size;
            display: inline-block;
            position: absolute;
            bottom: toem(0px);
            left: 50%;
            transform: translate(-50%,50%) rotate(45deg);
            @include box_shadow(1);
        }
        > div {
            width: 100%;
            height: 100%;
            background: $backgroundColor;
            border-radius: $border-radius;
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .#{$name-prefix}volume-controller {
        @extend %#{$name-prefix}-controller;
        .#{$name-prefix}volume-fill {
            @extend %#{$name-prefix}-controller-fill;
        }
        .#{$name-prefix}volume-controller-button {
            @extend %#{$name-prefix}-controller-button;
        }
    }
    %#{$name-prefix}-controller {
        display: inline-block;
        $height: $border-radius;
        height: $height;
        width: 100%;
        border-radius: $height / 2;
        background: $accentLightColor;
        line-height: 0;
        touch-action: none;
        position: relative;
        %#{$name-prefix}-controller-fill {
            display: inline-block;
            height: 100%;
            width: 100%;
            border-radius: $height / 2;
            background: $accentDarkColor;
        }
        %#{$name-prefix}-controller-button {
            $size: toem(15px);
            height: $size;
            width: $size;
            position: absolute;
            right: toem(0px);
            top: toem(-5.5px);
            display: inline-block;
            border-radius: 50%;
            border: toem(2px) solid $backgroundColor;
            background: $accentColor;
            transform: translateX(50%);
            &:hover {
                background: $accentDarkColor;
            }
        }
    }
    svg {
        vertical-align: top;
    }
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
}

$dark-primaryColor: #a1a1a1;
$dark-primaryDarkColor: #BDBDBD;
$dark-accentLightColor: #BDBDBD;
$dark-accentColor: #757575;
$dark-accentDarkColor: #616161;
$dark-TextColor: #bbb;
$dark-backgroundColor: #222;
$dark-posterBgColor: #333;

c-player.#{$name-prefix}dark {
    color: $dark-TextColor;
	.#{$name-prefix}mainbody {
        background-color: $dark-backgroundColor;
    }
    .#{$name-prefix}drop-down-menu {
        background-color: rgba($dark-backgroundColor, 0.9);
    }
    .#{$name-prefix}playlist {
        li {
            .#{$name-prefix}play-icon {
                fill: rgba($dark-primaryDarkColor, 0.8);
            }
        }
    }
    .#{$name-prefix}lyric-text {
        color: $dark-TextColor;
        .#{$name-prefix}lyric-text-sub {
            color: $dark-accentColor;
        }
    }
    .#{$name-prefix}progress {
        .#{$name-prefix}progress-fill {
            background: $dark-primaryDarkColor;
        }
    }
    .#{$name-prefix}poster {
        background-color: $dark-posterBgColor;
        border-right-color: $dark-posterBgColor;
    }
    &.#{$name-prefix}big .#{$name-prefix}poster {
        border-bottom-color: $dark-posterBgColor;
    }
    &.#{$name-prefix}big .#{$name-prefix}progress-container {
        color: $dark-TextColor;
    }
    &.#{$name-prefix}big .#{$name-prefix}progress {
        @extend %#{$name-prefix}-controller;
        overflow: visible;
        .#{$name-prefix}progress-fill {
            @extend %#{$name-prefix}-controller-fill;
        }
        .#{$name-prefix}progress-button {
            @extend %#{$name-prefix}-controller-button;
        }
    }
    .#{$name-prefix}play-icon {
        .#{$name-prefix}play-icon-left {
            background-color: $dark-primaryColor;
        }
        .#{$name-prefix}play-icon-right {
            background-color: $dark-primaryColor;
        }
        .#{$name-prefix}play-icon-triangle-1,
        .#{$name-prefix}play-icon-triangle-2 {
            border-right-color: $dark-backgroundColor;
        }
        &.#{$name-prefix}play-icon-hover {
            .#{$name-prefix}play-icon-left {
                background-color: $dark-primaryDarkColor;
            }
            .#{$name-prefix}play-icon-right {
                background-color: $dark-primaryDarkColor;
            }
        }
    }
    .#{$name-prefix}play-button {
        border-color: $dark-primaryColor;
        &:hover {
            border-color: $dark-primaryDarkColor;
        }
    }
    .#{$name-prefix}icon {
        path {
            fill: $dark-primaryColor;
        }
        &:hover {
            path {
                fill: $dark-primaryDarkColor;
            }
        }
        &.#{$name-prefix}icon-dark {
            path {
                fill: $dark-accentColor;
            }
            &:hover {
                path {
                    fill: $dark-accentDarkColor;
                }
            }
        }
    }
    .#{$name-prefix}volume-container {
        background: $dark-backgroundColor;
        &:before {
            border-top-color: $dark-backgroundColor;
        }
        > div {
            background: $dark-backgroundColor;
        }
    }
    %#{$name-prefix}-controller {
        background: $dark-accentDarkColor;
        %#{$name-prefix}-controller-fill {
            background: $dark-accentLightColor;
        }
        %#{$name-prefix}-controller-button {
            border-color: $dark-backgroundColor;
            background: $dark-accentColor;
            &:hover {
                background: $dark-accentLightColor;
            }
        }
    }
}