.presets {
	height:20px; width:40px; display:inline-block;cursor:pointer;
}
.p1 {
	background: #79A70A;
	background: linear-gradient(#9BC90D 0%, #79A70A 100%);	
}
.p2 {
	background: #1e5799;
	background: linear-gradient(#2989d8 0%, #1e5799 100%);	
}
.p3 {
	background: #8F0808;
	background: linear-gradient(#F70505 0%, #8F0808 100%);	
}
.p4 {
	background: #808080;
	background: linear-gradient(#B6BAC9 0%, #808080 100%);	
}
.p5 {
	background: #087F8F;
	background: linear-gradient(#05EFF7 0%, #087F8F 100%);	
}
.p6 {
	background: #8F5408;
	background: linear-gradient(#F79E05 0%, #8F5408 100%);	
}

.radio-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-group label {
  padding: 3px 10px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  border-radius: 5px;
  transition: all 0.2s ease;
  white-space: nowrap;
  background-color: var(--primary-50);
}

.radio-group label:hover {
  border-color: var(--primary-400);
}

input[type="radio"]:checked + label {
  border-color: #007bff;
  background-color: var(--primary-200);
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}