// The actual dialog. Its position is set on open such that it sits in the
// middle of the viewport. Margin:auto only works in Chrome and Webkit.
@import 'mixins/common';

dialog {
  @include border-box;
  @include tight-box;
  border: 0; // oh chrome, you try so hard to annoy me
  // bottom: auto;
  display: none;
  left: 0;
  max-height: $wc-ui-dialog-max-height;
  max-width: $wc-ui-dialog-max-width;
  position: fixed;
  // right: auto; // chrome again
  top: 0;
  z-index: $wc-z-index-dialog;

  @if ($wc-ui-dialog-min-height > 0) {
    min-height: $wc-ui-dialog-min-height;
  }
  @if ($wc-ui-dialog-min-width > 0) {
    min-width: $wc-ui-dialog-min-width;
  }

  &[open] {
    @include flex($direction: column);
  }

  &.wc_max { // maximised:
    // important to override any inline CSS
    // sass-lint:disable no-important
    @include border-box;
    left: 0 !important;
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
    top: 0 !important;
  }

  > header,
  > footer { // top and bottom bars of dialog
    @include flex-grow(0);
    @include flex-shrink(0);
  }

  > header {
    @include flex($direction: row-reverse, $wrap: wrap,
      $justify: space-between, $align-items: center);
    padding: $wc-gap-small 0 $wc-gap-small $wc-gap-small;

    > h1 { // the title
      @include flex-grow(1);
      @if ($wc-dialog-header-size != -1) {
        font-size: $wc-dialog-header-size;
        margin: 0;
      }
    }

    > span { // the header control 'block'
      @include flex-align-self(flex-start);
      line-height: 0;
      margin-right: $wc-gap-small;
    }

    .wc_maxcont {
      display: inline-block;
    }

    .wc_btn_icon + button {
      margin-left: $wc-gap-small;
    }
  }

  > div { // dialog content container
    @include padded-box;
    @include flex-grow(1);
    // height: 100%;
    overflow: auto;
  }

  > footer {
    display: block;
    line-height: 0;
    padding: 0;
    text-align: right;

    button {
      cursor: nwse-resize;

      &::before {
        padding: $wc-gap-small;
      }
    }

    .fa {
      opacity: .5;
    }
  }
}

@if ($wc-use-respond == 1 and $wc-use-respond-dialog == 1) {
  @include respond-phonelike {
    dialog {
      max-height: 100%;
      max-width: 100%;
      min-height: 100%;
      min-width: 100%;

      > footer {
        display: none;
      }

      > header .wc_maxcont {
        display: none;
      }
    }
  }
}

@if ($wc-ui-dialog-use-transitions == 1) {
  // This is only here to make iPads work with the dialogFrame animations
  // (i.e. not work at all).
  @media only screen and (min-width: 1025px) {
    // keyboard and resize event initiated drag and resize animation
    .wc_resizeflow {
      transition-delay: $wc-ui-dialog-transition-delay;
      transition-duration: $wc-ui-dialog-transition-duration;
      transition-property: left, top, height, width;
      transition-timing-function: ease-in-out;
    }
  }
}

@import 'wc.dialog.color';
