@mixin ax-dialog() {
  box-sizing: $ax6ui-dialog-box-model;
  background-color: $ax6ui-dialog-bg;
  border: $ax6ui-dialog-inner-border;
  border-radius: $ax6ui-dialog-border-radius;
  box-shadow: $ax6ui-dialog-box-shaodw;

  z-index: $ax6ui-dialog-z-index;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
}

@mixin ax-dialog-section() {
  .ax-dialog-header {
    //font-size: 1em;
    font-weight: 600;
    padding: $ax6ui-dialog-header-padding;
    border-bottom: 1px solid transparent;
    .badge {
      font-size: 0.8em;
      color: $ax6ui-dialog-default-header-bg;
      background-color: $ax6ui-dialog-default-text;
    }
  }
  .ax-dialog-body {
    padding: $ax6ui-dialog-body-padding;
    text-align: center;
    .ax-dialog-msg {
      padding-top: $ax6ui-dialog-body-padding;
      padding-bottom: $ax6ui-dialog-body-padding;
    }
    .ax-dialog-prompt {
      text-align: left;
      padding-bottom: $ax6ui-dialog-body-padding/2;
    }
    .ax-dialog-buttons {
      margin-top: $ax6ui-dialog-body-padding;
      button {
        &:not(:last-child) {
          margin-right: 3px;
        }
      }
    }
    [data-dialog-els="additional-content"] {
      margin-top: $ax6ui-dialog-body-padding;
    }
  }
}

@mixin dialog-variant($text-color, $border, $header-bg-color) {

  border: $ax6ui-dialog-inner-border;

  .ax-dialog-header {
    color: $text-color;
    background: $header-bg-color;
    .badge {
      color: $header-bg-color;
      background-color: $text-color;
    }
  }
  .ax-dialog-body {

  }
}

@include keyframes(ax-dialog) {
  0% {
    opacity: 0.0;
    @include transform(scaleX(1));
  }
  0.1% {
    opacity: 0.0;
    @include transform(scaleX(1.3));
  }
  100% {
    opacity: 1.0;
    @include transform(scaleX(1));
  }
}

@include keyframes(ax-dialog-destroy) {
  from {
    @include transform(translate(0, 0));
    opacity: 1.0;
  }
  to {
    @include transform(translate(0, 50%));
    opacity: 0.0;
  }
}

// mixins --------------------------------------------- end

[data-ax6ui-dialog] {
  @include animation(ax-dialog $ax6ui-dialog-easing-time-open $ease-out-back);
  @include transform(translateZ(0));

  @include ax-dialog();
  @include ax-dialog-section();

  @include dialog-variant($ax6ui-dialog-default-text, $ax6ui-dialog-default-border, $ax6ui-dialog-default-header-bg);

  &.destroy {
    @include animation(ax-dialog-destroy $ax6ui-dialog-easing-time-close $ease-in-quint forwards);
  }
}