.simple-audio-player {
  * {
    font-family: var(--wp--preset--font-family--nunito-sans);
  }

  .simp-album {
    box-sizing: border-box;
    padding: 1.5rem 2rem;
  }

  .simp-artist {
    color: var(--wp--preset--color--color-light);
    font-size: var(--wp--preset--font-size--upper-heading);
  }

  .simp-playlist ul {
    border-top: 1px solid var(--wp--preset--color--border-color);
    scrollbar-width: thin;

    li {
      padding: 1rem;

      .simp-desc {
        display: block;
        font-size: var(--wp--preset--font-size--upper-heading);
        margin: 0;
      }

      &:is(:hover, :focus) {
        color: var(--wp--preset--color--hover-color);
        background-color: var(--wp--preset--color--secondary-bg-color);
      }

      .simp-source {
        font-size: var(--wp--preset--font-size--body-default);
        font-weight: var(--wp--custom--typography--font-weight--extra-bold);
        text-transform: capitalize;
        font-family: var(--wp--preset--font-family--nunito-sans);
      }
    }
  }
}

.wp-block-section .simple-audio-player {
  ul li {
    &.simp-active {
      color: var(--wp--preset--color--hover-color);
      background-color: var(--wp--preset--color--secondary-bg-color);
    }

    &:is(:hover, :focus) {
      color: var(--wp--preset--color--hover-color);
      background-color: var(--wp--preset--color--dark-color);
    }
  }
}

.wp-block-section:nth-child(odd) .simple-audio-player ul li.simp-active,
.wp-block-section:nth-child(odd) .simple-audio-player ul li:hover,
.wp-block-section:nth-child(odd) .simple-audio-player ul li:focus {
  background: var(--wp--preset--color--background);
}

.wp-block-section:nth-child(even) .simp-playlist,
.wp-block-section:nth-child(even) .simple-audio-player {
  background-color: var(--wp--preset--color--background);
}

.wp-block-section:nth-child(even) .simple-audio-player {
  ul li.simp-active {
    background-color: var(--wp--preset--color--dark-color);
  }
}

.simp-playlist,
.simple-audio-player {
  background-color: var(--wp--preset--color--secondary-bg-color);
}

.simple-audio-player ul li:nth-child(odd) {
  background: transparent;
}

.playlist-section {
  .simp-player {
    position: relative;
  }

  .simple-audio-player .simp-controls button.simp-plause {
    align-items: center;
    border: 1px solid transparent;
    @include border(45px);
    bottom: 30px;
    display: flex;
    justify-content: center;
    height: 50px;
    right: 30px;
    position: absolute;
    width: 50px;

    svg {
      fill: var(--wp--preset--color--dark-color);
    }
  }

  .simp-controls {
    button:not(.simp-plause),
    > div:not(.simp-plauseward) {
      display: none;
    }
  }

  .simple-audio-player {
    max-width: 100%;

    .simp-playlist ul li {
      padding: 1.5rem 2rem;
    }

    .simp-album {
      display: grid;
      gap: 1rem;
      grid-template-columns: 80px 1fr;

      .simp-cover {
        margin: 0;

        div {
          width: 100% !important;
        }
      }

      .simp-title {
        font-size: var(--wp--preset--font-size--inner-section-title);
        font-family: var(--wp--preset--font-family--nunito-sans);
        color: var(--wp--preset--color--color-light);
      }
    }
  }
}

.simple-audio-player svg {
  width: 20px;
  display: block;
}

.simple-audio-player .simp-controls button:not([disabled]):hover {
  background: transparent;
  color: var(--wp--preset--color--hover-color);

  svg {
    fill: var(--wp--preset--color--hover-color);
  }
}

.playlist-section
  .simple-audio-player.playing
  .simp-controls
  button.simp-plause
  svg {
  fill: var(--wp--preset--color--hover-color);
}

.playlist-section
  .simple-audio-player.playing
  .simp-controls
  button.simp-plause {
  background-color: transparent;
  border-color: var(--wp--preset--color--hover-color);
}

.player-section {
  .wp-block-group.section-heading .wp-block-heading {
    margin: 0;
  }

  .wp-block-columns {
    .wp-block-embed {
      margin: 0;
    }
  }
}

.player-section .playing .simp-display {
  .simp-active {
    position: relative;

    &:after {
      content: "";
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 10px solid var(--wp--preset--color--hover-color);
      cursor: pointer;
      position: absolute;
      right: 20px;
      top: 50%;
      @include transform(translateY(-50%));
      width: 0;
    }
  }
}

// Sticky Playlist

.sticky-playlist {
  background: var(--wp--preset--gradient--secondary-overlay-bg);
  position: relative;
  margin-block-start: 0;

  .wp-block-fse-playlist {
    max-width: var(--wp--style--global--wide-size);
    margin-inline: auto;
    padding: 15px;
    padding-inline: 0;
    position: relative;
  }

  .simple-audio-player {
    background-color: transparent;
    max-width: 100%;

    .simp-plauseward {
      justify-content: space-between;
      flex-basis: 30%;
    }

    .simp-time {
      flex: 1;
      justify-content: flex-end;
      display: none;
    }

    .simp-others > button {
      display: none;
    }

    .simp-tracker {
      left: 0;
      margin: 0;
      position: absolute;
      top: -10px;
      width: 100%;
      z-index: 1;
    }

    s .simp-player > .simp-hide {
      display: none;
    }

    .simp-volume {
      margin: 0;
      order: 1;
    }

    ul li.simp-active,
    ul li:hover,
    ul li:focus {
      background-color: var(--wp--preset--color--background);
    }

    .simp-playlist {
      max-height: 0;
    }

    .simp-playlist.simp-display {
      position: absolute;
      width: 100%;
      bottom: 100%;
      z-index: 9;
      max-height: 0;

      &.simp-hide {
        max-height: 650px;
      }
    }

    .simp-album {
      align-items: center;
      gap: 20px;
      padding-bottom: 0;
      padding-left: 0;
      padding-top: 0;
      max-width: 350px;
      flex-wrap: nowrap;
    }

    .simp-cover {
      margin: 0;

      > div {
        background-size: contain !important;
      }
    }

    .simp-player {
      @include flex;
      justify-content: space-between;
    }

    .simp-controls {
      justify-content: flex-end;
      flex: 1;
      padding: 0;

      .simp-others .simp-active {
        background-color: transparent;

        svg {
          fill: var(--wp--preset--color--hover-color);
        }
      }

      .simp-shide {
        align-items: center;
        @include flex;
        flex-direction: row;
        height: 42px;
        justify-content: center;
        width: 42px;

        .simp-shide-bottom {
          position: relative;
          height: 20px;

          &:after {
            background: url(./assets/images/playlist-icon.svg) no-repeat;
            background-size: contain;
            content: "";
            height: 100%;
            left: 50%;
            position: absolute;
            top: 0;
            @include transform(translateX(-50%));
            width: 100%;
          }

          svg {
            display: none;
          }
        }
      }

      button.simp-plause {
        border: 2px solid var(--wp--preset--color--color-light);
        @include flex;
        align-items: center;
        justify-content: center;
        @include border(45px);
        height: 42px;
        width: 42px;

        svg {
          width: 12px;

          &.pause-button {
            width: 15px;
          }
        }
      }
    }
  }
}

.simple-audio-player
  .simp-controls
  .simp-others
  .simp-shide
  button.simp-shide-top {
  display: none;
}

/*Chrome*/
.player-section {
  .wp-block-fse-playlist {
    input[type="range"] {
      height: 2px;
      @include border(5px);
      z-index: 0;
    }

    input[type="range"]::-webkit-slider-runnable-track {
      -webkit-appearance: none;
      color: #13bba4;
      height: 2px;
      margin-top: -1px;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      cursor: ew-resize;
      margin-top: -5px;
      background-color: var(--wp--preset--color--color-light);
      position: relative;
    }
  }
}

.simple-audio-player .simp-controls button {
  height: auto;
  padding: 11px;
  width: auto;
}

.player-section .wp-block-fse-playlist {
  /** FF*/
  input[type="range"]::-moz-range-progress {
    background-color: var(--wp--preset--color--hover-color);
    height: 2px;
  }
}

.simp-mute .volume-up-button {
  display: block;
}

.sticky-playlist .player-section .playing .simp-active:after {
  display: none;
}

.simple-audio-player {
  @include border(0);
}
