@use '../../style/theming';

// MARK: Variables
$dbx-popup-controls-height: 33px;
$dbx-popup-content-padding: 8px;
$dbx-popup-content-padding-top: 2px;

$dbx-popup-container-margin: 16px;
$dbx-popup-controls-vertical-padding: 4px;

// MARK: Mixin
@mixin core() {
  /// @dbx-utility popup-content
  /// @intent popup body — `<dbx-popup-content>` host that caps the inner content at `app-height` and clips overflow; pair with `.dbx-popup-content-container` for the inner scroll region and `.dbx-popup-controls` for the header strip
  /// @role layout
  /// @component DbxPopupContentComponent
  /// @scope component-class
  .dbx-popup-content {
    box-sizing: border-box;
    overflow: hidden;
    max-height: theming.$app-height;
  }

  .dbx-popup-content-container {
    max-height: calc(#{theming.$app-height} - #{$dbx-popup-controls-height});
    padding: $dbx-popup-content-padding;
    padding-top: $dbx-popup-content-padding-top;
    overflow: auto;
    box-sizing: border-box;
  }

  .dbx-popup-controls {
    height: $dbx-popup-controls-height;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: $dbx-popup-controls-vertical-padding $dbx-popup-content-padding;
    border-bottom: 1px solid var(--mat-sys-outline-variant);
    box-sizing: border-box;
  }

  .dbx-popup-control-buttons {
    min-width: 220px;
    display: inline-block;
    text-align: right;

    button.mdc-button.mat-mdc-button {
      min-height: 28px;
    }
  }

  .dbx-popup-controls {
    color: var(--mat-sys-on-surface);
    background: var(--mat-sys-surface);
  }

  .dbx-popup-controls-header {
    @include theming.limit-text();
  }
}

@mixin theme($theme-config) {
}