/* Shared paper choice grids and compact swatch choices. */

.vk-paper-choice-grid {
  min-height: var(--vk-size-form-control);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--vk-analysis-choice-size), 1fr));
  gap: var(--vk-analysis-choice-gap);
  padding: var(--vk-control-gap-inline);
  box-sizing: border-box;
  background: var(--vk-paper-panel-bg);
}

.vk-paper-choice-btn {
  position: relative;
  width: 100%;
  height: var(--vk-analysis-choice-size);
  border: 1px solid var(--vk-paper-lift-button-bg);
  border-radius: var(--vk-paper-control-radius, 8px);
  background: var(--vk-paper-lift-button-bg);
  box-shadow: none;
  color: var(--vk-text-primary);
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform 160ms cubic-bezier(0.2, 0, 0.2, 1),
    box-shadow 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

.vk-paper-choice-btn:not(.is-selected):not(:disabled):hover {
  transform: translateY(calc(-1 * var(--vk-paper-lift-hover-y)));
  box-shadow: var(--vk-shadow-paper-hover);
}

.vk-paper-choice-btn:not(.is-selected):not(:disabled):active {
  box-shadow: none;
  transform: translateY(0);
}

.vk-paper-choice-btn.is-selected {
  border-color: var(--vk-paper-lift-button-bg);
  box-shadow: var(--vk-shadow-paper-active);
  transform: translateY(calc(-1 * var(--vk-paper-lift-normal-y)));
}

.vk-paper-choice-btn.is-disabled {
  display: none;
}

.tool-card-value-picker-zones,
.tool-card-value-picker-shapes,
.tool-card-value-picker-groups {
  grid-template-columns: repeat(auto-fit, minmax(var(--vk-analysis-choice-size), 1fr));
}

.tool-card-zone-swatch {
  border-color: transparent;
}

.tool-card-zone-swatch.is-selected {
  border-color: transparent;
}