/*
 * Smartpack Design System
 * Module CSS commun pour les formulaires et configurateurs Smartpack.
 */

.smartpack-form,
.smartpack-silhouette,
.smartpack-configurator-v7-7-1,
.smartpack-configurator-calage-v8 {
  --spds-black: #050505;
  --spds-yellow: #fffc63;
  --spds-white: #ffffff;
  --spds-soft: #f5f3f4;
  --spds-border: #f5f3f4;
  --spds-muted: rgba(5, 5, 5, .58);
  --spds-radius: 10px;
  --spds-focus: rgba(255, 252, 99, .78);
  --spds-thumb-shadow: 0 3px 8px rgba(5, 5, 5, .14);
}

.smartpack-form {
  --spf-black: var(--spds-black);
  --spf-yellow: var(--spds-yellow);
  --spf-white: var(--spds-white);
  --spf-border: var(--spds-border);
  --spf-muted: var(--spds-muted);
  --spf-radius: var(--spds-radius);
}

.smartpack-silhouette {
  --sps-black: var(--spds-black);
  --sps-yellow: var(--spds-yellow);
  --sps-white: var(--spds-white);
  --sps-border: var(--spds-border);
  --sps-muted: var(--spds-muted);
  --sps-soft: var(--spds-soft);
  --sps-radius: var(--spds-radius);
}

.smartpack-configurator-v7-7-1 {
  --bg: var(--spds-soft);
  --yellow: var(--spds-yellow);
  --black: var(--spds-black);
  --white: var(--spds-white);
  --line: var(--spds-border);
  --soft: #333333;
  --muted: #555555;
  border-radius: var(--spds-radius);
}

.smartpack-configurator-calage-v8 {
  --bg: var(--spds-soft);
  --yellow: var(--spds-yellow);
  --black: var(--spds-black);
  --white: var(--spds-white);
  --line: var(--spds-border);
  --soft: #333333;
  --muted: #555555;
  border-radius: var(--spds-radius);
}

.smartpack-configurator-v7-7-1 .sp-card,
.smartpack-configurator-v7-7-1 .sp-stage,
.smartpack-configurator-v7-7-1 .sp-info-block,
.smartpack-configurator-v7-7-1 .sp-price-box,
.smartpack-configurator-v7-7-1 .sp-modal-card,
.smartpack-configurator-v7-7-1 .sp-upload-box,
.smartpack-configurator-v7-7-1 .sp-dieline-wrap,
.smartpack-configurator-v7-7-1 .sp-gallery-card,
.smartpack-configurator-v7-7-1 .sp-gallery-item,
.smartpack-configurator-v7-7-1 .sp-color-card,
.smartpack-configurator-v7-7-1 .sp-gamme,
.smartpack-configurator-v7-7-1 .sp-alert,
.smartpack-configurator-v7-7-1 .sp-btn,
.smartpack-configurator-v7-7-1 .sp-choice button,
.smartpack-configurator-v7-7-1 .sp-switch button,
.smartpack-configurator-v7-7-1 .sp-select,
.smartpack-configurator-v7-7-1 .sp-input,
.smartpack-configurator-v7-7-1 .sp-textarea,
.smartpack-configurator-v7-7-1 .sp-value-input {
  border-radius: var(--spds-radius) !important;
}

.smartpack-configurator-v7-7-1 .sp-card,
.smartpack-configurator-v7-7-1 .sp-stage,
.smartpack-configurator-v7-7-1 .sp-info-block,
.smartpack-configurator-v7-7-1 .sp-price-box,
.smartpack-configurator-v7-7-1 .sp-select,
.smartpack-configurator-v7-7-1 .sp-input,
.smartpack-configurator-v7-7-1 .sp-textarea,
.smartpack-configurator-v7-7-1 .sp-value-input,
.smartpack-configurator-v7-7-1 .sp-alert {
  border-color: var(--spds-border) !important;
}

.smartpack-configurator-v7-7-1 .sp-select:focus,
.smartpack-configurator-v7-7-1 .sp-input:focus,
.smartpack-configurator-v7-7-1 .sp-textarea:focus,
.smartpack-configurator-v7-7-1 .sp-value-input:focus {
  border-color: var(--spds-black) !important;
  outline: 0;
  box-shadow: 0 0 0 3px var(--spds-focus);
}

.smartpack-configurator-v7-7-1 input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px rgba(5, 5, 5, .22), var(--spds-thumb-shadow) !important;
}

.smartpack-configurator-v7-7-1 input[type="range"]::-moz-range-thumb {
  box-shadow: 0 0 0 1px rgba(5, 5, 5, .22), var(--spds-thumb-shadow) !important;
}

.smartpack-configurator-v7-7-1 .sp-price-main-cell {
  background: var(--spds-black);
}

.smartpack-configurator-calage-v8 .sp-card,
.smartpack-configurator-calage-v8 .sp-stage,
.smartpack-configurator-calage-v8 .sp-info-block,
.smartpack-configurator-calage-v8 .sp-price-box,
.smartpack-configurator-calage-v8 .sp-product-workbench,
.smartpack-configurator-calage-v8 .sp-modal-card,
.smartpack-configurator-calage-v8 .sp-upload-box,
.smartpack-configurator-calage-v8 .sp-dieline-wrap,
.smartpack-configurator-calage-v8 .sp-gallery-card,
.smartpack-configurator-calage-v8 .sp-gallery-item,
.smartpack-configurator-calage-v8 .sp-color-card,
.smartpack-configurator-calage-v8 .sp-gamme,
.smartpack-configurator-calage-v8 .sp-alert,
.smartpack-configurator-calage-v8 .sp-btn,
.smartpack-configurator-calage-v8 .sp-choice button,
.smartpack-configurator-calage-v8 .sp-switch button,
.smartpack-configurator-calage-v8 .sp-select,
.smartpack-configurator-calage-v8 .sp-input,
.smartpack-configurator-calage-v8 .sp-textarea,
.smartpack-configurator-calage-v8 .sp-value-input {
  border-radius: var(--spds-radius) !important;
}

.smartpack-configurator-calage-v8 .sp-card,
.smartpack-configurator-calage-v8 .sp-stage,
.smartpack-configurator-calage-v8 .sp-info-block,
.smartpack-configurator-calage-v8 .sp-price-box,
.smartpack-configurator-calage-v8 .sp-product-workbench,
.smartpack-configurator-calage-v8 .sp-select,
.smartpack-configurator-calage-v8 .sp-input,
.smartpack-configurator-calage-v8 .sp-textarea,
.smartpack-configurator-calage-v8 .sp-value-input,
.smartpack-configurator-calage-v8 .sp-alert {
  border-color: var(--spds-border) !important;
}

.smartpack-configurator-calage-v8 .sp-select:focus,
.smartpack-configurator-calage-v8 .sp-input:focus,
.smartpack-configurator-calage-v8 .sp-textarea:focus,
.smartpack-configurator-calage-v8 .sp-value-input:focus {
  border-color: var(--spds-black) !important;
  outline: 0;
  box-shadow: 0 0 0 3px var(--spds-focus);
}

.smartpack-configurator-calage-v8 input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px rgba(5, 5, 5, .22), var(--spds-thumb-shadow) !important;
}

.smartpack-configurator-calage-v8 input[type="range"]::-moz-range-thumb {
  box-shadow: 0 0 0 1px rgba(5, 5, 5, .22), var(--spds-thumb-shadow) !important;
}

.smartpack-configurator-calage-v8 .sp-price-main-cell {
  background: var(--spds-black);
}