.buttons {
  display: grid;
  gap: calc(var(--spacer) / 4);
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  padding-bottom: calc(var(--spacer) / 8);
}

.button {
  width: auto;
  padding: calc(var(--spacer) / 3) calc(var(--spacer) / 4) !important;
  border-radius: var(--border-radius);
  text-transform: none;
}

.button,
.button:hover,
.button:active {
  color: var(--color-secondary);
  border: 1px solid var(--border-color);
}

.button svg {
  width: var(--font-size-h4);
  height: var(--font-size-h4);
  fill: currentColor;
  margin-bottom: calc(var(--spacer) / 5);
}

.button.selected {
  color: var(--font-color-text);
  border-color: var(--color-secondary);
}

.appearances div[class*='boxSelectionsWrapper'] {
  padding-bottom: calc(var(--spacer) / 8);
}
