.divider {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: returnColorCSSVar('gray-20');

  @include bg-variants() {
    border-color: variant-property('divider');
  }
}

@include viewport--l {
  .l\:divider {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: returnColorCSSVar('gray-20');

    @include bg-variants() {
      border-color: variant-property('divider');
    }
  }
}

.divider--top {
  border-bottom: 0;
  border-top-width: 1px;
  border-top-style: solid;
}

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

// background/color mappings
// ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.

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