@use 'sass:list';
@use '../style/base' as *;

@include bem(alert) {
  @include b() {
    @include universal;
    flex-direction: row;
    align-items: center;
    padding: var(--gms-alert-paddding-y) var(--gms-alert-paddding-x);
    font-size: var(--gms-alert-font-size);

    @each $type,
      $color
        in (
          primary: (
              var(--gms-primary),
              var(--gms-primary-rgb),
            ),
          success: (
              var(--gms-success),
              var(--gms-success-rgb),
            ),
          warning: (
              var(--gms-warning),
              var(--gms-warning-rgb),
            ),
          danger: (
              var(--gms-danger),
              var(--gms-danger-rgb),
            )
        )
    {
      @include m($type) {
        color: list.nth($color, 1);
        background-color: rgba(
          list.nth($color, 2),
          var(--gms-alert-bg-opacity)
        );
      }
    }
  }

  @include e(icon) {
    @include universal;
    margin-right: var(--gms-alert-icon-margin-right);
    line-height: 1;
  }

  @include e(content) {
    @include universal;
    flex: 1;
    overflow: hidden;
  }

  @include e(close) {
    @include universal;
    font-size: var(--gms-alert-close-size);
    padding: var(--gms-alert-close-padding);
    margin: var(--gms-alert-close-margin) var(--gms-alert-close-margin)
      var(--gms-alert-close-margin) 0;
    cursor: pointer;
  }
}