.b-bar {
  height: 100%;
  padding: $small;

  .grid {
    background-color: $primary;
    display: grid;
    height: 100%;
    padding-right: $small;

    @include phone-only {
      grid-template-columns: 1fr 9.2rem;
    }

    .controlsx {
      width: 100%;
      overflow: hidden;
      display: grid;
      grid-template-columns: 12rem 1fr 12rem;
      align-items: center;
      padding: $small;

      .progress-bottom {
        display: flex;
        align-items: center;
      }

      .progress-bottom {
        width: 100%;

        .durationx {
          background-color: $black;
          padding: $smaller;
          border-radius: 0.5rem;
          margin: 0 $small 0 $small;
          font-size: 0.8rem;
          min-width: 2.5rem;
        }
      }
    }

    .r-group {
      display: flex;
      align-items: center;
      gap: $small;

      #heart {
        background-image: url(../../icons/heart.svg);
      }

      #add-to {
        background-image: url(../../icons/plus.svg);
      }

      #repeat {
        background-image: url(../../icons/repeat.svg);
      }
    }

    .volume-group {
      @include tablet-portrait {
        display: none;
      }
    }
  }
}