/// Modal
///
/// @group modals
///
/// @example scss - usage
///
///   @include k-Modal((
///     z-index: 10,
///   ));
///
/// @example html
///
///   <div class="k-Modal__content k-Modal--afterOpen">
///     <div> … </div>
///     <div> … </div>
///     <Button class="k-Modal__close"> … </Button>
///   </div>

@mixin k-Modal($options) {
  $outer-gutters-size: k-px-to-rem(20px);

  $background-color: map-get($k-colors, 'background-1');

  .k-Modal__content {
    position: relative;
    max-height: calc(100vh - #{$outer-gutters-size} * 2);
    max-width: calc(100vw - #{$outer-gutters-size} * 2);

    background-color: $background-color;
    text-align: center;
    padding-left: k-px-to-rem(20px);
    padding-right: k-px-to-rem(20px);

    outline: none;
    box-sizing: border-box;
    overflow: scroll;

    @include k-media-min('m') {
      max-width: k-px-to-rem(690px);
      padding-left: k-px-to-rem(110px);
      padding-right: k-px-to-rem(110px);
    }
  }

  .k-Modal__close {
    position: absolute;
    top: 0;
    right: 0;
  }

  .k-Modal__overlay {
    position: fixed;
    z-index: map-get($options, 'z-index');
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgba(34, 34, 34, .9); // font-1
  }
}