@mixin toast {
  height: auto;
  line-height: inherit;
  padding: {
    top: 12px;
    bottom: 11px;
  }

  &--fixed {
    bottom: 0;
    display: inline-block;
    float: none;
    left: 50%;
    min-width: 300px;

    top: auto;
    transform: translateX(-50%);
    z-index: 9999;

    .js & {
      position: fixed;
      transition: transform $transition-duration;
    }
  }

  &--hidden {
    .js & {
      transform: translate(-50%, 100%);
    }
  }
}

.toast {
  @include toast;
}
