// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "~bourbon/app/assets/stylesheets/bourbon";
@import "../../common/icons";
@import "../../common/mixins";
@import "../../common/react-transition";
@import "../../common/variables";

/*
Dialog

Markup:
<!-- this container element fills its parent and centers the .pt-dialog within it -->
<div class="pt-dialog-container">
  <div class="pt-dialog">
    <div class="pt-dialog-header">
      <span class="pt-icon-large pt-icon-inbox"></span>
      <h5>Dialog header</h5>
      <button aria-label="Close" class="pt-dialog-close-button pt-icon-small-cross"></button>
    </div>
    <div class="pt-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="pt-dialog-footer">
      <div class="pt-dialog-footer-actions">
        <button type="button" class="pt-button">Secondary button</button>
        <button type="submit" class="pt-button pt-intent-primary">Primary button</button>
      </div>
    </div>
  </div>
</div>

Styleguide pt-dialog
*/

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

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

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

  // LEGACY: override old (<= 1.24.0) dialog styles when inside a container to respect flex layout
  .pt-dialog {
    // stylelint-disable-next-line declaration-no-important
    position: static !important;
    transform: none;
  }
}

.pt-dialog {
  display: flex;
  flex-direction: column;
  margin: $dialog-margin;
  border-radius: $dialog-border-radius;
  box-shadow: $pt-dialog-box-shadow;
  background: $light-gray4;
  width: $pt-grid-size * 50;
  padding-bottom: $pt-grid-size * 2;
  user-select: initial;

  &:focus {
    outline: 0;
  }

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

.pt-dialog-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  border-radius: $dialog-border-radius $dialog-border-radius 0 0;
  box-shadow: 0 1px 0 $pt-divider-black;
  background: $white;
  min-height: $pt-icon-size-large + $dialog-padding;
  padding-left: $dialog-padding;

  .pt-icon-large {
    flex: 0 0 auto;
    margin-right: $dialog-padding / 2;
    color: $pt-icon-color;
  }

  h5 {
    @include overflow-ellipsis();
    flex: 1 1 auto;
    margin: 0;
    line-height: inherit;

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

  .pt-dark & {
    box-shadow: 0 1px 0 $pt-dark-divider-black;
    background: $dark-gray4;

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

    h5 {
      color: $pt-dark-heading-color;
    }
  }
}

.pt-dialog-close-button {
  // large icon with interactive colors
  @include pt-icon($pt-icon-size-large);
  @include pt-icon-colors();
  flex: 0 0 auto;

  // button reset
  border: none;
  background: none;

  cursor: pointer;
  padding: $pt-grid-size;
}

.pt-dialog-body {
  flex: 1 1 auto;
  margin: $dialog-padding;
  line-height: $pt-grid-size * 1.8;
}

.pt-dialog-footer {
  flex: 0 0 auto;
  margin: 0 $dialog-padding;
}

.pt-dialog-footer-actions {
  display: flex;
  justify-content: flex-end;

  .pt-button {
    margin-left: $pt-grid-size;
  }
}