////
/// @deprecated These styles are not guaranteed to be available in the future.
////

@import '../core';

// These duration values need to be kept in sync with dialog.component.ts
$dialog-open-duration: 125;
$dialog-close-duration: 100;
$panel-open-duration: 250;
$panel-close-duration: 225;

$overlay-bg: $ec-color-bg-modal;
$dialog-bg: $ec-color-bg-body;
$dialog-borer-radius: $ec-border-radius * 2;
$dialog-min-height: 9rem;
$dialog-max-width: 90vw;
$dialog-max-height: 90vh;
$dialog-widths: (
  xsmall: 20rem,
  small: 30rem,
  medium: 40rem,
  large: 50rem,
  xlarge: 60rem,
  full: $dialog-max-width
);

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@mixin dialog-overlay {
  align-items: center;
  background-color: $overlay-bg;
  justify-content: center;
  position: fixed;
  z-index: map-get($ec-z-indexes, dialog);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@mixin dialog-window {
  background-color: $dialog-bg;
  background-clip: padding-box;
  box-shadow: 0 0 0.625rem rgba($black, .2);
  border-radius: $dialog-borer-radius;
  display: flex;
  flex: none;
  min-height: $dialog-min-height;
  max-height: $dialog-max-height;
  max-width: $dialog-max-width;
}

@mixin dialog-open {
  display: flex;
}

@mixin dialog-fade-in {
  animation-name: fadeIn;
  animation-duration: #{$dialog-open-duration}ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

@mixin dialog-fade-out {
  animation-name: fadeIn;
  animation-duration: #{$dialog-close-duration}ms;
  animation-direction: reverse;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

@mixin dialog-sizes($selector-prefix) {
  @each $width, $value in $dialog-widths {
    #{$selector-prefix}-#{$width} {
      width: $value;
    }
  }
}