.offcanvas {
  --#{$prefix}offcanvas-header-gap: #{$offcanvas-header-gap};
  --#{$prefix}offcanvas-footer-gap: #{$offcanvas-footer-gap};
  --#{$prefix}offcanvas-separator-margin-x: #{$offcanvas-separator-margin-x};
  --#{$prefix}offcanvas-separator-height: #{$offcanvas-separator-height};
  --#{$prefix}offcanvas-separator-bg: #{$offcanvas-separator-bg};

  .offcanvas-header {
    flex-direction: row;
    gap: var(--#{$prefix}offcanvas-header-gap);
    align-items: center;
    justify-content: space-between;

    &:has(.d-offcanvas-close:only-child) {
      justify-content: flex-end;
    }
  }

  .d-offcanvas-separator {
    height: var(--#{$prefix}offcanvas-separator-height);
    margin: 0 var(--#{$prefix}offcanvas-separator-margin-x);
    background: var(--#{$prefix}offcanvas-separator-bg);
  }

  .offcanvas-body {
    padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
  }

  .d-offcanvas-footer {
    display: flex;
    gap: var(--#{$prefix}offcanvas-footer-gap);
    padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
  }

  .d-offcanvas-action-fill > * {
    flex: 1;
  }

  .d-offcanvas-action-start {
    justify-content: flex-start;
  }

  .d-offcanvas-action-end {
    justify-content: flex-end;
  }
}