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

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

    .ctrl-btn {
      height: 2rem;
      width: 2rem;
      background-size: 1.5rem !important;
      cursor: pointer;
      border-radius: 0.5rem;

      &:hover {
        background-color: $red;
      }
    }

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

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