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

@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 space-mixins.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);
  }
}