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;
  }
}