/// Represents a title followed by two buttons, used on a homepage for example.
///
/// @group titles
///
/// @example scss - usage
///
///   @include k-TitleWithActions;
///
/// @example html
///
///   <div class="k-titleWithActions">
///     <h1 class="k-titleWithActions__title">…</h1>
///     <div class="k-titleWithActions__action is-first">…</div>
///     <div class="k-titleWithActions__action is-last">…</div>
///   </div>
@mixin k-TitleWithActions {
  .k-titleWithActions {
    @include k-grid;
    text-align: center;
  }

  .k-titleWithActions__title {
    @include k-grid-col(12);
    @include k-typographyFont('light');
    @include k-typographyFontSize(5);
    margin-bottom: k-px-to-rem(30px);

    @include k-media-min('m') {
      @include k-grid-col(8);
      @include k-grid-offset(2);
      @include k-typographyFontSize(4, 1.25);
    }

    @include k-media-min('l') {
      @include k-grid-col(6);
      @include k-grid-offset(3);
    }
  }

  .k-titleWithActions__title--withoutMargin {
    margin-bottom: 0;
  }

  .k-titleWithActions__action {
    // one button per line
    //     [ x ]
    //     [ x ]
    @include k-grid-col(12);

    @include k-media-min('m') {
      // one line of two buttons next to each other
      //    [ x ] [ x ]
      @include k-grid-col(6);

      &.is-first { text-align: right; }
      &.is-last { text-align: left; }
    }
  }

  .k-titleWithActions__action__button {
    @include k-media-min('m') {
      width: k-px-to-rem(320px);
    }
  }
}