material_base-8.x-2.x-dev/themes/material_base_mdc/templates/layout/region--overlay.html.twig

{#
/**
 * @file
 * Theme override to display a region.
 *
 * Available variables:
 * - content: The content for this region, typically blocks.
 * - attributes: HTML attributes for the region <div>.
 * - region: The name of the region variable as defined in the theme's
 *   .info.yml file.
 *
 * @see template_preprocess_region()
 */
#}
{% set classes = [
    'region',
    'region-' ~ region|clean_class,
    'page-overlay',
    'overlay',
] %}

{% if content %}
  <div{{ attributes.addClass(classes) }}>
    <div class="overay__bg"></div>
    <div class="overay__container">
      <div class="overlay__header">
        {# Logo or title #}

        <div class="overlay-close">
          {% include "@material_base_mdc/components/02_molecules/icon-button.twig" with {
            data: {
              icon: {
                data: {
                  value: 'close',
                },
                settings: {
                  type: 'svg-sprite',
                },
              },
            },
            settings: {
              classes: ['overlay-close__button'],
            },
          } %}
        </div>
      </div>
      <div class="overlay__content">
        {{ content }}

        {# Bottom action #}
      </div>
    </div>
  </div>
{% endif %}