/*---------------------
  Anime Watching
-----------------------*/
.anime__video__player {
  margin-bottom: 70px;

  .plyr--video {
    border-radius: 5px;
    background: transparent;
  }

  .plyr audio,
  .plyr iframe,
  .plyr video {
    width: 102%;
  }

  .plyr--full-ui.plyr--video .plyr__control--overlaid {
    display: block;
  }

  .plyr--video .plyr__control.plyr__tab-focus,
  .plyr--video .plyr__control:hover,
  .plyr--video .plyr__control[aria-expanded=true] {
    background: transparent;
  }

  .plyr--video .plyr__controls {
    background: transparent;
  }

  .plyr--video .plyr__progress__buffer {
    color: transparent;
  }

  .plyr--full-ui input[type=range] {
    color: $white-color;
  }

  .plyr__controls .plyr__controls__item.plyr__progress__container {
    position: absolute;
    left: 26px;
    bottom: 45px;
    width: calc(100% - 60px);
  }

  .plyr__menu {
    margin-right: 70px;
  }

  .plyr__controls .plyr__controls__item:first-child {
    position: absolute;
    left: 32px;
    bottom: 8px;
  }

  .plyr__controls .plyr__controls__item:last-child {
    position: absolute;
    right: 32px;
    bottom: 8px;
  }

  .plyr__volume {
    position: absolute;
    width: auto;
    left: 76px;
    bottom: 8px;
  }

  .plyr__controls .plyr__controls__item.plyr__time {
    position: absolute;
    left: 106px;
    bottom: 12px;
  }

  .plyr__control--overlaid {
    background: transparent;
    background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, transparent)));

    svg {
      height: 60px;
      width: 50px;
    }
  }
}

.anime__details__episodes {
  margin-bottom: 35px;

  a {
    display: inline-block;
    font-size: 15px;
    color: $white-color;
    background: rgba(255, 255, 255, .2);
    padding: 10px 20px;
    border-radius: 4px;
    margin-right: 15px;
    margin-bottom: 20px;
    @include transition(all, .3s);

    &:hover {
      color: $black-color;
      background: $white-color;
    }
  }
}