/* #region ===== Cards ===== */

.macro-card {
  background-color: var(--table-bg);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  padding: clamp(6px, 4.29px + 0.536vw, 12px) clamp(8px, 7.14px + 0.536vw, 14px);
  box-sizing: border-box;
  width: clamp(120px, 108.57px + 3.571vw, 160px);
}

.macro-card.over-goal {
  background-color: rgba(255, 0, 0, 0.462);
}

.macro-header {
  display: flex;
  align-items: center;
  gap: clamp(4px, 2.86px + 0.357vw, 8px);
}

.macro-val {
  font-size: var(--text);
  color: white;
}

/* #endregion */

/* #region ===== Carousel ===== */

.section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.3);
  font-size: clamp(16px, 14.28px + 0.536vw, 22px);
  width: clamp(200px, 142.86px + 17.857vw, 400px);
  margin: 10px auto clamp(0px, -2.857px + 0.893vw, 8px);
}

.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.carousel-section {
  margin: 10px 0 20px 0;
}

.carousel-track-wrap {
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
}

.carousel-track-wrap::-webkit-scrollbar {
  display: none;
}

.carousel-track {
  display: flex;
  gap: clamp(8px, 5.71px + 0.714vw, 16px);
  -webkit-overflow-scrolling: touch;
  width: fit-content;
  margin: 0 auto;
}

.table-button-wrap {
  margin: clamp(5px, 3.57px + 0.446vw, 10px) 0 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* #endregion */

/* #region ===== SVGs & Fill Bar */

.macro-bar {
  height: 3px;
  background: rgb(94, 93, 93);
  border-radius: 2px;
  margin-top: 8px;
}

.macro-fill {
  height: 3px;
  border-radius: 2px;
  background: white;
  width: 0%;
  transition: width 0.3s ease;
}

#bar-cal {
  background: var(--light-blue);
}

#bar-pro {
  background: var(--orange);
}

#bar-carb {
  background: #facc15;
}

#bar-fat {
  background: var(--green);
}

.cal-svg {
  width: var(--svg);
  height: var(--svg);
  color: var(--light-blue);
  flex-shrink: 0;
}

.pro-svg {
  width: var(--svg);
  height: var(--svg);
  color: var(--orange);
  flex-shrink: 0;
}

.carb-svg {
  width: var(--svg);
  height: var(--svg);
  color: #facc15;
  flex-shrink: 0;
}

.fat-svg {
  width: var(--svg);
  height: var(--svg);
  color: var(--green);
  flex-shrink: 0;
}

/* #endregion */