.notice-action {
  .notice-action__text {
    &,
    p {
      @include font-style('title--s', 'title--s');
      margin-bottom: 0;
    }
  }
}

@include viewport--l('inversed') {
  .notice-action {
    &__wrapper {
      padding-bottom: $spacing--m;
      padding-top: $spacing--m;
    }
    .button {
      margin-top: $spacing--m;
    }

    .button-group {
      flex-shrink: 1;
      margin-top: $spacing--s;

      .button {
        margin-top: $spacing--xs;
      }
    }
  }
}

@include viewport--l {
  .notice-action {
    &__wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: $spacing--l;
      padding-top: $spacing--l;
    }

    &__text {
      align-self: flex-start;
      max-width: grid-columns(7, 12);
      position: relative;
      top: $spacing--xs;

      & + .button,
      & + .button-group {
        flex-shrink: 0;
        margin-left: 30px;
      }
    }
  }
}