@st-namespace 'LegacyCard-st-css';
@st-import [ --wix-color-1, --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor ] from '../../common/formatters.st';

/*
 * Card color
 * @type color
 */
@property st-global(--wix-ui-tpa-legacy-card-main-card-color);

/*
 * Border width
 * @type size
 */
@property st-global(--wix-ui-tpa-legacy-card-main-border-width);

/*
 * Border color
 * @type color
 */
@property st-global(--wix-ui-tpa-legacy-card-main-border-color);

/*
 * Info color
 * @type color
 */
@property st-global(--wix-ui-tpa-legacy-card-main-info-color);

/*
 * Media color
 * @type color
 */
@property st-global(--wix-ui-tpa-legacy-card-main-media-color);

/*
 * Info side padding
 * @type size
 */
@property st-global(--wix-ui-tpa-legacy-card-stacked-info-side-padding);

.root {
  background-color: createColor(--wix-ui-tpa-legacy-card-main-card-color, var(--wix-color-1));
}

.deprecated {
  -st-states: ratio(enum(100, 50, 40, 30)), flippedRatio, invertInfoPosition, stacked, mediaAspectRatio, mobile;
}

.root.deprecated {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: createColor(--wix-ui-tpa-legacy-card-main-border-color, var(--wix-color-5));
  border-width: var(--wix-ui-tpa-legacy-card-main-border-width, 1px);
  min-width: 700px;
}

.root.deprecated:stacked {
  min-width: 130px;
}

.root.deprecated:stacked:invertInfoPosition:mobile,
.root.deprecated:stacked:mobile,
.root.deprecated:stacked {
  flex-direction: column;
}

.root.deprecated:invertInfoPosition {
  flex-direction: row-reverse;
}

.root.deprecated:stacked:invertInfoPosition {
  flex-direction: column-reverse;
  justify-content: space-between;
}

.root.deprecated:ratio(100) > .infoContainer {
  flex: 100%;
}

.root.deprecated:ratio(50) > .mediaWrapper,
.root.deprecated:ratio(50) > .infoContainer {
  flex: 50%;
}

.root.deprecated:ratio(40):flippedRatio:invertInfoPosition > .mediaWrapper,
.root.deprecated:ratio(40):invertInfoPosition > .infoContainer,
.root.deprecated:ratio(40):flippedRatio > .infoContainer,
.root.deprecated:ratio(40) > .mediaWrapper {
  flex: 40%;
}

.root.deprecated:ratio(40):flippedRatio:invertInfoPosition > .infoContainer,
.root.deprecated:ratio(40):invertInfoPosition > .mediaWrapper,
.root.deprecated:ratio(40):flippedRatio > .mediaWrapper,
.root.deprecated:ratio(40) > .infoContainer {
  flex: 60%;
}

.root.deprecated:ratio(30):flippedRatio:invertInfoPosition > .mediaWrapper,
.root.deprecated:ratio(30):invertInfoPosition > .infoContainer,
.root.deprecated:ratio(30):flippedRatio > .infoContainer,
.root.deprecated:ratio(30) > .mediaWrapper {
  flex: 30%;
}

.root.deprecated:ratio(30):flippedRatio:invertInfoPosition > .infoContainer,
.root.deprecated:ratio(30):invertInfoPosition > .mediaWrapper,
.root.deprecated:ratio(30):flippedRatio > .mediaWrapper,
.root.deprecated:ratio(30) > .infoContainer {
  flex: 70%;
}

.root.deprecated:stacked:mediaAspectRatio:invertInfoPosition > .mediaWrapper {
  flex-grow: 0;
  flex-basis: auto;
}

.root.deprecated:mediaAspectRatio > .mediaWrapper {
  position: relative;
  flex: 0 0 0;
}

.root.deprecated:mediaAspectRatio > .mediaWrapper > .mediaContainer {
  position: absolute;
  top: 0;
  width: 100%;
}

.root .mediaContainer {
  background-color: createColor(--wix-ui-tpa-legacy-card-main-media-color, (var(--wix-color-5), 0.2));
  height: 100%;
}

.root > .infoContainer {
  box-sizing: border-box;
  background-color: createColor(--wix-ui-tpa-legacy-card-main-info-color, var(--wix-color-1));
  padding: calc(60px - var(--wix-ui-tpa-legacy-card-main-border-width, 1px));
}

.root.deprecated:stacked > .infoContainer {
  padding: calc(32px - var(--wix-ui-tpa-legacy-card-main-border-width, 1px));
  padding-left: calc(var(--wix-ui-tpa-legacy-card-stacked-info-side-padding, 32px) - var(--wix-ui-tpa-legacy-card-main-border-width, 1px));
  padding-right: calc(var(--wix-ui-tpa-legacy-card-stacked-info-side-padding, 32px) - var(--wix-ui-tpa-legacy-card-main-border-width, 1px));
}

.root.deprecated:mobile > .infoContainer {
  padding: calc(20px - var(--wix-ui-tpa-legacy-card-main-border-width, 1px));
}

/* st-namespace-reference="../../../../src/components/LegacyCard/LegacyCard.st.css" */