.divider {
  border-bottom: 1px solid $color--grey;
}

.divider--top {
  border-bottom: 0;
  border-top: 1px solid $color--grey;
}

.divider--is-hidden {
  border-bottom-color: transparent;
}

// background/color mappings
.bg-brand {
  &--yellow,
  &--turquoise,
  &--red {
    .divider {
      border-color: $color-alpha--two-30;
    }
  }

  &--blue,
  &--dark-blue {
    .divider {
      border-color: $color-alpha--four-50;
    }
  }

  &--off-white {
    .divider {
      border-color: $color--grey;
    }
  }
}
