/* Radio Select Component
   ========================================================================== */

.category-item {
  flex: 0 0 22%;
}

.category-selector {
  position: absolute;
  transform: scale(0);
}

.category-selector + label,
.category-selector + button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-gray);
  border-radius: var(--border-radius);
  background-color: var(--color-bg);
  font: inherit;
}

.category-selector:checked + label {
  background-color: var(--color-blue);
  color: var(--color-always-white);
}

.category-selector:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.category-selector:disabled + button {
  opacity: 0.5;
}