.toast {
  @include font-style('body--m');
  border-radius: $border-radius--l;
  display: flex;
  flex-flow: row wrap;
  max-height: 0 !important; // overwrite inline style to enable animation
  padding: 12px $spacing--s $spacing--s $spacing--s;
  position: fixed;
  visibility: hidden;

  &--active {
    height: auto;
    max-height: inherit !important; // overwrite inline style to enable animation
    visibility: visible;
    z-index: 1;
  }

  &.closable--closed {
    animation: fade-out $transition-duration--fast $toast-duration;
    max-height: none !important; // overwrite inline style to enable animation
    opacity: 0;
    transition: visibility $transition-duration--fast ease, opacity $transition-duration--fast ease;
    visibility: hidden;
  }

  &__message {
    @include font-style('body--m');
    margin-bottom: 0;
  }

  &__cta {
    margin: $spacing--s 0 0 auto;
    padding-left: $spacing--xs;
    text-align: right;
  }

  .icon svg {
    transition: fill $transition-duration--fast;
  }
}

// viewport s - m
@include viewport--l('inversed') {
  .toast {
    bottom: $toast-spacing-bottom;
    left: 10px;
    right: 10px;

    &__message {
      flex: 1 100%;
      margin-right: 35px;
      width: 100%;
    }

    &__cta {
      flex: 1 100%;
    }

    .icon {
      right: 15px;
      top: $baseline * 1.5;
    }

    &--active {
      animation: fade-in-toast $transition-duration--fast;
    }
  }
}

// viewport l
@include viewport--l {
  .toast {
    bottom: $toast-spacing-bottom--l;
    right: 30px;
    width: $toast-width;

    &__message {
      margin-right: 45px;
      width: auto;
    }

    .icon {
      top: $baseline * 1.8;
      right: 20px;
    }

    &--active {
      animation: fade-in-toast--l $transition-duration--fast;
    }
  }
}

@include toast-background-mapping;