.bz-message {
  align-items: center;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  margin-bottom: $bz-space-stack-m;
  overflow: hidden;
  padding: $bz-space-inset-squish-s;
  position: relative;

  &__state-bar {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
  }

  &__close {
    cursor: pointer;
    color: $bz-neutral-400;
  }

  &__content {
    flex: 1;
    display: flex;
    align-items: center;
  }

  &__inner-content {
    flex: 1;
  }

  &--success {
    background: rgba($color: $bz-color-state-success, $alpha: .05);
    color: $bz-color-state-success;

    .bz-message__state-bar {
      background: $bz-color-state-success;
    }

    .bz-message__icon {
      color: $bz-color-state-success;
      .bz-icn {
        fill: $bz-color-state-success;
      }
    }
  }

  &--warning {
    background: rgba($color: $bz-color-state-warning, $alpha: .05);

    .bz-message__state-bar {
      background: $bz-color-state-warning;
    }

    .bz-message__icon {
      color: $bz-color-state-warning;
      .bz-icn {
        fill: $bz-color-state-warning;
      }
    }
  }

  &--error {
    background: rgba($color: $bz-color-state-error, $alpha: .05);
    color: $bz-color-state-error;

    .bz-message__state-bar {
      background: $bz-color-state-error;
    }

    .bz-message__icon {
      color: $bz-color-state-error;
      .bz-icn {
        fill: $bz-color-state-error;
      }
    }
  }

  &--info {
    background: rgba($color: $bz-color-state-info, $alpha: .05);

    .bz-message__state-bar {
      background: $bz-color-state-info;
    }

    .bz-message__icon {
      color: $bz-color-state-info;
      .bz-icn {
        fill: $bz-color-state-info;
      }
    }
  }
}

[dir="rtl"]{
  .bz-message {
    &__state-bar{
      left: auto;
      right: 0;
    }
  }
}