.bg-boxed {
  .container,
  .container-xs,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-fluid {
    background-color: $colorContentBackground;
  }
}

.bg-fullsize {
  background-color: $colorContentBackground;
}

.et-widget {
  position: relative;

  .container,
  .container-xs,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-fluid {
    padding-top: $grid-gutter-width / 2;
    padding-bottom: $grid-gutter-width / 2;

    .container,
    .container-xs,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-fluid {
      // neutralize containers in containers
      padding: 0;
      max-width: none;
    }
  }
}

.et-menu,
.et-widget {
  position: relative;

  &.et-admin {
    $etAdminBackground: #308FE0;
    $etAdminColor: white;

    &:hover {
      outline-color: $etAdminBackground;
      outline-offset: -1px;
      outline-style: dashed;
      outline-width: 1px;
    }

    .et-admin-link {
      position: absolute;
      top: 10px;
      right: 10px;
      display: none;
      padding: 8px 12px;
      border-radius: 50px;
      line-height: $line-height-base;
      color: $etAdminColor !important;
      background-color: $etAdminBackground !important;

      &:hover, &:active, &:focus {
        background-color: darken($etAdminBackground, 20%) !important;
      }
    }

    &:hover {
      .et-admin-link {
        display: block;
      }
    }
  }
}

.et-textfield.et-has-second-headline {
  margin-bottom: 0;
}

/* Helper classes to hide elements on a single breakpoint only which is not sufficiently implemented in BS4 */
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-only($breakpoint) {
    .et-hidden-#{$breakpoint}-only {
      display: none;
    }
  }
}
/* Helper classes to show elements on a single breakpoint only which is not sufficiently implemented in BS4 */
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-only($breakpoint) {
    @each $breakpoint2 in map-keys($grid-breakpoints) {
      @if $breakpoint2 != $breakpoint {
        .et-visible-#{$breakpoint2}-only {
          display: none;
        }
      }
    }
  }
}