.b-bar {
  height: 100%;
  background-color: $gray;

  .grid {
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 2fr 1fr;

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

    .info {
      display: flex;
      padding-top: $small;
      margin-left: $small;

      .art {
        width: 3rem;
        height: 3rem;
        background-image: url("../../images/null.webp");
      }

      .separator {
        margin: 2px;
      }

      .desc {
        width: calc(100% - 5rem);
        margin-left: $small;
        display: flex;
        align-items: center;
        margin-top: -$small;

        .artists {
          font-size: 0.8rem;
          color: $white;
        }
      }
    }

    .controlsx {
      width: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      margin: $small;
      padding: $small;

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

      .controls-bottom {
        width: min-content;
      }

      .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;

      & > * {
        height: 2rem;
        width: 2rem;
        background-size: 1.2rem !important;
        background-position: 45% 50%;
        cursor: pointer;
        border-radius: 0.5rem;

        &:hover {
          background-color: rgb(170, 50, 50);
        }
      }

      .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;
      }
    }
  }
}