/*
 * overlays.scss
 * -----------------------------------------------
*/
.layer-overlay {
  position: relative;

  &::before {
    background: rgba($black-111, .50) none repeat scroll 0 0;
    content: " ";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: $zindex-layer-overlay-before;
  }
  &.overlay-light {
    &::before {
      background-color: rgba($white-base, .40);
    }
  }
  &.overlay-lighter {
    &::before {
      background-color: rgba($white-base, .30);
    }
  }
  &.overlay-deep {
    &::before {
      background-color: rgba($white-base, .90);
    }
  }
  /* overlay-dark */
  &.overlay-dark {
    &::before {
      background-color: rgba($black-111, .85);
    }
  }
  &.overlay-dark-1 {
    &::before {
      background-color: rgba($black-111, .10);
    }
  }
  &.overlay-dark-2 {
    &::before {
      background-color: rgba($black-111, .20);
    }
  }
  &.overlay-dark-3 {
    &::before {
      background-color: rgba($black-111, .30);
    }
  }
  &.overlay-dark-4 {
    &::before {
      background-color: rgba($black-111, .40);
    }
  }
  &.overlay-dark-5 {
    &::before {
      background-color: rgba($black-111, .50);
    }
  }
  &.overlay-dark-6 {
    &::before {
      background-color: rgba($black-111, .60);
    }
  }
  &.overlay-dark-7 {
    &::before {
      background-color: rgba($black-111, .70);
    }
  }
  &.overlay-dark-8 {
    &::before {
      background-color: rgba($black-111, .80);
    }
  }
  &.overlay-dark-9 {
    &::before {
      background-color: rgba($black-111, .90);
    }
  }
  /* overlay-white */
  &.overlay-white {
    &::before {
      background-color: rgba($white-base, .40);
    }
  }
  &.overlay-white-1 {
    &::before {
      background-color: rgba($white-base, .10);
    }
  }
  &.overlay-white-2 {
    &::before {
      background-color: rgba($white-base, .20);
    }
  }
  &.overlay-white-3 {
    &::before {
      background-color: rgba($white-base, .30);
    }
  }
  &.overlay-white-4 {
    &::before {
      background-color: rgba($white-base, .40);
    }
  }
  &.overlay-white-5 {
    &::before {
      background-color: rgba($white-base, .50);
    }
  }
  &.overlay-white-6 {
    &::before {
      background-color: rgba($white-base, .60);
    }
  }
  &.overlay-white-7 {
    &::before {
      background-color: rgba($white-base, .70);
    }
  }
  &.overlay-white-8 {
    &::before {
      background-color: rgba($white-base, .80);
    }
  }
  &.overlay-white-9 {
    &::before {
      background-color: rgba($white-base, .90);
    }
  }
  &.layer-pattern {
    &::before {
      background-image: url(../images/pattern1.png);
      background-color: rgba($black, .60);
    }
  }
  &.layer-pattern2 {
    &::before {
      background-image: url(../images/pattern2.png);
      background-color: rgba($black, .80);
    }
  }
  &.layer-pattern3 {
    &::before {
      background-image: url(../images/pattern3.png);
      background-color: rgba($black, .80);
    }
  }
  &.maximage-layer-overlay {
    &::before {
      z-index: $zindex-maximage-layer-overlay-before;
    }
  }
  &.overlay-blue {
    &::before {
      background-color: rgba(1,162,208,0.9);
    }
  }
  &.overlay-blue-light {
    &::before {
      background-color: rgba(1,162,208,0.45);
    }
  }
  &.overlay-pink {
    &::before {
      background-color: rgba(235,110,142,0.9);
    }
  }
  &.overlay-pink-light {
    &::before {
      background-color: rgba(235,110,142,0.45);
    }
  }
  &.overlay-brown {
    &::before {
      background-color: rgba(60,171,111,0.9);
    }
  }
  &.overlay-brown-light {
    &::before {
      background-color: rgba(60,171,111,0.45);
    }
  }
  &.overlay-yellow {
    &::before {
      background-color: rgba(255,187,34,0.9);
    }
  }
  &.overlay-yellow-light {
    &::before {
      background-color: rgba(255,187,34,0.45);
    }
  }
  &.overlay-green {
    &::before {
      background-color: rgba(16,196,92,0.9);
    }
  }
  &.overlay-green-light {
    &::before {
      background-color: rgba(16,196,92,0.45);
    }
  }

  &.overlay-theme-color-1 {
    &::before {
      background-color: rgba(173,216,230,.9);
    }
  }

  &.overlay-theme-color-2 {
    &::before {
      background-color: rgba(230,173,188,0.9);
    }
  }

  &.overlay-theme-color-3 {
    &::before {
      background-color: rgba(230,216,173,0.9);
    }
  }

}
.half-divider .overlay-theme-color-1,.half-divider .overlay-theme-color-2 ,.half-divider .overlay-theme-color-3 {
  content: "";
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
}

.layer-overlay {
  z-index: 0;
  &:before {
    z-index: -1;
  }
}