<?php
function renderScrollTopElement($blockClass, $element, $custom_classes, $elStyles, $colors, $viewport) {
  $b = 'flex-element-scroll-top';
  $data = $element['data'];
  $user_data = $data['user_data'];

  $type = $user_data['layoutType'];
  $text = $user_data['textScrollTop'];
  $font = getFontData($user_data, 'scrollFont');

  $iconMarkup = '';

  $textMarkup = '';
  if ($type === 'text' || $type === 'iconAndText') {
    $textMarkup = '
      <div
        class="' . $b . '__text"
        style="' . $font['style'] . '"
        data-font="' . $font['dataFont'] . '"
      >
        ' . $text . '
      </div>
    ';
  }
  if ($type === 'icon' || $type === 'iconAndText') {
    $iconMarkup = '
      <div class="' . $b . '__icon">
        <i class="flo-flex-icon-scroll-top"></i>
      </div>
    ';
  }

  $elMarkup = '
    <div
      class="
        ' . $blockClass . '__element
        ' . $blockClass . '__element--' . $element["id"] . '
        ' . $blockClass . '__element--line
        ' . $custom_classes . '
      "
    >
      <div
        class="
          ' . $b . '
          ' . $b . '--direction-' . $user_data['layoutDirection'] . '
        "
        style="
          --text-color: ' . getStyleKitColor($user_data["textColor"]) . ';
          --icon-color: ' . getStyleKitColor($user_data["iconColor"]) . ';
        "
      >
        ' . $textMarkup . '
        ' . $iconMarkup . '
      </div>
    </div>
  ';

  return $elMarkup;
}
