// 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-background-color: $light-gray5 !default;
$dialog-border-radius: $pt-border-radius !default;
$dialog-margin: ($pt-spacing * 8) 0 !default;
$dialog-padding: $pt-spacing * 4 !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: $dialog-background-color;
  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-spacing * 125;

  &: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: $pt-spacing;

.#{$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 {
    flex: 0 0 auto;
    margin-left: -$pt-spacing;
    margin-right: $dialog-padding * 0.5;

    // only apply light color to icons that are not intent-specific
    &:not([class*="#{$ns}-intent"]) {
      color: $pt-icon-color;
    }
  }

  .#{$ns}-heading {
    @include overflow-ellipsis;
    flex: 1 1 auto;
    font-size: 14px;
    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;

    // only apply dark color to icons that are not intent-specific
    :not([class*="#{$ns}-intent"]) {
      &.#{$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;
  }
}