/* #region ===== Wrappers & Combined ===== */

.table-btn-wrapper {
  display: flex;
  flex-direction: row;
  gap: clamp(5px, 3.57px + 0.446vw, 10px);
}

.table-btn {
  all: unset;
  display: flex;
  cursor: pointer;
  display: flex;
  flex-direction: row;
}

.add-food-label,
.clear-all-label,
.undo-label {
  font-size: var(--text);
}

.add-food-btn,
.clear-all-btn,
.undo-btn {
  all: unset;
  display: flex;
  cursor: pointer;
  padding: clamp(2px, 1.71px + 0.089vw, 3px) clamp(4px, 3.43px + 0.179vw, 6px);
  border-radius: clamp(4px, 3.43px + 0.179vw, 6px);
  align-items: center;
  gap: 3px;
}

.add-food-svg,
.clear-all-svg,
.undo-svg {
  width: clamp(14px, 12.29px + 0.536vw, 20px);
  height: clamp(14px, 12.29px + 0.536vw, 20px);
}

/* #endregion */

/* #region ===== Add Food ===== */

.add-food-btn {
  background: var(--green);
}

.add-food-svg,
.add-food-label {
  color: black;
}

/* #endregion */

/* #region ===== Clear All ===== */

.clear-all-btn {
  background: red;
}

.clear-all-svg,
.clear-all-label {
  color: white;
}

/* #endregion */

/* #region ===== Undo ===== */

.undo-btn {
  background: var(--light-blue);
}

.undo-svg,
.undo-label {
  color: black;
}

/* #endregion */