/*
 * Hr tag / line
 *
 */

@use '../../../style/elements/ui-spacing.scss';
@use './hr-mixins.scss';

.dnb-hr {
  --hr-color: var(--token-color-stroke-neutral-subtle);

  &--surface-dark {
    --hr-color: var(--token-color-stroke-neutral-ondark);
  }

  @include hr-mixins.hrStyle();

  &--dashed::after {
    background-image: linear-gradient(
      to right,
      var(--hr-color, grey) 50%,
      transparent 0%
    );
    background-size: 0.5rem 0.0625rem;
    background-repeat: repeat-x;
    background-color: transparent;
  }

  &--breakout::after {
    left: -100vw;
    box-shadow: 100vw 0 0 0 var(--hr-color, grey);
    border-radius: 0;
  }

  --thickness: calc(var(--hr-thickness, 0.0625rem) + var(--modifier, 0px));

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