@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-notify-color: $ink-color-white !default;
$ink-notify-font-size: $ink-font-size-md !default;
$ink-notify-bg-color: $ink-color-info !default;
$ink-notify-line-height: $ink-line-height-md !default;
$ink-notify-zindex: $ink-zindex-1080 !default;

.ink-notify {
  height: auto;
  padding: $ink-spacing-xs $ink-spacing-base;
  color: $ink-notify-color;
  font-size: $ink-notify-font-size;
  text-align: center;
  line-height: $ink-notify-line-height;
  background-color: $ink-notify-bg-color;
  z-index: $ink-notify-zindex;

  &__mask {
    display: none;
  }

  &--success {
    background: $ink-color-success;
  }

  &--error {
    background: $ink-color-error;
  }

  &--warning {
    background: $ink-color-warning;
  }

  &--info {
    background: $ink-color-info;
  }

  &--show {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  &--hidden {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}