@import "~Breakpoints";
@import "~Colors";

.right, .left {
  z-index: -1;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  svg:first-child {
    position: absolute;
    width: 25%;
  }
  svg:last-child {
    position: absolute;
    width: 90%;
  }
}

.right {
  right: 0;
  svg:first-child {
    left: 90%;
  }
  svg:last-child {
    right: 10%;

  }
}

.left {
  left: 0;
  svg:first-child {
    right: 90%;
  }
  svg:last-child {
    left: 10%;

  }
  //right: calc(100% - 10%);
}

.primary, .secondary, .gray {
  svg {
    transition: all .5s ease;
  }

}

.primary {
  svg {
    fill: $brand-primary;
  }
}

.secondary {
  svg {
    fill: $brand-secondary;
  }
}

.gray {
  svg {
    fill: $gray-light;
  }
}

.wide {
  composes: primary;
  svg:first-child {
    width: 75%;
  }
  svg:last-child {
    width: 25%;
  }
}

.thin {
  svg:first-child {
    width: 10%;
  }
  //svg:last-child {
  //  width: 80%;
  //}
  &.double {
    svg:last-child {
      width: 80%;
    }
  }
}

.transparent {
  opacity: .75;
}