$notification-background-color: $background !default;
$notification-radius: 0 !default;
$notification-padding: 1rem !default;

.sgds-notification {
  @include block;

  background-color: $notification-background-color;
  border-radius: $notification-radius;
  padding: $notification-padding;
  position: relative;
  width: 100%;
  z-index: 2;

  &.is-pos-abs {
    position: absolute;
  }

  a:not(.sgds-button) {
    color: currentColor;
    text-decoration: underline;
  }

  strong {
    color: currentColor;
  }

  code,
  pre {
    background: $white;
  }

  pre code {
    background: transparent;
  }

  .title,
  .subtitle,
  .content {
    color: currentColor;
  }

  &.is-toast {
    background-color: transparent;
    border: 1px solid currentColor;
    border-left: 5px solid currentColor;
    color: currentColor;

  }

  // Colors
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      background-color: $color;
      color: $color-invert;
      @if $name == warning {
        color: $black;
      }
    }

    &.is-toast-#{$name} {
      background-color: transparent;
      border: 1px solid $color;
      border-left: 5px solid $color;

      .sgds-icon {
        color: $color;
      }
    }
  }

  &-detail {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 2rem;

    .sgds-icon {
      margin-left: 1rem;
      margin-right: 2rem;
    }

    .delete {
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  &-flex {
    &.field {
      justify-content: space-between;
      align-items: center;
    }
  }
}