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

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

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

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

  .modal-footer {
    gap: var(--#{$prefix}modal-footer-gap);
    padding: var(--#{$prefix}modal-footer-padding);
    > * {
      margin: 0;
    }
  }

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

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

  .d-modal-action-center {
    justify-content: center;
  }

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

.d-portal {
  .modal {
    display: block;
  }
}