@import url("https://fonts.googleapis.com/css?family=Yesteryear:400normal&swap=true");

@font-face {
  font-family: "SomeFont";
  font-weight: 700;
  font-style: normal;
  src: local("SomeFont"), url("/diez/assets/SomeFont.ttf");
}

$bindings-image: url("/diez/assets/image with spaces.jpg");
$bindings-image-2x: url("/diez/assets/image with spaces@2x.jpg");
$bindings-image-3x: url("/diez/assets/image with spaces@3x.jpg");
$bindings-image-width: 246px;
$bindings-image-height: 246px;
$bindings-image-size: 246px 246px;
$bindings-missing-image: url("/diez/assets/unexistent-image-fallback-test.jpg");
$bindings-missing-image-2x: url("/diez/assets/unexistent-image-fallback-test@2x.jpg");
$bindings-missing-image-3x: url("/diez/assets/unexistent-image-fallback-test@3x.jpg");
$bindings-missing-image-width: 0px;
$bindings-missing-image-height: 0px;
$bindings-missing-image-size: 0px 0px;
$bindings-linear-gradient: linear-gradient(90deg, hsla(0, 100%, 50%, 1) 0%, hsla(240, 100%, 50%, 1) 100%);
$bindings-point-x: 0.5;
$bindings-point-x-px: 0.5px;
$bindings-point-x-pt: 0.5pt;
$bindings-point-x-em: 0.5em;
$bindings-point-x-rem: 0.5rem;
$bindings-point-y: 0.5;
$bindings-point-y-px: 0.5px;
$bindings-point-y-pt: 0.5pt;
$bindings-point-y-em: 0.5em;
$bindings-point-y-rem: 0.5rem;
$bindings-size-width: 400;
$bindings-size-width-px: 400px;
$bindings-size-width-pt: 400pt;
$bindings-size-width-em: 400em;
$bindings-size-width-rem: 400rem;
$bindings-size-height: 300;
$bindings-size-height-px: 300px;
$bindings-size-height-pt: 300pt;
$bindings-size-height-em: 300em;
$bindings-size-height-rem: 300rem;
$bindings-shadow: 1px 2px 3px hsla(120, 100%, 50%, 0.5);
$bindings-shadow-filter: drop-shadow(1px 2px 1.5px hsla(120, 100%, 50%, 0.5));
$bindings-color: hsla(0, 0%, 0%, 1);
$bindings-file: url("/diez/assets/SomeFile.txt");
$bindings-referenced-color: hsla(0, 0%, 6.2745098039215685%, 1);

@mixin bindings-image-background-image {
  background-image: url("/diez/assets/image with spaces.jpg");
  width: 246px;
  height: 246px;
  background-size: 246px 246px;

  @media (min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    background-image: url("/diez/assets/image with spaces@2x.jpg");
  }

  @media (min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    background-image: url("/diez/assets/image with spaces@3x.jpg");
  }
}

@mixin bindings-missing-image-background-image {
  background-image: url("/diez/assets/unexistent-image-fallback-test.jpg");
  width: 0px;
  height: 0px;
  background-size: 0px 0px;

  @media (min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    background-image: url("/diez/assets/unexistent-image-fallback-test@2x.jpg");
  }

  @media (min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    background-image: url("/diez/assets/unexistent-image-fallback-test@3x.jpg");
  }
}

@mixin bindings-typograph {
  font-family: "SomeFont","Verdana",serif;
  font-weight: 700;
  font-style: normal;
  font-size: 50px;
  color: hsla(60, 100%, 50%, 1);
  letter-spacing: 0px;
  text-align: start;
  text-decoration: none;
}

@mixin bindings-tall-typograph {
  font-family: "SomeFont","Verdana",serif;
  font-weight: 700;
  font-style: normal;
  font-size: 50px;
  color: hsla(0, 0%, 0%, 1);
  letter-spacing: 10px;
  text-align: start;
  text-decoration: underline line-through;
  line-height: 100px;
}

@mixin bindings-google-fonts-typograph {
  font-family: "Yesteryear",sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  color: hsla(163.80952380952382, 100%, 87.6470588235294%, 1);
  letter-spacing: 0px;
  text-align: start;
  text-decoration: none;
}

@mixin bindings-linear-gradient-background {
  background: linear-gradient(90deg, hsla(0, 100%, 50%, 1) 0%, hsla(240, 100%, 50%, 1) 100%);
}

@mixin bindings-linear-gradient-background-image {
  background-image: linear-gradient(90deg, hsla(0, 100%, 50%, 1) 0%, hsla(240, 100%, 50%, 1) 100%);
}

@mixin bindings-size {
  width: 400px;
  height: 300px;
}

@mixin bindings-shadow-box-shadow {
  box-shadow: 1px 2px 3px hsla(120, 100%, 50%, 0.5);
}

@mixin bindings-shadow-text-shadow {
  text-shadow: 1px 2px 3px hsla(120, 100%, 50%, 0.5);
}

@mixin bindings-shadow-filter {
  filter: drop-shadow(1px 2px 1.5px hsla(120, 100%, 50%, 0.5));
}

@mixin bindings-panel {
  box-shadow: 2px 3px 4px hsla(0, 100%, 50%, 1);
  border-radius: 5px;
  background: hsla(240, 100%, 50%, 1);
}

@mixin bindings-color-background-color {
  background-color: hsla(0, 0%, 0%, 1);
}

@mixin bindings-color-color {
  color: hsla(0, 0%, 0%, 1);
}

@mixin bindings-referenced-color-background-color {
  background-color: hsla(0, 0%, 6.2745098039215685%, 1);
}

@mixin bindings-referenced-color-color {
  color: hsla(0, 0%, 6.2745098039215685%, 1);
}


