@mixin ax-toast() {
  box-sizing: $ax6ui-toast-box-model;
  border: $ax6ui-toast-border;
  opacity: $ax6ui-toast-opacity;

  @include ax-border-radius($ax6ui-toast-border-radius);
  box-shadow: $ax6ui-toast-box-shadow;
  position: relative;
  margin: $ax6ui-toast-box-margin;
}

@mixin ax-toast-section() {
  display: table;
  padding: $ax6ui-toast-body-padding;
  .ax-toast-icon {
    display: table-cell;
    padding: $ax6ui-toast-body-padding;
    text-align: left;
    font-size: $ax6ui-toast-icon-size;
    width: $ax6ui-toast-icon-size;
    vertical-align: middle;
  }
  .ax-toast-body {
    display: table-cell;
    padding: $ax6ui-toast-body-padding;
    text-align: left;
    vertical-align: middle;
  }
  .ax-toast-buttons {
    display: table-cell;
    padding: $ax6ui-toast-body-padding;
    text-align: right;
    vertical-align: middle;
    button {
      &:not(:last-child) {
        margin-right: 3px;
      }
    }
  }
  .ax-toast-close {
    display: table-cell;
    padding: $ax6ui-toast-body-padding;
    text-align: right;
    vertical-align: top;
    text-decoration: none;
    cursor: pointer;
  }
}

@mixin toast-variant($text-color, $bg-color, $color) {
  background: $bg-color;
  color: $text-color;
  .ax-toast-icon {
    color: $color;
  }
  .ax-toast-close {
    color: $text-color;
  }
}

@include keyframes(ax-toast-bottom) {
  from {
    @include transform(translateY(-100px));
  }
  to {
    //@include opacity($mask-bg-opacity);
    @include transform(translateY(0px))
  }
}

@include keyframes(ax-toast-top) {
  from {
    @include transform(translateY(100px));
  }
  to {
    @include transform(translateY(0px))
  }
}

@include keyframes(ax-toast-removed-bottom) {
  from {
    @include transform(translateX(0px));
    opacity: 1.0;
  }
  to {
    @include transform(translateX(100px));
    opacity: 0.0;
  }
}

@include keyframes(ax-toast-removed-top) {
  from {
    @include transform(translateX(0px));
    opacity: 1.0;
  }
  to {
    @include transform(translateX(-100px));
    opacity: 0.0;
  }
}

@include keyframes(ax-toast-destroy) {
  from {
    @include transform(scale(1));
    opacity: 1.0;
  }
  to {
    @include transform(scale(0.7));
    opacity: 0.0;
  }
}

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

[data-ax6ui-toast-container] {
  z-index: $ax6ui-toast-z-index;
  position: fixed;
  //width: 0;
  width: $ax6ui-toast-container-width;
  max-width: 100%;
  padding: $ax6ui-toast-container-padding;

  box-sizing: border-box;
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  [data-ax6ui-toast] {
    @include ax-toast();
    @include ax-toast-section();
    //@include transition(all $ax6ui-toast-easing-time ease-in-out);
    @include toast-variant($ax6ui-toast-default-text, $ax6ui-toast-default-bg, $ax6ui-toast-default-color);
  }

  &[data-toast-container-position="bottom-left"] {
    left: 10px;
    bottom: 0;

    [data-ax6ui-toast] {
      @include animation(ax-toast-top $ax6ui-toast-easing-time $ease-out-back);
      &.removed {
        @include animation(ax-toast-removed-bottom $ax6ui-toast-easing-time ease forwards);
      }
      &.destroy {
        @include animation(ax-toast-destroy $ax6ui-toast-easing-time ease forwards);
      }
    }
  }
  &[data-toast-container-position="bottom-right"] {
    right: 10px;
    bottom: 0;

    [data-ax6ui-toast] {
      @include animation(ax-toast-top $ax6ui-toast-easing-time $ease-out-back);
      &.removed {
        @include animation(ax-toast-removed-bottom $ax6ui-toast-easing-time ease forwards);
      }
      &.destroy {
        @include animation(ax-toast-destroy $ax6ui-toast-easing-time ease forwards);
      }
    }
  }
  &[data-toast-container-position="bottom-center"] {
    left: 50%;
    bottom: 0;

    [data-ax6ui-toast] {
      position: relative;
      left: -50%;
      @include animation(ax-toast-top $ax6ui-toast-easing-time $ease-out-back);
      &.removed {
        @include animation(ax-toast-removed-bottom $ax6ui-toast-easing-time ease forwards);
      }
      &.destroy {
        @include animation(ax-toast-destroy $ax6ui-toast-easing-time ease forwards);
      }
    }
  }

  &[data-toast-container-position="top-left"] {
    left: 10px;
    top: 0;

    [data-ax6ui-toast] {
      @include animation(ax-toast-bottom $ax6ui-toast-easing-time $ease-out-back);

      &.removed {
        @include animation(ax-toast-removed-top $ax6ui-toast-easing-time ease forwards);
      }
      &.destroy {
        @include animation(ax-toast-destroy $ax6ui-toast-easing-time ease forwards);
      }
    }
  }

  &[data-toast-container-position="top-right"] {
    right: 10px;
    top: 0;

    [data-ax6ui-toast] {
      @include animation(ax-toast-bottom $ax6ui-toast-easing-time $ease-out-back);
      &.removed {
        @include animation(ax-toast-removed-top $ax6ui-toast-easing-time ease forwards);
      }
      &.destroy {
        @include animation(ax-toast-destroy $ax6ui-toast-easing-time ease forwards);
      }
    }
  }

  &[data-toast-container-position="top-center"] {
    left: 50%;
    top: 0;

    [data-ax6ui-toast] {
      left: -50%;
      @include animation(ax-toast-bottom $ax6ui-toast-easing-time $ease-out-back);

      &.removed {
        @include animation(ax-toast-removed-top $ax6ui-toast-easing-time ease forwards);
      }
      &.destroy {
        @include animation(ax-toast-destroy $ax6ui-toast-easing-time ease forwards);
      }
    }
  }

}