%%SELECTOR%% {
  width: {{ design.container.width.style }};
  min-height: {{ design.container.min_height.style }};
  {{ macros.backgroundColor(design.container.background) }}
  {{ macros.spacing_padding_all(design.container.padding) }}
  {{ macros.borders(design.container.borders) }}
  {{ macros.spacing_margin_y(design.spacing) }}
  {{ macros.simpleLayout(design.layout, breakpoint) }}

  {# backwards compat - we removed the height field and replaced it with min height during the beta, but we dont want to break designs that already set height #}
  height: {{ design.container.height.style }};
  {# if we ever want to delete this entirely we can add a builder only warning in the html for this element that will only appear if the user has height set #}

}

{{ macros.layoutV2(design.layout_v2, breakpoint, isBaseBreakpoint, '%%SELECTOR%%') }}

{{ macros.fancyBackgroundCss('%%SELECTOR%%', design.background, breakpoint, false, true) }}

{# Text Colors #}
%%SELECTOR%% {
  {% if design.text_colors.text %}
    color: {{ design.text_colors.text }};
  {% endif %}
  {% if design.text_colors.brand %}
    --bde-brand-primary-color: {{ design.text_colors.brand }};
  {% endif %}
}

{% if design.text_colors.headings %}
  %%SELECTOR%% h1, %%SELECTOR%% h2, %%SELECTOR%% h3, %%SELECTOR%% h4, %%SELECTOR%% h5, %%SELECTOR%% h6 {
    color: {{ design.text_colors.headings }};
  }
{% endif %}

{% if design.text_colors.link %}
  %%SELECTOR%% a {
    color: {{ design.text_colors.link }};
  }
{% endif %}

{% if design.text_colors.link_hover %}
  %%SELECTOR%% a:hover {
    color: {{ design.text_colors.link_hover }};
  }
{% endif %}
