@import "../colors.css";
@import "../typography.css";

:root {
  --switch-label-left: 15px;
  --switch-label-font-family: var(--title-font-family);

  --switch-width: 40px;
  --switch-height: 21px;
  --switch-radius: 10px;
  --switch-bullet-width: 11px;
  --switch-bullet-height: 11px;
  --switch-bullet-off: 5px;
  --switch-bullet-on: calc(var(--switch-width) - 16px);

  --switch-border-color: var(--color-squanchy-gray-20);
  --switch-bullet-on-color: var(--color-white);
  --switch-bullet-off-color: var(--color-squanchy-gray-200);
  --switch-bullet-on-background: var(--color-picklerick-green-100);
  --switch-bullet-off-background: var(--color-white);
  --switch-disabled-color: var(--color-squanchy-gray-400);
  --switch-disabled-background: var(--color-white);
}