@import "var";

.@{prefixName}-notify {
  position: fixed;
  display: flex;
  top: 0;
  left: 50%;
  width: 100%;
  height: @notify-height;
  line-height: 1;
  padding: 0 @notify-padding-horizontal;
  background-color: @notify-default-background-color;
  align-items: center;
  box-shadow: @notify-box-shadow;
  transform: translate(-50%, -100%);
	opacity: 0;
	transition: all 300ms ease;
  box-sizing: border-box;
  z-index: @notify-zindex;

  &.is-shown {
		opacity: 1;
		transform: translate(-50%, 0);
	}

  &__icon {
    margin-right: @notify-icon-margin-right;
  }

  &__text {
    font-size: @notify-text-size;
    color: @notify-text-color;
  }

  &--info {
    background-color: @notify-info-background-color;
  }

  &--success {
    background-color: @notify-success-background-color;
  }

  &--warning {
    background-color: @notify-warning-background-color;
  }

  &--danger {
    background-color: @notify-danger-background-color;
  }

  &--default,
  &--loading {
    .@{prefixName}-notify__text {
      color: @notify-text-base-color;
    }
  }
}