@use '../style/base' as *;

@include bem(notify) {
  @include b() {
    @include universal;

    @each $type,
      $color
        in (
          primary: var(--sar-primary),
          success: var(--sar-success),
          warning: var(--sar-warning),
          error: var(--sar-danger)
        )
    {
      @include m($type) {
        background-color: $color;
      }
    }
  }

  @include e(content) {
    padding: var(--sar-notify-paddding-y) var(--sar-notify-paddding-x);
    font-size: var(--sar-notify-font-size);
    text-align: center;
    color: var(--sar-white);
  }

  @include m(bottom) {
    @include e(content) {
      padding-bottom: calc(
        var(--sar-notify-paddding-y) + env(safe-area-inset-bottom)
      );
    }
  }
}