@use '../utils' as *;

/*----------------------------------------*/
/* rock dashboard card 
/*----------------------------------------*/
.rock-dashboard-card {
  padding: 30px;
  // background: #2D2D31;
  background: rgba($white, $alpha: 0.08);
  mix-blend-mode: normal;
  border: 1px solid rgba($white, $alpha: 0.08);
  @include border-radius(20px);
  @media #{$xxs} {
    padding: 20px;
  }
}
.rock-dashboard-title-inner {
  @include flexbox();
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 20px 20px;
  .description {
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
  }
}
.rock-dashboard-tile {
  font-size: 18px;
  color: var(--td-white);
}
.single-progress {
  .progress {
    height: 10px;
    background: rgba($white, $alpha: 0.2);
    border: 1px rgba($white, $alpha: 0.08);
    border-radius: 172px;
    .progress-bar {
      background: linear-gradient(135deg,rgba(253, 216, 25, 1) 0%, rgba(248, 23, 23, 1) 100%);
      border-radius: 4.5px;
      opacity: 0.6;
      box-shadow: inset 4px -4px 10px 0px rgba(255, 255, 255, 0.1),
      inset -4px 4px 10px 0px rgba($color: $white, $alpha: .1);
    }
  }
}
.timeline-grid {
  display: grid;
  grid-template-columns: auto 172px auto;
  align-items: center;
  gap: 8px;
  width: max-content;
}