.element__wrapper {
  background-color: var(--element-background-color, transparent);
  background-image: var(--element-background-image, none);
  background-size: var(--element-background-size, cover);
  background-repeat: var(--element-background-repeat, no-repeat);
  margin: 0 auto;
  max-width: $builder-page-max-width;
  border-radius: var(--element-background-radius, 0);

  // We use padding here as margin to prevent margin collapsing
  padding: var(--element-margin-top, 0) var(--element-margin-right, 0)
    var(--element-margin-bottom, 0) var(--element-margin-left, 0);

  &--full-bleed {
    max-width: 100%;
  }

  &--full-width {
    max-width: 100%;
  }

  &--medium-width {
    max-width: 960px;
  }

  &--small-width {
    max-width: 680px;
  }
}

.element__inner-wrapper {
  border-top: var(--element-border-top, none);
  border-bottom: var(--element-border-bottom, none);
  border-left: var(--element-border-left, none);
  border-right: var(--element-border-right, none);
  padding: var(--element-padding-top, 0) var(--element-padding-right, 0)
    var(--element-padding-bottom, 0) var(--element-padding-left, 0);
  margin: 0 auto;
  max-width: $builder-page-max-width;
  border-radius: var(--element-border-radius, 0);

  .element__wrapper--full-width & {
    max-width: 100%;
  }
}

.element {
  // Placeholder for element styles
}

.element--no-value {
  opacity: 0.3;
}

.element--alignment-vertical-top {
  align-items: flex-start;
}

.element--alignment-vertical-center {
  align-items: center;
}

.element--alignment-vertical-bottom {
  align-items: flex-end;
}

.element--alignment-horizontal-left {
  justify-content: flex-start;
}

.element--alignment-horizontal-center {
  justify-content: center;
}

.element--alignment-horizontal-right {
  justify-content: flex-end;
}

.element--read-only {
  & .ab-button,
  & .ab-input {
    pointer-events: none;
    user-select: none;
  }
}

.element--element-id {
  font-size: 12px;
  color: rgb(87, 86, 86);
}
