$device-type: "weapp";
$types: "primary", "secondary", "success", "info", "warning", "danger";
$position-total: 100;
$z-total: 5;
$order-total: 12;
$spacing-total: 40;
$sizing-total: 100;
$grid-cols-total: 12;
$grid-rows-total: 6;
$gap-total: 100;
$border-variations: 0, 2, 4, 8;
$divide-variations: 2, 4, 8;
$ring-variations: 0, 1, 2, 4, 8;
$unit-ratio: 0;
$unit: "";
$wild-card: "*";
$root-name: ":root";
$sibling-selector: "~";
$ring-inset: "var(--ring-inset, /*!*/ /*!*/)";

@if $device-type == "pc" {
  $unit-ratio: 0.25;
  $unit: rem;
}

@if $device-type == "sp" {
  $unit-ratio: 1;
  $unit: vw;
}

@if $device-type == "weapp" {
  $unit-ratio: 9;
  $unit: rpx;
  $wild-card: "view";
  $root-name: "page";
  $sibling-selector: "+";
  $ring-inset: "";
}

#{$root-name} {
  --primary-color: hsl(196, 78%, 61%);
  --secondary-color: hsl(217, 15%, 83%);
  --success-color: hsl(165, 58%, 55%);
  --info-color: hsl(214, 79%, 65%);
  --warning-color: hsl(43, 100%, 66%);
  --danger-color: hsl(354, 81%, 63%);
  --primary-color-darker: hsl(196, 68%, 54%);
  --secondary-color-darker: hsl(215, 13%, 70%);
  --success-color-darker: hsl(165, 55%, 48%);
  --info-color-darker: hsl(214, 68%, 58%);
  --warning-color-darker: hsl(39, 97%, 62%);
  --danger-color-darker: hsl(354, 67%, 56%);
  --primary-color-lighter: hsl(196, 78%, 81%);
  --secondary-color-lighter: hsl(214, 16%, 92%);
  --success-color-lighter: hsl(165, 58%, 75%);
  --info-color-lighter: hsl(214, 79%, 85%);
  --warning-color-lighter: hsl(43, 100%, 86%);
  --danger-color-lighter: hsl(354, 81%, 83%);
  --secondary-color-darkest: hsl(215, 11%, 30%);
  --secondary-color-lightest: hsl(220, 1%, 98%);
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
