$column-margin: 20px;
$one-column-width: $newsletter-width - (2 * $column-margin);
$two-column-width: $newsletter-width / 2 - (2 * $column-margin);
$three-column-width: $newsletter-width / 3 - (2 * $column-margin);
$two-column-wider-column-width: (($newsletter-width / 3) - $column-margin) * 2;

.mailpoet_container {
  min-height: 15px;
  position: relative;
  width: 100%;
}

.mailpoet_container_block {
  border: 0;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.mailpoet_container_vertical > * {
  box-sizing: border-box;
  width: 100%;
}

.mailpoet_container_horizontal > * {
  vertical-align: top;
}


#mailpoet_editor_content {
  .mailpoet_container {
    box-sizing: border-box;
    float: left;
  }
  & > .mailpoet_container_block {
    border: 0;
    width: $newsletter-width;
  }

  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block {
    margin-bottom: 0;
  }

  .mailpoet_container_horizontal > .mailpoet_container_block {
    margin-bottom: 0;
    width: $column-margin + $one-column-width + $column-margin;
  }
  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_posts_block > .mailpoet_posts_container > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
  & > .mailpoet_container_block > .mailpoet_container .mailpoet_automated_latest_content_block_posts .mailpoet_container_horizontal,
  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_products_block > .mailpoet_products_container > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
  & > .mailpoet_container_block > .mailpoet_container .mailpoet_automated_latest_content_block_products .mailpoet_container_horizontal {
    & > .mailpoet_block:first-child:nth-last-child(2),
    & > .mailpoet_block:first-child:nth-last-child(2) ~ .mailpoet_block {


      width: $column-margin + $two-column-width + $column-margin;
    }
    & > .mailpoet_block:first-child:nth-last-child(3),
    & > .mailpoet_block:first-child:nth-last-child(3) ~ .mailpoet_block {


      width: $column-margin + $three-column-width + $column-margin;
    }
  }

  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_1_2 > .mailpoet_container_block:first-child,
  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_2_1 > .mailpoet_container_block:nth-child(2) {
    width: $column-margin + $three-column-width + $column-margin;
  }

  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_2_1 > .mailpoet_container_block:first-child,
  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_1_2 > .mailpoet_container_block:nth-child(2) {
    width: $column-margin + $two-column-wider-column-width + $column-margin;
  }
}

.mailpoet_container_empty {
  background-color: #f2f2f2;
  border-radius: 3px;
  box-shadow: inset 1px 2px 1px $primary-inactive-color;
  color: #656565;
  margin: 20px;
  padding: 15px;
  text-align: center;
  @include animation-background-color();
}