// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`cssnext-example.css 1`] = `
====================================options=====================================
parsers: ["css"]
printWidth: 80
                                                                                | printWidth
=====================================input======================================
/* custom properties */
:root{--fontSize: 1rem;
  --mainColor       :#12345678;
--highlightColor:hwb(190, 35%, 20%);
}

/* custom media queries */
@custom-media

--viewport-medium(width<=50rem);

/* some var() & calc() */
body{color:var(--mainColor);
    font-size:var(--fontSize);
 line-height: calc(var(--fontSize) * 1.5);
padding: calc((var(--fontSize) / 2) + 1px)}

/* custom media query usage */
@media (--viewport-medium) {
body {font-size: calc(var(--fontSize) * 1.2); }
}
/* custom selectors */
@custom-selector :--heading h1,h2,h3,    h4,h5,h6;
:--heading { margin-top:0 }

/* colors stuff */
a{
color:var(--highlightColor);
    transition:color 1s;
}
a:hover{color  :gray(255,50%) }
a:active{color : rebeccapurple }
a:any-link { color:color(var(--highlightColor) blackness(+ 20%)) }

/* font stuff */
h2 {font-variant-caps:small-caps;
}table{font-variant-numeric: lining-nums;
}
/* filters */
.blur{filter:blur(4px)}.sepia{
filter: sepia(.8);}

=====================================output=====================================
/* custom properties */
:root {
  --fontSize: 1rem;
  --mainColor: #12345678;
  --highlightColor: hwb(190, 35%, 20%);
}

/* custom media queries */
@custom-media --viewport-medium(width<=50rem);

/* some var() & calc() */
body {
  color: var(--mainColor);
  font-size: var(--fontSize);
  line-height: calc(var(--fontSize) * 1.5);
  padding: calc((var(--fontSize) / 2) + 1px);
}

/* custom media query usage */
@media (--viewport-medium) {
  body {
    font-size: calc(var(--fontSize) * 1.2);
  }
}
/* custom selectors */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading {
  margin-top: 0;
}

/* colors stuff */
a {
  color: var(--highlightColor);
  transition: color 1s;
}
a:hover {
  color: gray(255, 50%);
}
a:active {
  color: rebeccapurple;
}
a:any-link {
  color: color(var(--highlightColor) blackness(+ 20%));
}

/* font stuff */
h2 {
  font-variant-caps: small-caps;
}
table {
  font-variant-numeric: lining-nums;
}
/* filters */
.blur {
  filter: blur(4px);
}
.sepia {
  filter: sepia(0.8);
}

================================================================================
`;
