.ls-notification {
  $notification-padding: 4 * $sp;
  $notification-line-height: 2rem;
  display: flex;
  overflow: hidden;
  max-width: calc(100vw - #{6 * $sp});
  background-color: rgba($color-white, 0.2);
  border: set-border();
  box-shadow: $shadow-main;
  color: $color-theme-light-font;

  &--sm {
    width: 36rem;
  }

  &--md {
    width: 57rem;
  }

  &--lg {
    width: 96rem;
  }

  &--info {
    border-color: $color-info;
    background-color: $color-white;
  }

  &--success {
    border-color: $color-success;
    background-color: $color-white;
  }

  &--warning {
    border-color: $color-warning;
    background-color: $color-white;
  }

  &--error {
    border-color: $color-error;
    background-color: $color-white;
  }

  &__content {
    line-height: $notification-line-height;
    flex-grow: 1;
    border-radius: $border-radius-main;
    padding: $notification-padding;
  }

  &__close-wrapper {
    height: 2 * $notification-padding + $notification-line-height;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 2 * $sp;
  }
}