/// Setup a box element.
///
/// @group box
///
/// @example scss - usage
///
///   @include k-InformationBox;
///
/// example html
///   <div class="k-InformationBox">
///     <div className="k-InformationBox__container">
///         …
///       </div>
///     </div>
///   </div>

@mixin k-InformationBox {
  $color: map-get($k-colors, 'font-1');
  $background-color: map-get($k-colors, 'background-1');
  $border-color: map-get($k-colors, 'line-1');

  $font: 'light';

  $border-size: k-px-to-rem(2px);

  .k-InformationBox {
    display: inline-block;
    @include k-typographyFont($font);
  }

  .k-InformationBox__container {
    padding: k-px-to-rem(10px)
             k-px-to-rem(20px)
             k-px-to-rem(20px)
             k-px-to-rem(20px);
    color: $color;
    background-color: $background-color;
    border: $border-size solid $border-color;
  }
}