/* Toolbar en button styling */

#numberblock-selector,
#size-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  justify-content: center;
  align-items: center;
}

#numberblock-selector {
  flex-direction: row;
}

#size-selector {
  flex-direction: column;
}

.numberblock-btn,
.size-btn {
  background: #2a2a2a;
  border: 3px solid transparent;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.numberblock-btn img,
.size-btn img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.numberblock-btn.selected,
.size-btn.selected {
  border-color: #00ff00;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
  transform: scale(1.1);
}

.numberblock-btn:hover,
.size-btn:hover {
  background: #3a3a3a;
}

.numberblock-btn:active,
.size-btn:active {
  transform: scale(0.95);
}

/* Rainbow button voor Numberblock 7 */
@keyframes rainbow-border {
  0% { border-color: #FF0000; box-shadow: 0 0 15px rgba(255, 0, 0, 0.5); }
  14.28% { border-color: #FF8C00; box-shadow: 0 0 15px rgba(255, 140, 0, 0.5); }
  28.56% { border-color: #FFFF00; box-shadow: 0 0 15px rgba(255, 255, 0, 0.5); }
  42.84% { border-color: #32CD32; box-shadow: 0 0 15px rgba(50, 205, 50, 0.5); }
  57.12% { border-color: #4169E1; box-shadow: 0 0 15px rgba(65, 105, 225, 0.5); }
  71.4% { border-color: #663399; box-shadow: 0 0 15px rgba(102, 51, 153, 0.5); }
  85.68% { border-color: #4B0082; box-shadow: 0 0 15px rgba(75, 0, 130, 0.5); }
  100% { border-color: #FF0000; box-shadow: 0 0 15px rgba(255, 0, 0, 0.5); }
}

.rainbow-btn {
  animation: rainbow-border 7s linear infinite;
  border-width: 3px;
  border-style: solid;
}

.rainbow-btn.selected {
  transform: scale(1.1);
}

/* Fallback styling voor ontbrekende images */
.size-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

.size-number {
  font-size: 24px;
  font-weight: bold;
}

.size-dimensions {
  font-size: 12px;
  color: #888;
}