hr {

margin-top: 2rem;
margin-bottom: 2rem;

}

.u-divider-center {

text-align: center;

} .u-divider-right {

text-align: right;

}

@import “divider-linear-gradient”;

/* HR Styles ————————————*/ .u-hr {

&--linear-gradient {
  height: 1px;
  background-image: linear-gradient(to right, transparent, $g-color-gray-light-v3, transparent);
  border: none;
}
&-dotted {
  border-top-style: dotted;
}
&-dashed {
  border-top-style: dashed;
}
&-db-solid {
  height: 5px;
  border-top: 1px solid $g-color-gray-light-v3;
  border-bottom: 1px solid $g-color-gray-light-v3;
}
&-db-dashed {
  height: 5px;
  border-top: 1px dashed $g-color-gray-light-v2;
  border-bottom: 1px dashed $g-color-gray-light-v2;
}
&-db-dotted {
  height: 5px;
  border-top: 1px dotted $g-color-gray-light-v2;
  border-bottom: 1px dotted $g-color-gray-light-v2;
}

}

/* u-dividers with icons ————————————*/ .u-divider {

position: relative;
border-top-width: 1px;

&-length-short {
  width: 20%;
  margin-left: auto;
  margin-right: auto;
}
&-length-medium {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
&-solid {
  border-top-style: solid;
}
&-dotted {
  border-top-style: dotted;
}
&-dashed {
  border-top-style: dashed;
}
&--linear-gradient {
  height: 1px;
  background-image: linear-gradient(to right, transparent, $g-color-gray-light-v2, transparent);
  border: none;
}
&__icon {
  position: absolute;
  @include px-to-rem(top, -20px);
  left: 0;
  right: auto;
  display: inline-block;
  @include px-to-rem(width, 40px);
  @include px-to-rem(height, 40px);
  @include px-to-rem(font-size, 18px);
  font-style: normal;
  @include px-to-rem(line-height, 40px);
  text-align: center;
  z-index: 1;
}
&-center &__icon {
  left: 50%;
  right: auto;
  @include px-to-rem(margin-left, -20px);
}
&-right &__icon {
  left: auto;
  right: 0;
}
&__icon--bordered {
  border: 1px solid;
}
&__icon--indented {
  box-shadow: 0 0 0 15px $g-bg-color-main;
}

}