/// Popover
///
/// @group popovers
///
/// @example scss - usage
///   @include k-Popover;
///
/// @example html
/// <div class="k-Popover"
///      role="dialog"
///      aria-hidden="true"
///      aria-labelledby="dialogtitle">
///   <div class="k-Popover__container">
///     …
///     <div class="k-Popover__close">
///       <button class="k-ButtonIcon
///                      k-ButtonIcon--beryllium
///                      k-ButtonIcon--tiny">
///         <svg class="k-ButtonIcon__svg k-ButtonIcon__svg--rotate"
///              xmlns="http://www.w3.org/2000/svg"
///              viewBox="-11 -4 125 105">
///           <path d="M91.968 21.407l-70.56 70.56-13.44-13.44 70.56-70.56z"/>
///           <path d="M91.968 78.527l-13.44 13.44-70.56-70.56 13.44-13.44z"/>
///         </svg>
///       </button>
///     </div>
///   </div>
/// </div>

@mixin k-Popover {
  $background-color: map-get($k-colors, 'background-1');
  $border-color: map-get($k-colors, 'line-1');
  $border-size: k-px-to-rem(2px);
  $margin-left: k-px-to-rem(50px);

  .k-Popover {
    position: relative;

    width: k-px-to-rem(520px);
    box-sizing: border-box;

    background-color: $background-color;
  }

  .k-Popover__container {
    min-height: k-px-to-rem(245px);
    box-sizing: border-box;
  }

  .k-Popover__illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    width: k-px-to-rem(80px);
    margin-left: $margin-left;
  }

  .k-Popover__svg--primary {
    fill: map-get($k-colors, 'font-1');
  }

  .k-Popover__container {
    display: flex;
  }

  .k-Popover__content {
    flex-direction: column;
    flex: 1;

    margin-left: $margin-left;
  }

  .k-Popover__navigation {
    justify-content: space-between;
  }

  .k-Popover__buttons {
    display: flex;
  }
}