@import "TOKENS";
$color_disabled: #5f5f5f;
.audioplayer.skin-redlights{
  .audioplayer-inner{
    height: 80px;
    padding: 10px;
    background-color: #e2e2e2;



    $transition-property: background;
    $transition-duration: .3s;
    $transition-timing: linear;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);

    >.the-thumb-con{
      display: none;
    }
  }

  .audioplayer-inner{
    border-radius: 5px;
  }

  .volume_static:before{
    display: none;
  }
  .ap-controls{

    display: flex;
    align-content: center;
    align-items: center;

    > .the-bg{
      display: none;
    }
    height: 100%;
    .ap-controls-left{
      width: 60px;
      height: 100%;
      position: relative;
      float:left;

      margin-right: 10px;


      .con-playpause{

        width: 60px;
        height: 60px;
        top:0;
        left:0;
        position: relative;

        border-radius: 5px;


        background-color: $color_disabled;


        $transition-property: background;
        $transition-duration: .2s;
        $transition-timing: ease-out;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);


        .playbtn{

          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate3d(-50%,-50%,0);
          width: auto;height:auto;

          path{
            fill: #fff;
          }

        }
        .pausebtn{

          position: absolute;
          top: 50%;
          left: 50%;

          transform: translate3d(-50%,-50%,0);

          width: auto; height: auto;
          border: 0px solid #191d21;



          path{
            fill: #e1d9ca;
          }
        }
      }

      .con-playpause:hover{
        background-color: $color_highlight;

      }
    }

    .controls-right{


      width: auto;
      min-width: 40%;

      text-align: right;

      padding: 10px 10px 5px 0;

      .controls-volume{
        margin-left: auto;
      }
    }
    .ap-controls-right{
      float:none;
      overflow: hidden;
      background-color: transparent;
      height: auto;
      display: flex;

      flex: 100;
      flex-direction: column;




      .ap-controls-right--top{

        display: flex;
        align-items: center;
        .meta-artist-con{
          flex: 100;
        }
      }

      color: #fff9f9;

      position: relative;

      border-radius: 0 3px 3px 0;

      padding-left: 13px;
      padding-right: 13px;

      max-width: 80%;
      width: 400px;

      >*{
        float:none;
      }

      .meta-artist{
        overflow: hidden;

        white-space: nowrap;

      }

      .meta-artist-con{
        position: relative;
        top:0;
        left:0;
        color: #774b5e;
        white-space: nowrap;
        max-width: 100%;
        margin-bottom: 5px;

        bottom: auto;


        .the-artist{
          font-weight: bold;

          display: inline-block;

          font-family: "Lato", "Open Sans", sans-serif;

          color: $color_disabled;
          font-size: 14px;
          margin-right: 10px;

          &:empty{
            display: none;
          }
        }


        .the-name{
          font-size: 14px;
          font-weight: 300;
        }
      }

      .controls-volume{

        width: 57px;
        height: 14px;


        position: relative;
        float: none;
        bottom: auto;
        left: auto;

        .volume_static,.volume_active{

          background-size: 57px 14px;
          background-repeat: no-repeat;
        }
        .volume_static{
          width: 100%;
          height: 100%;
          background-image: url('./img/skin-redlights--volume-static.svg');
          top:0;

          transform: translate3d(0, 0%, 0);
          rect{
            fill: #a9a9a9;
          }
        }

        .volumeicon, .volume_static, .volume_cut{
          position: relative;
          left:0;
        }
        .volume_active{
          position: absolute;
          height: 100%;
          width: 100%;
          background-color: transparent;
          background-image: url('./img/skin-redlights--volume-active.svg');

          overflow: hidden;


          top:0;

          left:0;

          transform: translate3d(0, 0%, 0);
          rect{
            fill: $color_highlight;
          }

        }

        .volumeicon{
          display: none;
        }
      }

      .scrubbar{
        margin-top: 7px;
        height: 10px;

        > .scrub-bg{
          border-radius: 0px;
          height: 10px;
          background-color: #FFFFFF;
          border: 1px solid #222222;
        }

        >.scrub-prog{

          border-radius: 0px;
          height: 6px;
          top:2px;
          left: 2px;
          max-width: calc(100% - 4px);
          background-color: #222222;
        }
      }

      .total-time{
        position: relative;
        top:0; left: 0;
        color: #774b5e;
        padding:0;
        font-size: 14px;
        margin-top: 8px;
      }
    }
  }

  &.is-radio-type{
    .ap-controls .ap-controls-right{
      max-width: none;
    }
    .meta-artist{

      >*{
        display: block;

        &+*{
          margin-top: 5px;
        }
      }
    }
  }
}

.audioplayer.skin-aria.under-400 .meta-artist-con{
  display: block;
}



.audioplayer.skin-redlights.is-playing {
  .audioplayer-inner {

    .con-playpause {

      background-color: #FFFFFF;



    }
  }
}

.audioplayer.skin-redlights.under-400{

  .controls-right{
    display: none;
  }
}