// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@use "sass:math";
@import "@blueprintjs/icons/lib/scss/variables";
@import "../../common/mixins";
@import "../../common/react-transition";
@import "../../common/variables";

/*
Dialog

Markup:
<!-- this container element fills its parent and centers the .#{$ns}-dialog within it -->
<div class="#{$ns}-dialog-container">
  <div class="#{$ns}-dialog">
    <div class="#{$ns}-dialog-header">
      <span class="#{$ns}-icon-large #{$ns}-icon-inbox"></span>
      <h5 class="#{$ns}-heading">Dialog header</h5>
      <button aria-label="Close" class="#{$ns}-dialog-close-button #{$ns}-button #{$ns}-minimal #{$ns}-icon-cross"></button>
    </div>
    <div class="#{$ns}-dialog-body">
      This dialog hasn't been wired up with any open or close interactions.
      It's just an example of markup and styles.
    </div>
    <div class="#{$ns}-dialog-footer">
      <div class="#{$ns}-dialog-footer-actions">
        <button type="button" class="#{$ns}-button">Secondary button</button>
        <button type="submit" class="#{$ns}-button #{$ns}-intent-primary">Primary button</button>
      </div>
    </div>
  </div>
</div>

Styleguide dialog
*/

$dialog-border-radius: $pt-border-radius * 2 !default;
$dialog-margin: ($pt-grid-size * 3) 0 !default;
$dialog-padding: $pt-grid-size * 1.5 !default;

.#{$ns}-dialog-container {
  $dialog-transition-props: (
    opacity: (0, 1),
    transform: (scale(0.5), scale(1))
  );

  @include react-transition(
    "#{$ns}-overlay",
    $dialog-transition-props,
    $duration: $pt-transition-duration * 3,
    $easing: $pt-transition-ease-bounce,
    $before: "&",
    $after: "> .#{$ns}-dialog"
  );
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100%;
  pointer-events: none;
  user-select: none;
  width: 100%;
}

.#{$ns}-dialog {
  background: $light-gray5;
  border-radius: $dialog-border-radius;
  box-shadow: $pt-dialog-box-shadow;
  display: flex;
  flex-direction: column;
  margin: $dialog-margin;
  pointer-events: all;
  user-select: text;
  width: $pt-grid-size * 50;

  &:focus {
    outline: 0;
  }

  &.#{$ns}-dark,
  .#{$ns}-dark & {
    background: $pt-dark-app-background-color;
    box-shadow: $pt-dark-dialog-box-shadow;
    color: $pt-dark-text-color;
  }

  @media (forced-colors: active) and (prefers-color-scheme: dark) {
    border: 1px solid $pt-high-contrast-mode-border-color;
  }
}

$dialog-header-padding: math.div($pt-grid-size, 2);

.#{$ns}-dialog-header {
  align-items: center;
  background: $white;
  border-radius: $dialog-border-radius $dialog-border-radius 0 0;
  box-shadow: 0 1px 0 $pt-divider-black;
  display: flex;
  flex: 0 0 auto;
  min-height: $pt-button-height + $dialog-header-padding * 2;
  padding: $dialog-header-padding;
  padding-left: $dialog-padding;
  z-index: 0;

  .#{$ns}-icon-large,
  .#{$ns}-icon {
    color: $pt-icon-color;
    flex: 0 0 auto;
    margin-left: -3px;
    margin-right: $dialog-padding * 0.5;
  }

  .#{$ns}-heading {
    @include overflow-ellipsis();
    flex: 1 1 auto;
    line-height: inherit;
    margin: 0;

    &:last-child {
      margin-right: $dialog-padding;
    }
  }

  .#{$ns}-dark & {
    background: $dark-gray3;
    box-shadow: inset 0 0 0 1px $pt-dark-divider-white;

    .#{$ns}-icon-large,
    .#{$ns}-icon {
      color: $pt-dark-icon-color;
    }
  }

  @media (forced-colors: active) and (prefers-color-scheme: dark) {
    border-bottom: 1px solid $pt-high-contrast-mode-border-color;
  }
}