@design-factory/design-factory 20.0.2 → 21.0.0-next.1

package/styles/scss/components/pagination/_pagination.scss

@@ -1,251 +0,0 @@
-@use 'sass:meta';
-
-@mixin replace-span-innertext-with-icon($iconContent) {
-  .page-link[aria-label] {
-    // TODO: remove the condition during DEZFACT-1675
-    @if ($iconContent == $df-pagination-first-icon-code or $iconContent == $df-pagination-last-icon-code) {
-      @extend %df-icon-style;
-      vertical-align: unset;
-      line-height: var(--#{$prefix}body-line-height);
-    } @else {
-      font-family: $df-font-awesome-font-family;
-    }
-
-    span:after {
-      content: $iconContent;
-    }
-  }
-}
-
-.pagination {
-  --#{$prefix}pagination-size: #{$df-pagination-size-base};
-  --#{$prefix}pagination-item-border-radius: #{$df-pagination-border-radius};
-  --#{$prefix}pagination-item-font-size: #{$font-size-base};
-  --#{$prefix}pagination-icon-offset-start: #{$df-pagination-icon-offset-start-base};
-  --#{$prefix}pagination-icon-translateX-offset: #{$df-pagination-icon-translateX-offset};
-  --#{$prefix}pagination-between-list-item-space: #{$df-pagination-between-list-item-space};
-  --#{$prefix}custom-pages-sm-vertical-alignment: #{$df-custom-pages-sm-vertical-alignment};
-  --#{$prefix}pagination-direction-border-radius: #{$df-pagination-direction-border-radius};
-  --#{$prefix}pagination-margin-bottom: #{$df-pagination-margin-bottom};
-  --#{$prefix}pagination-icon-color: #{$df-pagination-icon-color};
-  --#{$prefix}pagination-icon-hover-color: #{$df-pagination-icon-hover-color};
-  --#{$prefix}box-shadow-color: #{$df-pagination-box-shadow-color};
-  --#{$prefix}pagination-active-link-bg: #{$df-pagination-active-link-bg};
-  --#{$prefix}pagination-active-link-font-weight: #{$df-pagination-active-link-font-weight};
-
-  margin-bottom: var(--#{$prefix}pagination-margin-bottom);
-
-  .page-item {
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      &.active > .page-link {
-        font-weight: var(--#{$prefix}pagination-active-link-font-weight);
-
-        &:hover {
-          background-color: var(--#{$prefix}pagination-hover-bg);
-          color: var(--#{$prefix}pagination-hover-color);
-        }
-      }
-    } @else {
-      &.active > .page-link {
-        &,
-        &:hover {
-          background-color: var(--#{$prefix}pagination-active-bg);
-          color: var(--#{$prefix}pagination-active-color);
-        }
-      }
-    }
-
-    .page-link {
-      color: var(--#{$prefix}pagination-color); //override link behaviour
-      height: var(--#{$prefix}pagination-size);
-      min-width: var(--#{$prefix}pagination-size);
-      border-radius: var(--#{$prefix}pagination-item-border-radius);
-      line-height: var(--#{$prefix}pagination-size);
-      font-size: var(--#{$prefix}pagination-item-font-size);
-      border: none;
-      text-align: center;
-      margin: 0 0.0625rem; // 0.0625rem = 1px with font-size=16
-      &:hover {
-        z-index: 1;
-        text-decoration: $df-pagination-hover-text-decoration;
-        color: var(--#{$prefix}pagination-hover-color); //override link behaviour
-        background-color: var(--#{$prefix}pagination-hover-bg); //override link behaviour
-        border-color: var(--#{$prefix}pagination-hover-border-color); //override link behaviour
-      }
-
-      &:active {
-        --#{$prefix}pagination-hover-bg: var(--#{$prefix}pagination-active-link-bg);
-      }
-
-      &:focus {
-        box-shadow: none;
-      }
-
-      &:focus-visible {
-        z-index: 2;
-
-        &:hover {
-          --#{$prefix}pagination-focus-bg: var(--#{$prefix}pagination-hover-bg);
-        }
-        box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
-      }
-
-      z-index: initial; // overides z-index: 2 so that it is below the active page link
-    }
-
-    &.disabled {
-      cursor: $df-pagination-disabled-cursor;
-      & > .page-link {
-        color: var(--#{$prefix}pagination-disabled-color);
-        pointer-events: none;
-        background-color: var(--#{$prefix}pagination-disabled-bg);
-        border-color: var(--#{$prefix}pagination-disabled-border-color);
-        font-weight: inherit;
-        --#{$prefix}link-disabled-display: block;
-      }
-    }
-
-    .page-link[aria-label] {
-      border-radius: var(--#{$prefix}pagination-direction-border-radius) !important;
-
-      span {
-        font-size: 0px; // use this trick because visibility: hidden is not working correctly on IE (it also hides the :after content)
-        text-decoration: none;
-
-        &:after {
-          color: var(--#{$prefix}pagination-icon-color);
-          position: absolute;
-          font-size: var(
-            --#{$prefix}pagination-item-font-size
-          ) !important; // needs to override the styles of @extend %df-icon-style;
-          @include ltr {
-            left: var(
-              --#{$prefix}pagination-icon-offset-start
-            ) !important; // needs to override the styles of @extend %df-icon-style;
-            transform: translateX(var(--#{$prefix}pagination-icon-translateX-offset));
-          }
-          @include rtl {
-            right: var(--#{$prefix}pagination-icon-offset-start) !important;
-            transform: translateX(calc(-1 * var(--#{$prefix}pagination-icon-translateX-offset)));
-          }
-          line-height: var(--#{$prefix}pagination-size) !important;
-          // needs to override the styles of @extend %df-icon-style;
-        }
-      }
-
-      &:hover {
-        span:after {
-          color: var(--#{$prefix}pagination-icon-hover-color);
-          text-decoration: $df-pagination-hover-text-decoration;
-        }
-      }
-    }
-  }
-
-  .page-item.active .page-link {
-    z-index: 2;
-  }
-
-  .page-item.disabled .page-link span:after {
-    color: $pagination-disabled-color !important;
-  }
-
-  // TODO: First Part When icons customization feature will be added to ng-bootstrap, use it and remove following css
-  // Link to ng-bootsrap issue : https://github.com/ng-bootstrap/ng-bootstrap/issues/899
-  // css style to modify the arrow texts with DF icons
-  // first case: boundaryLinks = false
-  li.page-item:nth-of-type(1) {
-    @include ltr {
-      @include replace-span-innertext-with-icon($df-pagination-previous-icon-code);
-    }
-    @include rtl {
-      @include replace-span-innertext-with-icon($df-pagination-next-icon-code);
-    }
-  }
-
-  li.page-item:nth-last-of-type(1) {
-    @include ltr {
-      @include replace-span-innertext-with-icon($df-pagination-next-icon-code);
-    }
-    @include rtl {
-      @include replace-span-innertext-with-icon($df-pagination-previous-icon-code);
-    }
-  }
-
-  .page-item + .page-item {
-    @include ltr {
-      margin-left: var(--#{$prefix}pagination-between-list-item-space);
-    }
-    @include rtl {
-      margin-right: var(--#{$prefix}pagination-between-list-item-space);
-    }
-  }
-
-  &.pagination-lg {
-    --#{$prefix}pagination-size: #{$df-pagination-size-lg};
-    --#{$prefix}pagination-item-border-radius: #{$df-pagination-border-radius-lg};
-    --#{$prefix}pagination-item-font-size: #{$df-pagination-font-size-lg};
-    --#{$prefix}pagination-icon-offset-start: #{$df-pagination-icon-offset-start-lg};
-    --#{$prefix}custom-pages-input-minwidth: #{$df-custom-pages-input-minwidth-lg};
-  }
-
-  &.pagination-sm {
-    --#{$prefix}pagination-size: #{$df-pagination-size-sm};
-    --#{$prefix}pagination-item-border-radius: #{$df-pagination-border-radius-sm};
-    --#{$prefix}pagination-item-font-size: #{$font-size-sm};
-    --#{$prefix}pagination-icon-offset-start: #{$df-pagination-icon-offset-start-sm};
-    --#{$prefix}custom-pages-input-minwidth: #{$df-custom-pages-input-minwidth-sm};
-  }
-}
-
-.df-custom-pages {
-  .pagination-sm {
-    align-items: var(--#{$prefix}custom-pages-sm-vertical-alignment);
-
-    .page-item {
-      height: fit-content;
-    }
-  }
-}
-
-// TODO: Second Part
-// second case: boundaryLinks = true
-.with-boundary-links {
-  .pagination {
-    .page-item:nth-of-type(1) {
-      @include ltr {
-        @include replace-span-innertext-with-icon($df-pagination-first-icon-code);
-      }
-      @include rtl {
-        @include replace-span-innertext-with-icon($df-pagination-last-icon-code);
-      }
-    }
-
-    .page-item:nth-of-type(2) {
-      @include ltr {
-        @include replace-span-innertext-with-icon($df-pagination-previous-icon-code);
-      }
-      @include rtl {
-        @include replace-span-innertext-with-icon($df-pagination-next-icon-code);
-      }
-    }
-
-    .page-item:nth-last-of-type(2) {
-      @include ltr {
-        @include replace-span-innertext-with-icon($df-pagination-next-icon-code);
-      }
-      @include rtl {
-        @include replace-span-innertext-with-icon($df-pagination-previous-icon-code);
-      }
-    }
-
-    .page-item:nth-last-of-type(1) {
-      @include ltr {
-        @include replace-span-innertext-with-icon($df-pagination-last-icon-code);
-      }
-      @include rtl {
-        @include replace-span-innertext-with-icon($df-pagination-first-icon-code);
-      }
-    }
-  }
-}

package/styles/scss/components/pagination/_pagination.variables.scss

@@ -1,35 +0,0 @@
-$df-pagination-size-base: 2.25rem !default;
-$df-pagination-size-sm: 1.75rem !default;
-$df-pagination-size-lg: 3rem !default;
-
-$df-pagination-hover-text-decoration: underline !default;
-$df-pagination-active-link-bg: var(--#{$prefix}pagination-hover-bg) !default;
-$df-pagination-active-link-font-weight: bold !default;
-
-$df-pagination-border-radius: $pagination-border-radius !default;
-$df-pagination-border-radius-sm: $pagination-border-radius-sm !default;
-$df-pagination-border-radius-lg: $pagination-border-radius-lg !default;
-
-$df-pagination-box-shadow-color: $pagination-focus-box-shadow !default;
-$df-pagination-boundaries-focus-box-shadow: $pagination-focus-box-shadow !default;
-
-$df-pagination-icon-offset-start-base: 50% !default;
-$df-pagination-icon-offset-start-lg: $df-pagination-icon-offset-start-base !default;
-$df-pagination-icon-offset-start-sm: $df-pagination-icon-offset-start-base !default;
-$df-pagination-icon-color: $df-font-icon-color !default;
-$df-pagination-icon-hover-color: $df-font-icon-color !default;
-$df-pagination-icon-translateX-offset: -$df-pagination-icon-offset-start-base !default;
-
-$df-pagination-first-icon-code: '\ef22' !default; // .icon-df-first-item
-$df-pagination-previous-icon-code: '\f053' !default; // .fa-chevron-left
-$df-pagination-next-icon-code: '\f054' !default; // .fa-chevron-right
-$df-pagination-last-icon-code: '\ef23' !default; // .icon-df-last-item
-
-$df-pagination-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
-$df-pagination-direction-border-radius: 50% !default;
-$df-pagination-between-list-item-space: 0.2rem !default;
-$df-pagination-margin-bottom: 0px !default; // reset the ul margin.
-$df-custom-pages-sm-vertical-alignment: center !default;
-
-$df-pagination-font-size-lg: $font-size-lg !default;
-$df-pagination-font-size-active-lg: $font-size-lg !default;

package/styles/scss/components/pagination/_pagination_container.scss

@@ -1,17 +0,0 @@
-#{$df-css-namespace-selector} {
-  .active > .page-link {
-    z-index: 3;
-    color: var(--#{$prefix}pagination-active-color);
-    @include gradient-bg(var(--#{$prefix}pagination-active-bg));
-    border-color: var(--#{$prefix}pagination-active-border-color);
-    &:hover {
-      background-color: var(--#{$prefix}pagination-hover-bg);
-    }
-  }
-  .disabled > .page-link {
-    color: var(--#{$prefix}pagination-disabled-color);
-    pointer-events: none;
-    background-color: var(--#{$prefix}pagination-disabled-bg);
-    border-color: var(--#{$prefix}pagination-disabled-border-color);
-  }
-}

package/styles/scss/components/popover/_popover.mixin.scss

@@ -1,46 +0,0 @@
-@mixin popover-mixin {
-  @if $enable-shadows == false {
-    box-shadow: var(--#{$prefix}popover-box-shadow);
-  }
-  padding: var(--#{$prefix}popover-padding);
-  @include media-breakpoint-down(sm) {
-    --#{$prefix}popover-max-width: #{$df-popover-max-width-mobile};
-  }
-
-  &.bs-popover-top:not(.bs-popover-top-left):not(.bs-popover-top-right) .arrow,
-  &.bs-popover-bottom:not(.bs-popover-bottom-left):not(.bs-popover-bottom-right) .arrow {
-    transform: translateX(-50%);
-  }
-
-  &.bs-popover-start:not(.bs-popover-start-top):not(.bs-popover-start-bottom) .arrow,
-  &.bs-popover-end:not(.bs-popover-end-top):not(.bs-popover-end-bottom) .arrow {
-    transform: translateY(-50%);
-  }
-
-  .popover-header {
-    margin: var(--#{$prefix}popover-header-margin);
-    font-size: var(--#{$prefix}popover-header-font-size);
-    line-height: var(--#{$prefix}popover-header-line-height);
-  }
-
-  .popover-body {
-    margin: var(--#{$prefix}popover-body-margin);
-    font-size: var(--#{$prefix}popover-body-font-size);
-  }
-  &.popover-sm {
-    --#{$prefix}popover-padding: #{$df-popover-sm-padding};
-    --#{$prefix}popover-header-margin: #{$df-popover-header-sm-margin};
-    --#{$prefix}popover-header-font-size: #{$df-popover-header-font-size-sm};
-    --#{$prefix}popover-body-font-size: #{$font-size-sm};
-    --#{$prefix}popover-body-margin: #{$df-popover-body-sm-margin};
-    --#{$prefix}popover-border-radius: var(--#{$prefix}popover-border-radius-sm);
-  }
-  &.popover-lg {
-    --#{$prefix}popover-padding: #{$df-popover-lg-padding};
-    --#{$prefix}popover-header-margin: #{$df-popover-header-lg-margin};
-    --#{$prefix}popover-header-font-size: #{$h2-font-size};
-    --#{$prefix}popover-body-font-size: #{$font-size-lg};
-    --#{$prefix}popover-body-margin: #{$df-popover-body-lg-margin};
-    --#{$prefix}popover-border-radius: var(--#{$prefix}popover-border-radius-lg);
-  }
-}

package/styles/scss/components/popover/_popover.scss

@@ -1,45 +0,0 @@
-@import 'popover.mixin';
-
-.popover {
-  --#{$prefix}popover-margin: #{$df-popover-margin};
-  --#{$prefix}popover-padding: #{$df-popover-padding};
-  --#{$prefix}popover-header-line-height: #{$df-popover-header-line-height};
-  --#{$prefix}popover-header-margin: #{$df-popover-header-default-margin};
-  --#{$prefix}popover-body-margin: #{$df-popover-body-default-margin};
-  --#{$prefix}popover-header-font-size: #{$df-popover-header-font-size};
-  --#{$prefix}popover-body-font-size: #{$font-size-base};
-  --#{$prefix}popover-border-radius-sm: #{$df-popover-border-radius-sm};
-  --#{$prefix}popover-border-radius-lg: #{$df-popover-border-radius-lg};
-
-  @include popover-mixin();
-}
-
-// BS override
-.bs-popover-top {
-  > .popover-arrow {
-    bottom: calc((var(--#{$prefix}popover-arrow-height) * -1));
-  }
-}
-
-.bs-popover-end {
-  > .popover-arrow {
-    left: calc((var(--#{$prefix}popover-arrow-height) * -1));
-  }
-}
-
-.bs-popover-bottom {
-  > .popover-arrow {
-    top: calc((var(--#{$prefix}popover-arrow-height) * -1));
-  }
-}
-
-.bs-popover-start {
-  > .popover-arrow {
-    right: calc((var(--#{$prefix}popover-arrow-height) * -1));
-  }
-}
-// End of override
-
-.popover-header {
-  border-bottom: none;
-}

package/styles/scss/components/popover/_popover.variables.scss

@@ -1,25 +0,0 @@
-$df-popover-margin: 0.625rem !default;
-$df-popover-max-width-mobile: 270px !default;
-$df-popover-max-width: 50vw !default;
-
-$df-popover-padding: 1rem !default;
-$df-popover-sm-padding: 0.75rem !default;
-$df-popover-lg-padding: 1.5rem !default;
-
-$df-popover-header-line-height: 1.2 !default;
-
-$df-popover-header-sm-margin: 0 0 0.5rem !default;
-$df-popover-body-sm-margin: 0 !default;
-
-$df-popover-header-default-margin: 0 0 0.75rem !default;
-$df-popover-body-default-margin: 0 !default;
-
-$df-popover-header-lg-margin: 0 0 1rem !default;
-$df-popover-body-lg-margin: 0 !default;
-
-$df-popover-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
-$df-popover-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
-
-$df-popover-header-font-size: $h3-font-size !default;
-$df-popover-header-font-size-sm: $h4-font-size !default;
-$df-popover-header-font-size-lg: $h2-font-size !default;

package/styles/scss/components/popover/_popover_container.scss

@@ -1,214 +0,0 @@
-@import 'popover.mixin';
-
-// TODO update this file with the new file from bootstrap
-// Ref file is popover.scss in BS folder.
-// Attention I backport the fix from the override in popover.scss in this file too
-#{$df-css-namespace-selector} {
-  &.popover {
-    @include popover-mixin();
-    // scss-docs-start popover-css-vars
-    --#{$prefix}popover-zindex: #{$zindex-popover};
-    --#{$prefix}popover-max-width: #{$popover-max-width};
-    @include rfs($popover-font-size, --#{$prefix}popover-font-size);
-    --#{$prefix}popover-bg: #{$popover-bg};
-    --#{$prefix}popover-border-width: #{$popover-border-width};
-    --#{$prefix}popover-border-color: #{$popover-border-color};
-    --#{$prefix}popover-border-radius: #{$popover-border-radius};
-    --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
-    --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
-    --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
-    --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
-    @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
-    --#{$prefix}popover-header-color: #{$popover-header-color};
-    --#{$prefix}popover-header-bg: #{$popover-header-bg};
-    --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
-    --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
-    --#{$prefix}popover-body-color: #{$popover-body-color};
-    --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
-    --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
-    --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
-
-    --#{$prefix}popover-margin: #{$df-popover-margin};
-    --#{$prefix}popover-padding: #{$df-popover-padding};
-    --#{$prefix}popover-header-line-height: #{$df-popover-header-line-height};
-    --#{$prefix}popover-header-margin: #{$df-popover-header-default-margin};
-    --#{$prefix}popover-body-margin: #{$df-popover-body-default-margin};
-    --#{$prefix}popover-header-font-size: #{$h3-font-size};
-    --#{$prefix}popover-body-font-size: #{$font-size-base};
-    // scss-docs-end popover-css-vars
-
-    z-index: var(--#{$prefix}popover-zindex);
-    display: block;
-    max-width: var(--#{$prefix}popover-max-width);
-    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-    // So reset our font and text properties to avoid inheriting weird values.
-    @include reset-text();
-    @include font-size(var(--#{$prefix}popover-font-size));
-    // Allow breaking very long words so they don't overflow the popover's bounds
-    word-wrap: break-word;
-    background-color: var(--#{$prefix}popover-bg);
-    background-clip: padding-box;
-    border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
-    @include border-radius(var(--#{$prefix}popover-border-radius));
-    @include box-shadow(var(--#{$prefix}popover-box-shadow));
-
-    &.popover-arrow {
-      display: block;
-      width: var(--#{$prefix}popover-arrow-width);
-      height: var(--#{$prefix}popover-arrow-height);
-
-      &::before,
-      &::after {
-        position: absolute;
-        display: block;
-        content: '';
-        border-color: transparent;
-        border-style: solid;
-        border-width: 0;
-      }
-    }
-  }
-
-  &.bs-popover-top {
-    > .popover-arrow {
-      bottom: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-
-      &::before,
-      &::after {
-        border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
-      }
-
-      &::before {
-        bottom: 0;
-        border-top-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        bottom: var(--#{$prefix}popover-border-width);
-        border-top-color: var(--#{$prefix}popover-bg);
-      }
-    }
-  }
-
-  /* rtl:begin:ignore */
-  &.bs-popover-end {
-    > .popover-arrow {
-      left: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-      width: var(--#{$prefix}popover-arrow-height);
-      height: var(--#{$prefix}popover-arrow-width);
-
-      &::before,
-      &::after {
-        border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height)
-          calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
-      }
-
-      &::before {
-        left: 0;
-        border-right-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        left: var(--#{$prefix}popover-border-width);
-        border-right-color: var(--#{$prefix}popover-bg);
-      }
-    }
-  }
-
-  /* rtl:end:ignore */
-
-  &.bs-popover-bottom {
-    > .popover-arrow {
-      top: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-
-      &::before,
-      &::after {
-        border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
-      }
-
-      &::before {
-        top: 0;
-        border-bottom-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        top: var(--#{$prefix}popover-border-width);
-        border-bottom-color: var(--#{$prefix}popover-bg);
-      }
-    }
-
-    // This will remove the popover-header's border just below the arrow
-    .popover-header::before {
-      position: absolute;
-      top: 0;
-      left: 50%;
-      display: block;
-      width: var(--#{$prefix}popover-arrow-width);
-      margin-left: calc(var(--#{$prefix}popover-arrow-width) * -0.5); // stylelint-disable-line function-disallowed-list
-      content: '';
-      border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
-    }
-  }
-
-  /* rtl:begin:ignore */
-  &.bs-popover-start {
-    > .popover-arrow {
-      right: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-      width: var(--#{$prefix}popover-arrow-height);
-      height: var(--#{$prefix}popover-arrow-width);
-
-      &::before,
-      &::after {
-        border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0
-          calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
-      }
-
-      &::before {
-        right: 0;
-        border-left-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        right: var(--#{$prefix}popover-border-width);
-        border-left-color: var(--#{$prefix}popover-bg);
-      }
-    }
-  }
-
-  /* rtl:end:ignore */
-
-  &.bs-popover-auto {
-    &[data-popper-placement^='top'] {
-      @extend .bs-popover-top;
-    }
-    &[data-popper-placement^='right'] {
-      @extend .bs-popover-end;
-    }
-    &[data-popper-placement^='bottom'] {
-      @extend .bs-popover-bottom;
-    }
-    &[data-popper-placement^='left'] {
-      @extend .bs-popover-start;
-    }
-  }
-
-  // Offset the popover to account for the popover arrow
-  &.popover-header {
-    padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
-    margin-bottom: 0; // Reset the default from Reboot
-    @include font-size(var(--#{$prefix}popover-header-font-size));
-    color: var(--#{$prefix}popover-header-color);
-    background-color: var(--#{$prefix}popover-header-bg);
-    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
-    @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  &.popover-body {
-    padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
-    color: var(--#{$prefix}popover-body-color);
-  }
-}