redbadger/website-honestly

@value badgerRedOnWhite, badgerWhite, badgerBlack, daveGreen, cainYellow, mbpOrange, grey, stuBlue, midBlue from "./_colors.css";
@value timelineDivider from "./_zindex.css";
@value largeScreen from "./_sizes.css";

.divider {
  position: relative;
}

.divider:before {
  padding-left: 2px;
  content: '';
  position: absolute;
  right: -6px;
  width: 45%;
  height: 10px;
  top: -9px;
  transform: translateX(-11%) skew(-40deg);
  background-color: badgerRedOnWhite;
}

.divider:after {
  padding-left: 2px;
  content: '';
  position: absolute;
  right: -0;
  width: 10%;
  height: 10px;
  top: -9px;
  /* background-color: badgerRedOnWhite; */
}

.dividerBlack,
.dividerWhite,
.dividerYellow,
.dividerOrange,
.dividerGreen,
.dividerBlue,
.dividerMidBlue,
.dividerBlackOnTransparent,
.dividerBlackSocialSlice,
.dividerGrey,
.dividerBlackLarge,
.dividerWhiteSmall {
  composes: divider;
}

.dividerBlack:before,
.dividerBlack:after {
  background-color: badgerBlack;
}

.dividerWhite:before,
.dividerWhite:after {
  background-color: badgerWhite;
}

.dividerYellow:before,
.dividerYellow:after {
  background-color: cainYellow;
}

.dividerOrange:before,
.dividerOrange:after {
  background-color: mbpOrange;
}

.dividerGreen:before,
.dividerGreen:after {
  background-color: daveGreen;
}

.dividerBlue:before,
.dividerBlue:after {
  background-color: stuBlue;
}

.dividerMidBlue:before,
.dividerMidBlue:after {
  background-color: midBlue;
}

.dividerGrey:before,
.dividerGrey:after {
  background-color: grey;
}

.dividerBlackOnTransparent:before,
.dividerBlackOnTransparent:after {
  background-color: badgerBlack;
  right: auto;
  left: -6px;
  /** IE 11 fix*/
  top: -1px;
  /** Compensate for the IE11 fix */
  height: 11px;
  z-index: timelineDivider;
}

.dividerBlackSocialSlice:before,
.dividerBlackSocialSlice:after {
  background-color: badgerBlack;
  right: 0;
  left: 352px;
  width: 100%;
}

.dividerBlackLarge:before {
  background-color: badgerBlack;
  display: none;
}

.dividerWhiteSmall:before {
  background-color: badgerWhite;
}

.dividerWhiteSmall:after {
  background-color: badgerWhite;
}

@media largeScreen {
  .dividerBlackLarge:before {
    display: block;
  }

  .dividerWhiteSmall:before {
    display: none;
  }

  .dividerWhiteSmall:after {
    display: none;
  }
}