$pf-c-divider--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
$pf-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl");

.pf-c-divider {
  // update during breaking change
  --pf-c-divider--Height: var(--pf-global--BorderWidth--sm);
  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
  --pf-c-divider--after--Height: var(--pf-c-divider--Height);
  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);

  // end - update during breaking change

  --pf-c-divider--Display: flex;

  // After
  --pf-c-divider--after--FlexBasis: 100%;
  --pf-c-divider--after--Inset: 0%;

  // Vertical
  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
  --pf-c-divider--m-vertical--after--Width: var(--pf-global--BorderWidth--sm);

  @include pf-hidden-visible(var(--pf-c-divider--Display));

  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  justify-content: center;
  width: 100%;
  border: 0; // removes the default border styling on an hr

  &::after {
    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2));
    align-self: stretch;
    height: var(--pf-c-divider--after--Height);
    content: "";
    background-color: var(--pf-c-divider--after--BackgroundColor);
    justify-self: center;
  }

  &.pf-m-vertical {
    display: inline-flex;
    flex-direction: column;
    width: auto;
    height: inherit;
    min-height: 100%;
    max-height: 100%;

    &::after {
      flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
      width: var(--pf-c-divider--m-vertical--after--Width);
    }
  }

  // stylelint-disable max-nesting-depth
  // Build inset modifiers
  @each $breakpoint, $breakpoint-value in $pf-c-divider--breakpoint-map {
    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");

    @include pf-apply-breakpoint($breakpoint) {
      @each $spacer, $spacer-value in $pf-c-divider--spacer-map {
        @if $spacer == none {
          $spacer-value: 0%;
        }

        &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
          --pf-c-divider--after--Inset: #{$spacer-value};
        }
      }
    }
  }
  // stylelint-enable
}