$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");

@mixin pf-c-divider--m-horizontal {
  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);

  width: 100%; // update to var breaking change
  height: auto; // update to var breaking change

  &::after {
    flex-basis:
      calc(
        var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2)
      ); // update at breaking change
  }
}

@mixin pf-c-divider--m-vertical {
  --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
  --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
  --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);

  width: auto; // update to var breaking change
  height: inherit; // update to var at breaking change

  &::after {
    flex-basis:
      calc(
        var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset)
      ); // update at breaking change
  }
}

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

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

  // Vertical
  --pf-c-divider--m-vertical--after--FlexBasis: 100%; // remove at breaking change

  // Horizontal mixin
  --pf-c-divider--m-horizontal--Display: flex;
  --pf-c-divider--m-horizontal--FlexDirection: row;
  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height); // update at breaking change
  --pf-c-divider--m-horizontal--after--Width: auto;

  // Vertical mixin
  --pf-c-divider--m-vertical--Display: inline-flex;
  --pf-c-divider--m-vertical--FlexDirection: column;
  --pf-c-divider--m-vertical--after--Height: auto;
  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base); // remove at breaking change

  // Vertical
  @include pf-hidden-visible(var(--pf-c-divider--Display));
  @include pf-c-divider--m-horizontal; // set to default to horizontal

  display: var(--pf-c-divider--Display);
  flex-direction: var(--pf-c-divider--FlexDirection);
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  justify-content: center;
  border: 0; // removes the default border styling on an hr

  &::after {
    align-self: stretch;
    width: var(--pf-c-divider--after--Width);
    height: var(--pf-c-divider--after--Height);
    content: "";
    background-color: var(--pf-c-divider--after--BackgroundColor);
    justify-self: center;
  }

  // stylelint-disable max-nesting-depth

  @each $breakpoint, $breakpoint-value in $pf-c-divider--breakpoint-map {
    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");

    @if ($breakpoint != "base") {
      @include pf-apply-breakpoint($breakpoint) {
        &.pf-m-horizontal#{$breakpoint-name} {
          @include pf-c-divider--m-horizontal;
        }
      }
    }

    @include pf-apply-breakpoint($breakpoint) {
      &.pf-m-vertical#{$breakpoint-name} {
        @include pf-c-divider--m-vertical;
      }
    }

    @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
}
