@use '../../../style/elements/ui-spacing.scss';
@import '../../../components/space/style/space-mixins.scss';

@mixin hrStyle() {
  position: relative;
  padding: 0;
  width: 100%; // when nested in a flex container, we need this.
  height: 0;

  display: flow-root; // avoid margin collapsing on Safari

  @include spaceReset();

  border: 0;

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;

    height: var(--thickness);

    background-color: var(--hr-color, grey);
    border-radius: calc(var(--thickness) / 2);
  }
}

@mixin hrTag() {
  hr {
    @include hrStyle();
  }

  .dnb-spacing hr {
    @include ui-spacing.defaultSpacing();
  }
}