@mixin detailedImagesProps() {
  .component-properties {
    flex-flow: column nowrap;

    .imagedetails-property-container {
      .array-property {
        .property-group {
          .properties-container {
            display: flex;
            flex-wrap: wrap;

            .property-container {
              width: calc(25% - 11.25px);

              &.x1-property-container,
              &.y1-property-container,
              &.dx1-property-container,
              &.x2-property-container,
              &.y2-property-container,
              &.dx2-property-container,
              &.x3-property-container,
              &.y3-property-container,
              &.dx3-property-container,
              &.x4-property-container,
              &.y4-property-container,
              &.dx4-property-container,
              &.x5-property-container,
              &.y5-property-container,
              &.dx5-property-container {
                margin-right: calculateRem(15);
              }

              &.image-property-container,
              &.label_1-property-container,
              &.description_1-property-container,
              &.label_2-property-container,
              &.description_2-property-container,
              &.label_3-property-container,
              &.description_3-property-container,
              &.label_4-property-container,
              &.description_4-property-container,
              &.label_5-property-container,
              &.description_5-property-container {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
}

@mixin halfAndHalfProps($exclude-class: null) {
  @if ($exclude-class == null) {
    .component-properties {
      & > .property-container {
        width: calc(50% - 35px);
      }
    }
  }
  @else {
    .component-properties {
      & > .property-container:not(.#{$exclude-class}-property-container) {
        width: calc(50% - 35px);
      }
      & > .#{$exclude-class}-property-container {
        width: 100%;
      }
    }
  }
}

@mixin guillotineImagesProps() {
  .component-properties {
    & > .property-container {
      width: 100%;
    }

    & > .image_1-property-container,
    & > .subtitle_1-property-container,
    & > .button_text_1-property-container,
    & > .button_url_1-property-container,
    & > .image_2-property-container,
    & > .subtitle_2-property-container,
    & > .button_text_2-property-container,
    & > .button_url_2-property-container {
      width: calc(50% - 35px);
    }
  }
}

@mixin meetTheTeamProps() {
  .component-properties {
    .title-property-container {
      width: 50%;
      padding-right: calculateRem(35);
    }
    .subtitle-property-container {
      width: 50%;
      padding-left: calculateRem(35);
    }
    .paragraph_text-property-container {
      width: 100%;
    }
  }
}

@mixin verticalProps() {
  .component-properties {
    flex-flow: column nowrap;
  }
}

@mixin videoDescriptionProps() {
  .component-properties {
    .video-property-container {
      width: 50%;
      padding-right: calculateRem(15);
    }
    .video_width-property-container, .autoplay-property-container {
      width: 16.666666%;
      padding-right: calculateRem(15);
      padding-left: calculateRem(15);
    }
    .loop-property-container {
      width: 16.666666%;
      padding-left: calculateRem(15);
    }
    .description-property-container {
      width: 100%;
    }
  }
}