div.radio-player {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-flow: row;
  justify-content: flex-start;
  max-width: 100%;
  width: var(--radio-player-width);
  background: var(--radio-player-bg-color);
  background-size: cover;
  box-shadow: var(--radio-player-box-shadow);
  position: relative;

  &, * {
    box-sizing: border-box;
  }

  &-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-flow: row;
    justify-content: flex-start;
    overflow: hidden;
    @media (max-width: 991px) {
      width: 100%;
      justify-content: center;
    }

  }

  .radio-player-thumbnail {
    margin-right: 10px;
    width: 100%;

    &[src=""] {
      display: none;
    }

  }

  .radio-player-title {
    padding: 0;
    color: var(--radio-player-text-color);
    font-weight: bold;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: none;
    line-height: 1;
    font-size: 16px;
  }

  &-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 0 15px;
  }

  /**----------------- song title ------------------**/
  .radio-player-song-title {
    overflow: hidden;
    box-sizing: border-box;
    line-height: 1;
    margin-bottom: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    span.track-title {
      width: max-content;
      //padding-left: 100%;
      will-change: transform;
      animation: marquee 10s linear infinite;
      line-height: 1;
      color: var(--radio-player-text-color);
      font-size: .875rem;
      display: inline-flex;
      align-items: center;

      &.animation-disabled {
        animation: none;
        padding: 0;
      }

      svg {
        margin-right: 5px;
      }

      &:empty {
        display: none;
      }

      &:hover {
        animation-play-state: paused
      }

    }

    span.track-artist {
      color: var(--radio-player-text-color);
      font-size: .8rem;
      display: inline-flex;
      align-items: center;
      margin-top: 5px;

      svg {
        margin-right: 5px;
        fill: var(--radio-player-text-color);
      }
    }

    @keyframes marquee {
      0% {
        transform: translate(calc(100% + 30px), 0);
      }
      100% {
        transform: translate(-100%, 0);
      }
    }

    &:empty {
      display: none;
    }

  }

  /**----------- Volume --------------**/
  .radio-player-volume {
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .volume-icon {
      position: relative;
      z-index: 9;
    }

    .volume-slider {
      position: absolute;
      height: 0;
      width: 56px;
      overflow: hidden;
      bottom: -5px;
      border-radius: 5px;
      background: var(--radio-player-bg-color);
      box-shadow: 0 -6px 8px -2px rgb(0 9 27 / 36%);
      transition: height .15s ease-in-out;
      transition-delay: 1s;

      .volume-slider-bar {
        display: block;
        position: absolute;
        top: 20px;
        bottom: 45px;
        left: 50%;
        width: 3px;
        margin-left: -1px;
        border-radius: 2px;
        background-image: linear-gradient(to top, #fff 0%, var(--radio-player-text-color) 100%);
        background-repeat: repeat-x;
      }

      .volume-slider-handle {
        position: absolute;
        left: 50%;
        border-radius: 50%;
        background: var(--radio-player-bg-color);
        width: 24px;
        height: 24px;
        box-shadow: 0 4px 4px rgb(0 9 27 / 36%), 0 0 0 4px #F6931FFF inset;
        cursor: ns-resize;
        margin: -12px;
        bottom: var(--radio-player-volume-slider);
      }

    }

    &:hover,
    &:focus-visible {
      .volume-slider {
        height: 160px;
        transition-delay: 0s;
      }
    }

    &:focus-visible {
      .volume-slider {
        outline: 2px dashed var(--radio-player-text-color);
      }
    }

    @media (max-width: 768px) {
      .volume-slider {
        transition-delay: 0s;
      }
    }
  }

  /**-------------------- Button ------------------**/
  button {
    padding: 3px !important;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
    color: var(--radio-player-text-color) !important;
    line-height: 0 !important;
    transition: all .2s ease;

    svg {
      height: 24px;
      width: 24px;
    }

    svg, path {
      transition: all .2s;
    }

    &.radio-play-pause {
      transform: scale(1.7);
    }

    &.radio-player-open-popup {
      border-top-right-radius: 0;

      svg {
        padding: 1px;
      }

    }

    &.playlist-icon {

      svg {
        width: 30px;
        height: 30px;
      }

    }

    &:focus-visible {
      outline: 2px dashed var(--radio-player-text-color);
      border-radius: 10px;
    }

    &:hover {
      //change svg color on hover
      svg, path {
        fill: $radio_player_color;
      }
    }

  }

  /*---------------- fullwidth player ------------------*/
  &.sticky {
    bottom: 0;
    z-index: 99999;
    position: fixed;
    width: 100%;
    height: 70px;
    box-shadow: 0 0 3px var(--radio-player-bg-color);
    border-top: 1px solid #ddd;

    &.position-top {
      top: 0;
      bottom: unset;
    }

    .radio-player-details {
      max-width: 60%;

      .station-meta-wrap {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding-right: 10px;

        .radio-player-title {
          line-height: normal;
        }

        .radio-player-status {
          flex: none;
          margin-left: 10px;
        }

        .radio-player-song-title {
          margin-bottom: 0;
          width: 100%;
          align-items: flex-start;

          span {
            margin-bottom: 0;
          }
        }
      }
    }

    .radio-player-controls {
      column-gap: 30px;
      justify-content: flex-start;
      flex: 1;
      margin-left: 40px;
      flex-wrap: nowrap;

      .radio-player-progressbar {
        max-width: 300px;
      }

      .radio-player-visualizer {
        margin-left: 20px;
      }

      .radio-player-volume {
        .volume-slider {
          height: unset;
          width: 0;
          bottom: unset;
          position: relative;
          background: unset;
          box-shadow: unset;
          overflow: hidden;
          margin-left: 5px;
          transition: width .15s ease-in-out;

          &-bar {
            width: 100%;
            height: 5px;
            top: 50%;
            left: unset;
            bottom: unset;
            background-image: linear-gradient(to right, #ccc 0%, var(--radio-player-text-color) 100%);
          }

          &-handle {
            left: var(--radio-player-volume-slider);
            bottom: unset !important;
            cursor: ew-resize;
            margin: -10px 0;
          }

        }

        &:hover .volume-slider {
          width: 80px;
          overflow: unset;
          transition-delay: 0s;
        }

      }

    }

    .radio-player-thumbnail {
      width: 65px;
      margin: 0 15px 0 5px;
      border-radius: 5px;
      aspect-ratio: 1;
      object-fit: cover;
    }

    .radio-player-status {
      margin-bottom: 0;
    }

    .radio-player-playlist {
      position: absolute;
      bottom: 100%;
      width: 400px;
      background: var(--radio-player-bg-color);
      right: 0;
      z-index: 9999;
      border-radius: 5px 5px 0 0;

      .playlist-item {
        padding: 7px 15px;
      }

    }

    @media (max-width: 991px) and (min-width: 768px) {
      .radio-player-controls {
        margin-left: 20px;
        column-gap: 25px;
      }
    }

    // Responsive
    &.player-xxs,
    &.player-xs,
    &.player-sm, {
      height: auto;
      padding: 5px 10px 10px 10px;
      border-top: 1px solid #ededed;

      .radio-player-details {
        .radio-player-thumbnail {
          width: 35px;
          height: 35px;
          margin: 0 7px 0 0;
        }

        .radio-player-title {
          font-size: 14px;
        }

      }

      .radio-player-visualizer {
        display: none;
      }

      .radio-player-controls {
        column-gap: 15px;
        justify-content: flex-end;
        margin-left: 0;

        .radio-player-progressbar {
          position: absolute;
          top: -5px;
          width: 100%;
          max-width: 100%;
          padding: 0;
          left: 0;
          margin: 0;
          height: auto;
          border-radius: 0;

          .progress-time,
          .progress-handle {
            display: none;
          }

          .progress-slider {
            height: 5px;
            border-radius: 0;
          }

        }

        button {
          svg {
            width: 20px;
            height: 20px;
          }

          &.radio-player-toggle {
            margin: unset;

            svg {
              width: 18px;
              height: 18px;
            }

          }

        }

        .popup-icon,
        .radio-player-volume,
        .playlist-icon, {
          display: none;
        }
      }

    }

    &.player-md {
      .radio-player-controls {
        column-gap: 15px;
        justify-content: flex-end;
        margin-left: 0;

        .radio-player-progressbar {
          position: absolute;
          top: -5px;
          width: 100%;
          max-width: 100%;
          padding: 0;
          left: 0;
          margin: 0;
          height: auto;
          border-radius: 0;

          .progress-time,
          .progress-handle {
            display: none;
          }

          .progress-slider {
            height: 5px;
            border-radius: 0;
          }

        }

        .popup-icon,
        .radio-player-volume,
        .playlist-icon, {
          display: none;
        }
      }
    }


  }

  &.mini-fullwidth {
    height: 35px;

    .radio-player-details {
      .radio-player-thumbnail {
        height: 30px;
        width: 30px;
        border-radius: 3px;
        margin-left: 5px;
      }

      .station-meta-wrap {

        .radio-player-title {
          font-size: 0.875rem;
        }

        .radio-player-song-title {
          flex: 1;
          font-size: .75rem;
          margin-left: 20px;

          .track-title {
            font-size: 13px;
          }

          .track-artist {
            margin-top: 3px;
            font-size: 11px;
          }
        }
      }
    }

    button {
      svg {
        width: 18px;
        height: 18px;
      }
    }

    @media (max-width: 767px) {
      height: auto;
      padding: 5px 10px 10px;
      .radio-player-details {
        padding: 0;
        margin-bottom: 5px;

        .radio-player-thumbnail {
          height: 25px;
          width: 25px;
          margin-left: 0;
        }
      }

      .radio-player-controls {
        button {
          svg {
            width: 18px;
            height: 18px;
          }
        }
      }
    }

  }

  &.floating {
    height: 60px;
    width: auto;
    border-radius: 10px;
    max-width: 600px;
    right: 15px;
    bottom: 15px;
    min-width: 250px;

    .radio-player-details {
      flex: 1;

      .radio-player-thumbnail {
        width: 50px;
        height: 50px;
        border-radius: 5px;
        margin: 0 10px 0 5px;
        user-select: none;
        -webkit-user-drag: none;
      }

      .station-meta-wrap {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        .radio-player-title {
          font-size: 0.875rem;
        }

        .radio-player-song-title {
          width: 100%;
          font-size: .75rem;
          display: flex;
          flex-direction: column;
          max-width: 400px;

          .track-title {
            margin-top: 3px;
            font-size: 13px;
          }

          .track-artist {
            margin-top: 3px;
            font-size: 11px;
          }
        }
      }

    }

    .radio-player-controls {
      flex: none;
      width: auto;
      flex-wrap: nowrap;
      gap: 0 15px;
      margin: 0 15px 0 auto !important;
      justify-content: center;
    }

    button {
      svg {
        width: 22px;
        height: 22px;
      }

      &.radio-player-toggle {
        margin-right: 0;
      }
    }

    svg.radio-player-move {
      width: 24px;
      height: 24px;
      position: absolute;
      top: -15px;
      left: -15px;
      //fill: var(--radio-player-text-color);
      fill: #555;
      cursor: move;
      opacity: 0;
      transition: opacity .5s ease;
    }

    &.top-left {
      top: 15px;
      bottom: auto;
      right: auto;
      left: 15px;
    }

    &.top-right {
      top: 15px;
      bottom: auto;
      right: 15px;
      left: auto;
    }

    &.bottom-left {
      top: auto;
      bottom: 15px;
      right: auto;
      left: 15px;
    }

    &.bottom-right {
      top: auto;
      bottom: 15px;
      right: 15px;
      left: auto;
    }

    &:hover {
      svg.radio-player-move {
        opacity: 1;
        transition: opacity 1s ease;
      }
    }

    &.draggable {
      max-height: max-content;
      width: max-content; /* prevent flex/grid stretching */
      will-change: transform, top, left; /* smoother drag */
      user-select: none; /* avoid text selection while dragging */
    }

    @media (max-width: 767px) {
      height: auto;
      padding: 5px 10px 10px;
      max-width: calc(100% - 30px);
      right: 10px;
      bottom: 10px;

      .radio-player-details {
        padding: 0;
        margin-bottom: 5px;

        .radio-player-thumbnail {
          height: 25px;
          width: 25px;
          margin: 0;
        }

        .station-meta-wrap {
          padding-right: 5px;
        }
      }

      .radio-player-controls {
        button {
          svg {
            width: 18px;
            height: 18px;
          }
        }


      }

      &.bottom-left {
        left: 10px;
        right: auto;
      }
    }

  }

  /*---------------- shortcode player ------------------*/
  &.shortcode {
    border-radius: var(--radio-player-border-radius);
    flex-flow: column;
    margin: auto auto 30px;
    max-width: calc(100% - 15px);

    .radio-player-controls {
      padding: 0;
    }

    .radio-player-thumbnail {
      width: 120px;
      border-radius: 5px;
    }

    .radio-player-details {
      width: 100%;
      display: flex;
      text-align: center;
    }

    .radio-player-title {
      text-align: center;
    }

    button {
      .dashicons {
        font-size: 30px !important;

      }
    }

    .radio-player-progress-wrap {
      width: 90%;
      margin-top: 10px;
    }

  }

  /*---------------- popup player ------------------*/
  &.popup {
    margin-top: 30px;

    .radio-player-loader, .radio-player-loader:after {
      width: 15px;
      height: 15px;
    }
  }

  /*----------- visualizer ---------------*/
  &.active {
    .radio-player-visualizer {
      visibility: visible;
    }
  }

  /* ----------- Blur Background --------------- */
  &.blur-bg {

    &:not(.floating) {
      overflow: hidden;
    }

    .bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      filter: blur(30px);
      z-index: 0;
      background-size: 150%;
      background-position: center;
      background-repeat: no-repeat;
      opacity: .8;
    }

    & > *:not(.bg-img) {
      z-index: 1;
    }

    &:not(.sticky) {

      .volume-slider {
        background: transparent;
        box-shadow: none;
      }

      .volume-slider-bar {
        width: 5px;
        background-image: linear-gradient(to top, #ccc 0%, var(--radio-player-text-color) 100%);
      }

      .radio-player-volume {
        &:hover {
          .volume-slider {
            height: 120px;
          }
        }
      }
    }

    &.sticky {
      .radio-player-volume {

        input {
          -webkit-appearance: none;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 5px;
          z-index: 9;
          opacity: 0 !important;
          height: 0;
          width: calc(100% + 20px);
          margin: 0;
          cursor: ns-resize;
        }

        .volume-slider {
          background: transparent;
          box-shadow: none;
          overflow: visible;
          bottom: 3px;
          width: 0;
          transition: width .15s ease-in-out;
        }

        .volume-slider-bar {
          height: 5px;
          width: 100%;
          border-radius: 5px;
          top: 0;
          left: 0;
          bottom: 0;
          background-image: linear-gradient(to right, #ccc 0%, var(--radio-player-text-color) 100%);
        }

        .volume-slider-handle {
          left: var(--radio-player-volume-slider);
          bottom: unset !important;
          width: 20px;
          height: 20px;
          margin: -8px 0;
          cursor: pointer;
          right: 10px;
          opacity: 0;
          transition: opacity .15s ease-in-out;
        }

        &:hover {
          .volume-slider {
            transition-delay: 0s;
            width: 60px;
          }

          .volume-slider-handle {
            opacity: 1;
          }

        }

      }
    }

  }

  &.skin1 {
    --radio-player-bg-color: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
    --radio-player-text-color: rgb(14, 57, 91);
    --radio-player-box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    --radio-player-border-radius: 10px;
  }

  &.skin2 {
    --radio-player-bg-color: #5581A4;
    --radio-player-text-color: #fff;
    --radio-player-box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -25px;
  }

  &.skin3 {

  }

  &.skin4 {
    --radio-player-bg-color: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);;
    --radio-player-text-color: rgb(14, 57, 91);
    --radio-player-box-shadow: rgba(0, 0, 0, .5) 0px -1px 2px;
  }

  &.skin5 {
    --radio-player-bg-color: linear-gradient(to left, #243949 0%, #517fa4 100%);
    --radio-player-text-color: #fff;
    --radio-player-box-shadow: rgba(50, 50, 93, 0.25) 0 6px 12px -2px;
  }

  &.skin6 {
    --radio-player-bg-color: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.25) 200%);
    --radio-player-text-color: #fff;
    --radio-player-box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px;
  }

  &.skin7 {
    --radio-player-bg-color: linear-gradient(to left, #243949 0%, #517fa4 100%);
    --radio-player-text-color: #fff;
    --radio-player-box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px;
  }

  &.skin8 {
    --radio-player-box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  }

  &.skin9 {

  }

  &.skin10 {
    --radio-player-bg-color: #FFF;
    --radio-player-text-color: #5C637E;
    --radio-player-border-radius: 5px;
  }

  &.skin11 {
    --radio-player-border-radius: 30px;
  }


}

.radio-player-popup-header {
  margin-bottom: 20px;
}

.radio-player-popup-footer {
  margin-top: 20px;
}

/*---- thumbnail ---*/
.thumbnail-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .thumbnail-dot {
    height: 20px;
    width: 20px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;

    &:after {
      content: '';
      height: 8px;
      width: 8px;
      background: #000;
      border-radius: 50%;
      position: absolute;
    }
  }
}

/*----- toggle -----*/
.radio-player-toggle {
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 999;
  margin-left: auto;
  margin-right: 20px;

  svg {
    transform: scale(.8);

    path {
      fill: var(--radio-player-text-color);
    }
  }

  &.active {
    position: fixed;
    right: 0;
    bottom: 30px;
    padding: 5px;
    margin-right: 15px;
    background: transparent;
    border: none;

    img {
      max-width: 80px;
    }
  }

  .radio-player-tooltip {
    line-height: 20px;
  }

  @media (max-width: 767px) {
    &.active {
      img {
        max-width: 50px;
      }
    }
  }

}

/*--- player loader ---*/
$loader_color: #2D62D3;

.radio-player-loader {
  position: relative;
  text-indent: -9999em;
  border-top: 5px solid rgba($loader_color, 0.2);
  border-right: 5px solid rgba($loader_color, 0.2);
  border-bottom: 5px solid rgba($loader_color, 0.2);
  border-left: 5px solid $loader_color;
  transform: translateZ(0);
  animation: radio_player_loader 1.1s infinite linear;
  display: none;
  overflow: hidden;

  &, &:after {
    border-radius: 50%;
    width: 26px;
    height: 26px;
    margin: 0 2px;
  }
}

@keyframes radio_player_loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------Player Status--------------*/
.radio-player-status {
  display: flex;
  align-items: center;

  .status-text-live, .status-text-offline {
    padding: 3px 10px;
    border-radius: 3px;
    color: #fff;
    background: #E8000E;
    font-size: 10px;
    line-height: 10px;
  }

  .status-text-offline {
    display: none;
  }

  .status-dot {
    height: 7px;
    width: 7px;
    background: #E8000E;
    border-radius: 30px;
    margin-left: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    &:after {
      content: '';
      height: 13px;
      width: 13px;
      border: 1px solid #E8000E;
      position: absolute;
      border-radius: 50%;

      box-shadow: 0 0 0 0 #E8000E;
      animation: blink 1s infinite;
    }
  }

  &.offline {
    .status-text-live {
      display: none;
    }

    .status-text-offline {
      display: block;
      background: #999;
    }

    .status-dot {
      background: #999;
      margin-left: 8px;

      &:after {
        border: none;
        animation: none;
      }
    }

  }

}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.radio-player-hidden {
  display: none !important;
}

/*------------visualizer----------------*/
.radio-player-visualizer {

  visibility: hidden;
  width: 100%;
  flex: 1;
  height: auto;
  padding: 5px;
  border-radius: 5px;
  color: #444;
  margin: auto;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;

  div {
    width: 2.5%;
    height: 3rem;
    border-radius: 5px;
    margin: 0 10px 0 0;
    display: inline-block;
    position: relative;

    &:last-child {
      margin: 0;
    }

    span {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      background: linear-gradient(to up, #7700aa, #8800ff);
      position: absolute;
      animation: visualizer 10s infinite ease-in-out;
      bottom: 0;
    }

    &:nth-of-type(1) span {
      animation-delay: 3.99s;
    }

    &:nth-of-type(2) span {
      animation-delay: 3.80s;
    }

    &:nth-of-type(3) span {
      animation-delay: 3.70s;
    }

    &:nth-of-type(4) span {
      animation-delay: 3.60s;
    }

    &:nth-of-type(5) span {
      animation-delay: 3.50s;
    }

    &:nth-of-type(6) span {
      animation-delay: 3.40s;
    }

    &:nth-of-type(7) span {
      animation-delay: 3.30s;
    }

    &:nth-of-type(8) span {
      animation-delay: 3.20s;
    }

    &:nth-of-type(9) span {
      animation-delay: 3.10s;
    }

    &:nth-of-type(10) span {
      animation-delay: 2.1s;
    }

    &:nth-of-type(11) span {
      animation-delay: 2.1s;
    }

    &:nth-of-type(12) span {
      animation-delay: 2.10s;
    }

    &:nth-of-type(13) span {
      animation-delay: 2.20s;
    }

    &:nth-of-type(14) span {
      animation-delay: 1.30s;
    }

    &:nth-of-type(15) span {
      animation-delay: 1.40s;
    }

    &:nth-of-type(16) span {
      animation-delay: 1.50s;
    }

    &:nth-of-type(17) span {
      animation-delay: 1.60s;
    }

    &:nth-of-type(18) span {
      animation-delay: 1.70s;
    }

    &:nth-of-type(19) span {
      animation-delay: 1.80s;
    }

    &:nth-of-type(20) span {
      animation-delay: 2s;
    }
  }

}

@keyframes visualizer {
  0% {
    height: 0%;
    -webkit-transform: translatey(0);
    transform: translatey(0);
    background-color: yellow;
  }

  5% {
    height: 100%;
    -webkit-transform: translatey(15px);
    transform: translatey(15px);
    background-color: fuchsia;
  }
  10% {
    height: 90%;
    transform: translatey(0);
    -webkit-transform: translatey(0);
    background-color: bisque;
  }

  15% {
    height: 80%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  20% {
    height: 70%;
    -webkit-transform: translatey(0);
    transform: translatey(0);
    background-color: cornflowerblue;
  }
  25% {
    height: 0%;
    -webkit-transform: translatey(0);
    transform: translatey(0);
    background-color: cornflowerblue;
  }
  30% {
    height: 70%;
    -webkit-transform: translatey(0);
    transform: translatey(0);
    background-color: cornflowerblue;
  }
  35% {
    height: 0%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  40% {
    height: 60%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  45% {
    height: 0%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  50% {
    height: 50%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  55% {
    height: 0%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  60% {
    height: 40%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  65% {
    height: 0%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  70% {
    height: 30%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  75% {
    height: 0%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  80% {
    height: 20%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  85% {
    height: 0%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  90% {
    height: 10%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  95% {
    height: 5%;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
  100% {
    height: 0;
    -webkit-transform: translatey(0);
    transform: translatey(0);

    background-color: cornflowerblue;
  }
}

/*--------- import playlist ---------*/
@import "playlist";

/*--------- popup player ---------*/
.radio-player-popup-player-wrap {
  font-family: 'Roboto', sans-serif;
}

/*-------- progressbar ----------*/
.radio-player-progressbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  user-select: none;
  gap: 7px;

  .progress-slider {
    position: relative;
    flex-grow: 1;
    height: 7px;
    border: 1px solid #ccc;
    background: var(--radio-player-bg-color);
    border-radius: 5px;
    box-shadow: 0 2px 7px rgb(0 9 27 / 20%);
    cursor: pointer;

    .progress-bar {
      position: absolute;
      height: 100%;
      width: var(--radio-player-progress);
      background-image: linear-gradient(to right, #fff 0%, var(--radio-player-text-color) 100%);
      border-radius: inherit;

      .progress-handle {
        display: none;

        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(50%, -50%);
        width: 18px;
        height: 18px;
        background: var(--radio-player-bg-color);
        border-radius: 50%;
        box-shadow: 0 2px 7px rgb(0 9 27 / 36%), inset 0 0 0 3px #F6931FFF;
        cursor: ew-resize;
      }
    }
  }

  .progress-time {
    font-size: 12px;
    color: var(--radio-player-text-color);
    min-width: 40px;
    text-align: center;
    opacity: 0.9;

    &.current-time {
      margin-right: 8px;
    }

    &.duration {
      margin-left: 8px;
    }
  }

  &:focus-visible {
    .progress-slider {
      outline: 2px dashed var(--radio-player-text-color);
    }
  }

  @media (max-width: 768px) {
    padding: 0 5px;

    .progress-time {
      font-size: 10px;
      min-width: 30px;
    }
  }
}