.notice-alert {
  &__closable {
    transition: max-height $transition-duration--fast $transition-duration--fast,
      border $transition-duration--fast $transition-duration--fast;
  }

  &__wrapper {
    padding-top: $baseline * 2;
    padding-bottom: $baseline * 3;
  }

  &__content {
    display: inline-block;
    position: relative;
    width: 100%;

    .title {
      @include font-style('title--s', 'title--m');
      display: inline-block;
      margin-bottom: $baseline * 2;
      max-width: 90%;
    }
  }

  &__description {
    .description,
    p {
      @include font-style('body--m', 'body--l');
      margin-bottom: 0;
    }
    .button {
      margin-top: $baseline * 2;
    }
  }

  &__close {
    display: inline-block;
    position: absolute;
    right: 0;

    .icon {
      height: $baseline * 3.5;
      width: $baseline * 2.3;
    }
  }
}

@include viewport--l {
  .notice-alert {
    &__close .icon {
      height: $baseline * 4;
      width: $icon-size--l;
    }
  }
}