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

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

// MARK: Mixin
@mixin core() {
  .dbx-detach-content {
    box-sizing: border-box;
    overflow: hidden;
    max-height: theming.$app-height;
  }

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

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

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

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

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

  .dbx-detach-overlay {
    height: 100%;
    overflow: hidden;

    // The moved component host element (an arbitrary tag that defaults to inline) needs to fill
    // the fixed-height overlay pane so its content chain can establish a flex column that scrolls.
    > * {
      display: block;
      height: 100%;
    }

    // Inside the fixed-height overlay (vs. the viewport-based in-page mode), the content fills the
    // pane and the container flexes to scroll within it rather than against the viewport height.
    .dbx-detach-content {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .dbx-detach-content-container {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
    }
  }

  .dbx-detach-overlay-host {
    display: block;
    height: 100%;
  }
}

@mixin theme($theme-config) {
  // No theme-specific styles for the detach interaction at present.
}