.ttsaudio-plyr{
  background: none;
  position: relative;
  border-radius: 4px;

  audio{
    display: none;
  }

  $g: &;

  &--single{
    margin-bottom: 2em;

    &__info {
      position: absolute;
      right: 0;
      bottom: 0;
      background: url(../img/info.svg) center no-repeat;
      background-size: 70%;
      background-color: rgba(255, 255, 255, 0.2);
      width: 14px;
      height: 14px;
      text-decoration: none;
      box-shadow: none!important;
      outline: none!important;
      border-top-left-radius: 4px;
      border-bottom-right-radius: 3px;

      &:hover,
      &:focus,&:active
       {
        text-decoration: none;
        border: none;
        box-shadow: none;
      }

      #{$g}--default &{
        background-color: #dbe3e8;
      }
    }

  } //end single

  .plyr[max-width~="360px"] .plyr__volume {
    display: none;
  }

  & .plyr{
    button{
      background-color: unset;
    }
  }

  /* == Skins ==*/
  .plyr{
    .plyr__controls {
      background: none;
      border: none;
    }
  }

  &:not(&--default){
    .plyr__controls{

      // input[type=range]::-webkit-slider-thumb{ background-color: #f0f;}
      // input[type=range]::-moz-range-thumb{ background-color: #f0f; }
      // input[type=range]::-ms-thumb{ background-color: #f0f; }

      .plyr__progress--buffer{
        color: rgba(255,255,255,0.7);
      }

      .plyr__progress--played,
      .plyr__volume--display{
        background-color: rgba(255,255,255,0.2);
      }

      .plyr__progress--played,
      .plyr__volume--display {
        color: #fff;
      }

      input[type=range]::-ms-fill-lower {
        background: #fff
      }

      .plyr__time--current { color: #fff}

      button {
        color: #fff;
        background: none;
        &.tab-focus:focus,
        &:hover {
          background-color: rgba(255,255,255,0.2);
          color: #fff
        }
      }

      #{$g}--stopped > button{
        background: none;
      }

    }

    .ttsaudio-plyr--playlist__list{
      border: none;
      background-color: rgba(0,0,0,0.1);
      li{
        border-color: rgba(255,255,255,0.3)!important;
        color: rgba(255,255,255,0.6);

        &:hover,
        &.active{
          color: #fff;
        }

        .postdate {
          color: rgba(255, 255, 255, 0.5);
        }
      }
    }

  } // not default

  // Custom skins
  @import "default";
  @import "canva";
  @import "apple";
  @import "amber";
  @import "dark";
  @import "mauve";

  /* Playlist widget*/
  $grandparent: &;

  .widget #{$g}{
    background-color: #f00;
  }

  &--playlist{

    &__list{
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 14px;
      border-top: 1px solid #dbe3e8;

      li {
        margin: 0 20px;
        padding: 12px 0px!important;
        list-style: none;
        cursor: pointer;
        line-height: 1.6;
        color: #565D64;
        border: none!important;
        border-bottom: 1px dotted #dbe3e8!important;

        &:last-child {
          border-bottom: none!important;
        }

        &:hover, &.active {
          color: #3498db;
        }

        .postdate {
          color: rgba(0, 0, 0, 0.4);
          font-style: oblique;
          font-size: 80%;
        }
      }
    }

    .buttons {
      display: none;
    }

    &__author {
        font-size: 10px;
        padding: 10px 20px;
        text-align: center;

        a {
          color: rgba(255, 255, 255, 0.5);
          text-decoration: none;
          outline: none;
          border: none;
          box-shadow: none!important;

          &:hover, &:focus, &:active {
            color: #fff;
            text-decoration: none;
            outline: none;
            border: none;
            box-shadow: none;
          }
        }

      #{$grandparent}--default & {
        border-top: 1px solid #dbe3e8;
        a{
          color: rgba(0, 0, 0, 0.5);
          &:hover, &:focus, &:active {
            color: rgba(0, 0, 0, 0.7);
          }
        }
      }
    }

  }

  @import "turquoise";
  @import "emerland";
  @import "peterriver";
  @import "amethyst";
  @import "wetasphalt";
  @import "greensea";
  @import "nephritis";
  @import "belizehole";
  @import "wisteria";
  @import "midnightblue";
  @import "carrot";
  @import "alizarin";
  @import "concrete";
  @import "pumpkin";
  @import "pomegranate";
  @import "asbestos";
  @import "lime";
  @import "green";
  @import "emerald";
  @import "teal";
  @import "cyan";
  @import "cobalt";
  @import "indigo";
  @import "violet";
  @import "pink";
  @import "magenta";
  @import "crimson";
  @import "red";
  @import "orange";
  @import "yellow";
  @import "brown";
  @import "olive";
  @import "steel";
  @import "sienna";

}