/* 
Ziel: Nutzer darf alles setzten für max-width - solange es nicht aus dem Layout ausbricht.

Logik: Nehme die kleinste Größe für max width
- Vom container (--wp--style--global--content-size oder --wp--style--global--wide-size)
- Vom Block selbst
*/

/* 
In einem constarained layout (unser "Inhalts"-Block), Blöcke mit ermisch-dimensions, die aber nicht explizit aligned sind
*/
.is-layout-constrained
  > :where(.has-ermisch-dimensions:not(.alignfull, .alignwide, .alignleft, .alignright)) {
  max-width: min(
    var(--wp--style--global--content-size),
    var(--blockWidthMax-desktop, var(--wp--style--global--content-size))
  ) !important;
}

/* Ich weiß nicht, wofür das hier war, aber ich lasse es mal drin, falls wir es doch noch brauchen. Allerdings hatte das hier Probleme verursacht */
/* .is-layout-constrained > .alignwide.has-ermisch-dimensions,
.block-editor-block-list__layout.is-root-container > .alignwide.has-ermisch-dimensions {
  max-width: min(
    var(--wp--style--global--wide-size),
    var(--blockWidthMax-desktop, var(--wp--style--global--wide-size))
  ) !important;
} */

.has-ermisch-dimensions {
  /* Initial Values */
  --blockWidthMin-desktop: initial;
  --blockWidthMin-tablet: initial;
  --blockWidthMin-mobile: initial;
  --blockWidth-desktop: initial;
  --blockWidth-tablet: initial;
  --blockWidth-mobile: initial;
  --blockWidthMax-desktop: initial;
  --blockWidthMax-tablet: initial;
  --blockWidthMax-mobile: initial;
  --blockHeightMin-desktop: initial;
  --blockHeightMin-tablet: initial;
  --blockHeightMin-mobile: initial;
  --blockHeight-desktop: initial;
  --blockHeight-tablet: initial;
  --blockHeight-mobile: initial;
  --blockHeightMax-desktop: initial;
  --blockHeightMax-tablet: initial;
  --blockHeightMax-mobile: initial;

  /* Desktop Styles */
  min-width: var(--blockWidthMin-desktop, initial);
  width: var(--blockWidth-desktop, initial);
  max-width: var(--blockWidthMax-desktop, initial);

  min-height: var(--blockHeightMin-desktop, initial);
  height: var(--blockHeight-desktop, initial);
  max-height: var(--blockHeightMax-desktop, initial);
}

.has-ermisch-spacing {
  /* Initial Values */
  --padding-top-desktop: initial;
  --padding-top-tablet: initial;
  --padding-top-mobile: initial;
  --padding-right-desktop: initial;
  --padding-right-tablet: initial;
  --padding-right-mobile: initial;
  --padding-bottom-desktop: initial;
  --padding-bottom-tablet: initial;
  --padding-bottom-mobile: initial;
  --padding-left-desktop: initial;
  --padding-left-tablet: initial;
  --padding-left-mobile: initial;

  --margin-top-desktop: initial;
  --margin-top-tablet: initial;
  --margin-top-mobile: initial;
  --margin-right-desktop: initial;
  --margin-right-tablet: initial;
  --margin-right-mobile: initial;
  --margin-bottom-desktop: initial;
  --margin-bottom-tablet: initial;
  --margin-bottom-mobile: initial;
  --margin-left-desktop: initial;
  --margin-left-tablet: initial;
  --margin-left-mobile: initial;

  --gap-right-desktop: initial;
  --gap-right-tablet: initial;
  --gap-right-mobile: initial;

  /* Desktop Styles */
  padding-top: var(--padding-top-desktop, initial) !important;
  padding-right: var(--padding-right-desktop, initial) !important;
  padding-bottom: var(--padding-bottom-desktop, initial) !important;
  padding-left: var(--padding-left-desktop, initial) !important;

  margin-top: var(--margin-top-desktop, initial) !important;
  margin-right: var(--margin-right-desktop, initial);
  margin-bottom: var(--margin-bottom-desktop, initial) !important;
  margin-left: var(--margin-left-desktop, initial);

  gap: var(--gap-right-desktop, initial);
}

.has-ermisch-borders {
  /* Initial Values */
  --border-top-width-desktop: initial;
  --border-top-width-tablet: initial;
  --border-top-width-mobile: initial;
  --border-top-style-desktop: initial;
  --border-top-style-tablet: initial;
  --border-top-style-mobile: initial;
  --border-top-color-desktop: initial;
  --border-top-color-tablet: initial;
  --border-top-color-mobile: initial;

  --border-right-width-desktop: initial;
  --border-right-width-tablet: initial;
  --border-right-width-mobile: initial;
  --border-right-style-desktop: initial;
  --border-right-style-tablet: initial;
  --border-right-style-mobile: initial;
  --border-right-color-desktop: initial;
  --border-right-color-tablet: initial;
  --border-right-color-mobile: initial;

  --border-bottom-width-desktop: initial;
  --border-bottom-width-tablet: initial;
  --border-bottom-width-mobile: initial;
  --border-bottom-style-desktop: initial;
  --border-bottom-style-tablet: initial;
  --border-bottom-style-mobile: initial;
  --border-bottom-color-desktop: initial;
  --border-bottom-color-tablet: initial;
  --border-bottom-color-mobile: initial;

  --border-left-width-desktop: initial;
  --border-left-width-tablet: initial;
  --border-left-width-mobile: initial;
  --border-left-style-desktop: initial;
  --border-left-style-tablet: initial;
  --border-left-style-mobile: initial;
  --border-left-color-desktop: initial;
  --border-left-color-tablet: initial;
  --border-left-color-mobile: initial;

  --borderRadius-topLeft-desktop: initial;
  --borderRadius-topLeft-tablet: initial;
  --borderRadius-topLeft-mobile: initial;
  --borderRadius-topRight-desktop: initial;
  --borderRadius-topRight-tablet: initial;
  --borderRadius-topRight-mobile: initial;
  --borderRadius-bottomLeft-desktop: initial;
  --borderRadius-bottomLeft-tablet: initial;
  --borderRadius-bottomLeft-mobile: initial;
  --borderRadius-bottomRight-desktop: initial;
  --borderRadius-bottomRight-tablet: initial;
  --borderRadius-bottomRight-mobile: initial;

  /* Desktop Styles */

  border-top: var(--border-top-width-desktop, initial) var(--border-top-style-desktop, initial)
    var(--border-top-color-desktop, initial) !important;
  border-right: var(--border-right-width-desktop, initial)
    var(--border-right-style-desktop, initial) var(--border-right-color-desktop, initial) !important;
  border-bottom: var(--border-bottom-width-desktop, initial)
    var(--border-bottom-style-desktop, initial) var(--border-bottom-color-desktop, initial) !important;
  border-left: var(--border-left-width-desktop, initial) var(--border-left-style-desktop, initial)
    var(--border-left-color-desktop, initial) !important;

  border-top-left-radius: var(--borderRadius-topLeft-desktop, initial) !important;
  border-top-right-radius: var(--borderRadius-topRight-desktop, initial) !important;
  border-bottom-left-radius: var(--borderRadius-bottomLeft-desktop, initial) !important;
  border-bottom-right-radius: var(--borderRadius-bottomRight-desktop, initial) !important;
}

.has-ermisch-flexbox {
  /* Initial Values */
  --wrap-desktop: initial;
  --wrap-tablet: initial;
  --wrap-mobile: initial;

  --direction-desktop: initial;
  --direction-tablet: initial;
  --direction-mobile: initial;

  --justifyContent-desktop: initial;
  --justifyContent-tablet: initial;
  --justifyContent-mobile: initial;

  --alignItems-desktop: initial;
  --alignItems-tablet: initial;
  --alignItems-mobile: initial;

  --textAlign-desktop: initial;
  --textAlign-tablet: initial;
  --textAlign-mobile: initial;

  --flexShrink-desktop: initial;
  --flexShrink-tablet: initial;
  --flexShrink-mobile: initial;

  --flexGrow-desktop: initial;
  --flexGrow-tablet: initial;
  --flexGrow-mobile: initial;

  --flexBasis-desktop: initial;
  --flexBasis-tablet: initial;
  --flexBasis-mobile: initial;

  --flexOrder-desktop: initial;
  --flexOrder-tablet: initial;
  --flexOrder-mobile: initial;

  /* Desktop Styles */
  display: flex;
  box-sizing: border-box;

  flex-wrap: var(--wrap-desktop, initial);
  flex-direction: var(--direction-desktop, initial);

  justify-content: var(--justifyContent-desktop, initial);
  align-items: var(--alignItems-desktop, initial);
  text-align: var(--textAlign-desktop, initial);

  flex-shrink: var(--flexShrink-desktop, initial);
  flex-grow: var(--flexGrow-desktop, initial);
  flex-basis: var(--flexBasis-desktop, initial);
  order: var(--flexOrder-desktop, initial);
}

/* Tablet Styles */
@media (max-width: 1024px) {
  .has-ermisch-dimensions {
    min-width: var(--blockWidthMin-tablet, var(--blockWidthMin-desktop, initial));
    width: var(--blockWidth-tablet, var(--blockWidth-desktop, initial));
    max-width: var(--blockWidthMax-tablet, var(--blockWidthMax-desktop, initial));

    min-height: var(--blockHeightMin-tablet, var(--blockHeightMin-desktop, initial));
    height: var(--blockHeight-tablet, var(--blockHeight-desktop, initial));
    max-height: var(--blockHeightMax-tablet, var(--blockHeightMax-desktop, initial));
  }
  .has-ermisch-spacing {
    padding-top: var(--padding-top-tablet, var(--padding-top-desktop, initial)) !important;
    padding-right: var(--padding-right-tablet, var(--padding-right-desktop, initial)) !important;
    padding-bottom: var(--padding-bottom-tablet, var(--padding-bottom-desktop, initial)) !important;
    padding-left: var(--padding-left-tablet, var(--padding-left-desktop, initial)) !important;

    margin-top: var(--margin-top-tablet, var(--margin-top-desktop, initial)) !important;
    margin-right: var(--margin-right-tablet, var(--margin-right-desktop, initial)) !important;
    margin-bottom: var(--margin-bottom-tablet, var(--margin-bottom-desktop, initial)) !important;
    margin-left: var(--margin-left-tablet, var(--margin-left-desktop, initial)) !important;

    gap: var(--gap-right-tablet, var(--gap-right-desktop, initial));
  }

  .has-ermisch-borders {
    border-top: var(--border-top-width-tablet, var(--border-top-width-desktop, initial))
      var(--border-top-style-tablet, var(--border-top-style-desktop, initial))
      var(--border-top-color-tablet, var(--border-top-color-desktop, initial)) !important;
    border-right: var(--border-right-width-tablet, var(--border-right-width-desktop, initial))
      var(--border-right-style-tablet, var(--border-right-style-desktop, initial))
      var(--border-right-color-tablet, var(--border-right-color-desktop, initial)) !important;
    border-bottom: var(--border-bottom-width-tablet, var(--border-bottom-width-desktop, initial))
      var(--border-bottom-style-tablet, var(--border-bottom-style-desktop, initial))
      var(--border-bottom-color-tablet, var(--border-bottom-color-desktop, initial)) !important;
    border-left: var(--border-left-width-tablet, var(--border-left-width-desktop, initial))
      var(--border-left-style-tablet, var(--border-left-style-desktop, initial))
      var(--border-left-color-tablet, var(--border-left-color-desktop, initial)) !important;

    border-top-left-radius: var(
      --borderRadius-topLeft-tablet,
      var(--borderRadius-topLeft-desktop, initial)
    ) !important;
    border-top-right-radius: var(
      --borderRadius-topRight-tablet,
      var(--borderRadius-topRight-desktop, initial)
    ) !important;
    border-bottom-left-radius: var(
      --borderRadius-bottomLeft-tablet,
      var(--borderRadius-bottomLeft-desktop, initial)
    ) !important;
    border-bottom-right-radius: var(
      --borderRadius-bottomRight-tablet,
      var(--borderRadius-bottomRight-desktop, initial)
    ) !important;
  }

  .has-ermisch-flexbox {
    flex-wrap: var(--wrap-tablet, var(--wrap-desktop, initial));
    flex-direction: var(--direction-tablet, var(--direction-desktop, initial));

    justify-content: var(--justifyContent-tablet, var(--justifyContent-desktop, initial));
    align-items: var(--alignItems-tablet, var(--alignItems-desktop, initial));
    text-align: var(--textAlign-tablet, var(--textAlign-desktop, initial));

    flex-shrink: var(--flexShrink-tablet, var(--flexShrink-desktop, initial));
    flex-grow: var(--flexGrow-tablet, var(--flexGrow-desktop, initial));
    flex-basis: var(--flexBasis-tablet, var(--flexBasis-desktop, initial));
    order: var(--flexOrder-tablet, var(--flexOrder-desktop, initial));
  }
}

/** Mobile Styles */
@media (max-width: 640px) {
  .has-ermisch-dimensions {
    min-width: var(
      --blockWidthMin-mobile,
      var(--blockWidthMin-tablet, var(--blockWidthMin-desktop, initial))
    );
    width: var(--blockWidth-mobile, var(--blockWidth-tablet, var(--blockWidth-desktop, initial)));
    max-width: var(
      --blockWidthMax-mobile,
      var(--blockWidthMax-tablet, var(--blockWidthMax-desktop, initial))
    );

    min-height: var(
      --blockHeightMin-mobile,
      var(--blockHeightMin-tablet, var(--blockHeightMin-desktop, initial))
    );
    height: var(
      --blockHeight-mobile,
      var(--blockHeight-tablet, var(--blockHeight-desktop, initial))
    );
    max-height: var(
      --blockHeightMax-mobile,
      var(--blockHeightMax-tablet, var(--blockHeightMax-desktop, initial))
    );
  }

  .has-ermisch-spacing {
    padding-top: var(
      --padding-top-mobile,
      var(--padding-top-tablet, var(--padding-top-desktop, initial))
    ) !important;
    padding-right: var(
      --padding-right-mobile,
      var(--padding-right-tablet, var(--padding-right-desktop, initial))
    ) !important;
    padding-bottom: var(
      --padding-bottom-mobile,
      var(--padding-bottom-tablet, var(--padding-bottom-desktop, initial))
    ) !important;
    padding-left: var(
      --padding-left-mobile,
      var(--padding-left-tablet, var(--padding-left-desktop, initial))
    ) !important;

    margin-top: var(
      --margin-top-mobile,
      var(--margin-top-tablet, var(--margin-top-desktop, initial))
    ) !important;
    margin-right: var(
      --margin-right-mobile,
      var(--margin-right-tablet, var(--margin-right-desktop, initial))
    ) !important;
    margin-bottom: var(
      --margin-bottom-mobile,
      var(--margin-bottom-tablet, var(--margin-bottom-desktop, initial))
    ) !important;
    margin-left: var(
      --margin-left-mobile,
      var(--margin-left-tablet, var(--margin-left-desktop, initial))
    ) !important;

    gap: var(--gap-right-mobile, var(--gap-right-tablet, var(--gap-right-desktop, initial)));
  }

  .has-ermisch-borders {
    border-top: var(
        --border-top-width-mobile,
        var(--border-top-width-tablet, var(--border-top-width-desktop, initial))
      )
      var(
        --border-top-style-mobile,
        var(--border-top-style-tablet, var(--border-top-style-desktop, initial))
      )
      var(
        --border-top-color-mobile,
        var(--border-top-color-tablet, var(--border-top-color-desktop, initial))
      ) !important;
    border-right: var(
        --border-right-width-mobile,
        var(--border-right-width-tablet, var(--border-right-width-desktop, initial))
      )
      var(
        --border-right-style-mobile,
        var(--border-right-style-tablet, var(--border-right-style-desktop, initial))
      )
      var(
        --border-right-color-mobile,
        var(--border-right-color-tablet, var(--border-right-color-desktop, initial))
      ) !important;
    border-bottom: var(
        --border-bottom-width-mobile,
        var(--border-bottom-width-tablet, var(--border-bottom-width-desktop, initial))
      )
      var(
        --border-bottom-style-mobile,
        var(--border-bottom-style-tablet, var(--border-bottom-style-desktop, initial))
      )
      var(
        --border-bottom-color-mobile,
        var(--border-bottom-color-tablet, var(--border-bottom-color-desktop, initial))
      ) !important;
    border-left: var(
        --border-left-width-mobile,
        var(--border-left-width-tablet, var(--border-left-width-desktop, initial))
      )
      var(
        --border-left-style-mobile,
        var(--border-left-style-tablet, var(--border-left-style-desktop, initial))
      )
      var(
        --border-left-color-mobile,
        var(--border-left-color-tablet, var(--border-left-color-desktop, initial))
      ) !important;

    border-top-left-radius: var(
      --borderRadius-topLeft-mobile,
      var(--borderRadius-topLeft-tablet, var(--borderRadius-topLeft-desktop, initial))
    ) !important;
    border-top-right-radius: var(
      --borderRadius-topRight-mobile,
      var(--borderRadius-topRight-tablet, var(--borderRadius-topRight-desktop, initial))
    ) !important;
    border-bottom-left-radius: var(
      --borderRadius-bottomLeft-mobile,
      var(--borderRadius-bottomLeft-tablet, var(--borderRadius-bottomLeft-desktop, initial))
    ) !important;
    border-bottom-right-radius: var(
      --borderRadius-bottomRight-mobile,
      var(--borderRadius-bottomRight-tablet, var(--borderRadius-bottomRight-desktop, initial))
    ) !important;
  }

  .has-ermisch-flexbox {
    flex-wrap: var(--wrap-mobile, var(--wrap-tablet, var(--wrap-desktop, initial)));
    flex-direction: var(
      --direction-mobile,
      var(--direction-tablet, var(--direction-desktop, initial))
    );

    justify-content: var(
      --justifyContent-mobile,
      var(--justifyContent-tablet, var(--justifyContent-desktop, initial))
    );
    align-items: var(
      --alignItems-mobile,
      var(--alignItems-tablet, var(--alignItems-desktop, initial))
    );
    text-align: var(--textAlign-mobile, var(--textAlign-tablet, var(--textAlign-desktop, initial)));

    flex-shrink: var(
      --flexShrink-mobile,
      var(--flexShrink-tablet, var(--flexShrink-desktop, initial))
    );
    flex-grow: var(--flexGrow-mobile, var(--flexGrow-tablet, var(--flexGrow-desktop, initial)));
    flex-basis: var(--flexBasis-mobile, var(--flexBasis-tablet, var(--flexBasis-desktop, initial)));
    order: var(--flexOrder-mobile, var(--flexOrder-tablet, var(--flexOrder-desktop, initial)));
  }
}

/* 
  .accordion-block,
  .accordionButton,
  .currency-switcher,
  .heading-sticky-image  */