wix-style-react/dist/src/MessageBoxMarketerialLayout/MessageBoxMarketerialLayout.st.css

wix-style-react

:import {
  -st-from: "../Foundation/stylable/colors.st.css";
  -st-named: D80, P10, B10, D10, D70;
}

:import {
  -st-from: '../Foundation/stylable/shadows.st.css';
  -st-named: shadow40;
}

.root {
  box-shadow: value(shadow40);
  background-color: value(D80);
  border-radius: 8px;
}

.header {
  -st-states: theme(enum(blue, purple, white)), imageExists, newColorsBranding;
  border-radius: 8px 8px 0 0;
  height: 54px;
  position: relative;
}

.header:imageExists {
  height: 120px;
  margin-bottom: 65px;
}

.header:theme(purple) {
  background-color: value(P10);
}

.header:theme(white) {
  background-color: value(D80);
}

.header:theme(blue) {
  background-color: value(B10);
}

.header:newColorsBranding {
  height: auto;
  background-color: transparent;
  margin-bottom: 0;
  min-height: 48px;
}

.headerImage {
  -st-states: newColorsBranding;
  width: 300px;
  height: 185px;
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  top: 20%;
}

.headerImage:newColorsBranding {
  position: relative;
  padding-top: 48px;
  margin-bottom: 30px;
  margin-bottom: 30px;
  max-height: 200px;
  min-height: 120px;
  max-width: 444px;
  overflow: hidden;
  height: auto;
  width: auto;
}

.headerImage img {
  max-width: 300px;
  max-height: 185px;
}

.headerImage:newColorsBranding img {
  max-width: none;
  max-height: none
}

.headerImageComponent {
  -st-states: newColorsBranding;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.headerImageComponent:newColorsBranding {
  position: relative;
  padding-top: 48px;
  margin-bottom: 30px;
}

.title {
  -st-states: shouldDisplayBodyPadding, newColorsBranding;
  margin-bottom: 19px;
  text-align: center;
  color: value(D10);
}

.title:newColorsBranding {
  padding: 0 78px;
  margin-bottom: 12px;
}

.title:shouldDisplayBodyPadding {
  padding: 0 108px;
}

.content {
  -st-states: shouldDisplayBodyPadding, newColorsBranding;
  text-align: center;
  color: value(D10);
  margin-bottom: 48px;
}

.content:shouldDisplayBodyPadding {
  padding: 0 108px;
}

.content:newColorsBranding {
  padding: 0 78px;
  margin-bottom: 42px;
}

.emptyButtonsContainer {
  padding-bottom: 0.1px;
}

.buttonsContainer {
  -st-states: noPadding, newColorsBranding;
  text-align: center;
  padding-bottom: 44px;
}

.buttonsContainer:newColorsBranding {
  padding-bottom: 48px;
}

.buttonsContainer:noPadding {
  padding-bottom: 0;
}

.secondaryButtonContainer {
  margin-top: 18px;
}

.bottomChildren {
  -st-states: newColorsBranding;
  margin-top: -28px;
  min-height: 42px;
  border-radius: 0 0 8px 8px;
  background-color: value(D70);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  box-sizing: border-box;
}

.bottomChildren:newColorsBranding {
  margin-top: 0;
}

.close {
  -st-states: newColorsBranding;
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 10;
}

.close:newColorsBranding {
  right: 12px;
  top: 12px;
}

:global([dir="rtl"]) .close {
  right: auto;
  left: 18px;
}

/* st-namespace-reference="../../../src/MessageBoxMarketerialLayout/MessageBoxMarketerialLayout.st.css" */