<?php

function renderPopupCloseButtonElement($b, $element, $custom_classes, $elStyles, $colors, $viewport) {
  $data = $element['data'];
  $user_data = $data['user_data'];
  $fontData = getFontData($user_data, 'textFont');
  $fontStyles = $fontData['style'];
  $dataFont = $fontData['dataFont'];

  $content = '';

  $alignMap = array(
    "left" => "flex-start",
    "center" => "center",
    "right" => "flex-end"
  );
  $alignment = useVar($user_data,"alignment", "center");

  if ($user_data["useText"]) {
    $content = '
      <div
        class="flex-element-type-popup-close-button__text"
        style="'.$fontStyles.'"
        data-font="'.$dataFont.'"
      >
        '.$user_data["text"].'
      </div>
    ';
  } else {
    $content = '
      <div class="flex-element-type-popup-close-button__icon"></div>
    ';
  }

  $elMarkup = '
    <div class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--popup-close-button '.$custom_classes.'" style="'.$elStyles.'">
      <div
        class="flex-element-type-popup-close-button"
        style="
          --color: '.getStyleKitColor($user_data["color"]).';
          --hoverColor: '.getStyleKitColor($user_data["hoverColor"]).';
          --thickness: '.remCalc($user_data["thickness"]).';
          justify-content: '.$alignMap[$alignment].';
        "
      >
        '.$content.'
      </div>
    </div>
  ';

  return $elMarkup;
}
