@import "TOKENS";

$color_button_icon: #e1d9ca;
.audioplayer.skin-aria{
  text-align: left;
  line-height: 1;
  .audioplayer-inner{
    height: 100px;

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

  .controls-right{
    display: none;
  }
  .ap-controls{

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

      border-radius: 5px 0 0 5px;

      .con-playpause{
        width: 60px;
        height:60px;
        position: absolute;
        left:50%; top: 50%;
        margin-left: -30px;
        margin-top: -30px;


        border-radius: 50%;

        .playbtn{

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

          width: auto;height:auto;

        }
        .pausebtn{

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

          width: auto;height:auto;

        }
      }
    }
    .ap-controls-right{
      float:none;
      overflow: hidden;
      height: 100px;

      border-radius: 0 3px 3px 0;

      padding-top: 13px;
      padding-left: 13px;

      padding-right: 13px;

      >*{
        float:none;
      }

      .meta-artist{
        overflow: hidden;
      }

      .meta-artist-con{
        position: relative;
        top:0;
        left:0;
        white-space: nowrap;
        max-width: none;


        .the-artist{

          font-size: 16px;
          font-weight: bold;

        }


        .the-artist:after{
          content: "";
          display: block;
          clear: both;
          height: 4px;
        }

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

      .scrubbar{
        margin-top: 8px;
        height: 6px;

        > .scrub-bg{
          border-radius: 2px;
        }

        >.scrub-prog{

          border-radius: 2px;
        }
      }

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

  .prev-btn,.next-btn{
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translate3d(0,-50%,0);
    svg{
      width: 20px;
      height: 20px;

      path{
        fill: $color_button_icon;
      }
    }
  }
  .next-btn{
    left: auto;
    right:0;
  }
}



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