@use '~@moda/om';

.Divider {
  $self: &;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  &:before,
  &:after {
    content: '';
    flex: 1;
    border: none;
    background-color: om.color(elephant);
    height: 1px;
    width: 50%;
  }

  &__text {
    width: auto;
    padding: 0 om.space(4);
  }

  &--two-line {
    &:before,
    &:after {
      $space-between-lines: 0.175rem;
      $offset: calc($space-between-lines / 2);
      transform: translateY(calc(-#{$offset}));
      background-color: om.color(ink);
      box-shadow: 0 $space-between-lines 0 0 om.color(ink);
    }
  }

  &--no-line {
    &:before,
    &:after {
      display: none;
    }
  }

  &--line-above {
    padding: om.space(4) 0;

    &:before,
    &:after {
      display: none;
    }
  }

  &__content--line-above {
    border-top: 1px solid om.color('silver');
    padding-top: om.space(6);
    width: 100%;
    text-align: center;

    @include om.breakpoint(sm, $prop: max-width) {
      padding: om.space(4) 0;
    }
  }
}