/* Grid

========================================================================== */

// Grid background .grid {

background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3) 1px, transparent 1px);
background-position: left top;
background-repeat: repeat;
background-size: 100% #{$leading + 'px'};
background-size: 100% #{$leading-rem + 'rem'};

@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
  $leading: $leading-desktop;
  $leading-rem: $leading-rem-desktop;

  background-size: 100% #{$leading + 'px'};
  background-size: 100% #{$leading-rem + 'rem'};
}

}

// Double grid background .grid-double {

@extend .grid;
background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3) 1px, transparent 1px, transparent #{ .5 * $leading + 'px'}, hsla(200, 100%, 50%, .2) #{ .5 * $leading + 'px'}, transparent #{ .5 * $leading + 1 + 'px'}, transparent #{$leading + 'px'});

@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
  $leading: $leading-desktop;
  $leading-rem: $leading-rem-desktop;

  background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3) 1px, transparent 1px, transparent #{ .5 * $leading + 'px'},  hsla(200, 100%, 50%, .2) #{ .5 * $leading + 'px'}, transparent #{ 0.5 * $leading + 1 + 'px'}, transparent #{$leading + 'px'});
}

}

// Grid button .toggleWrapper {

@if $edit-mode == true {
  display: block;
} @else if $edit-mode == false {
  display: none;
}
position: fixed;
top: #{$leading + 'px'};
right: #{$leading + 'px'};
background-color: #231F20;
border-radius: 25px;
padding: 0 10px 0 20px;
height: 32px;

@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
  right: #{$leading-desktop + 'px'};
  top: #{$leading-desktop + 'px'};
}

}

.btnToggleGrid {

background: url("../../assets/images/grid-icons.png") top right no-repeat;
background-size: 32px;
display: block;
font-size: 14px;
text-decoration: none;
padding-right: 35px;
height: 32px;
line-height: 34px;
font-family: Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
color: #fff;

@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
  $leading: $leading-desktop;
  $leading-rem: $leading-rem-desktop;

  top: #{$leading + 'px'};
  right: #{$leading + 'px'};
}

&:hover {
  color: #fff;
}

&:active {
  color: #f00;
}

}

.double-grid {

background-position-y: -32px;

}

.grid-off {

background-position-y: -64px;

}