@st-namespace 'OverlappingCard-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';

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

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

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

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

.root {
    --infoPadding: 60px;
    --negativeInfoPadding: -60px;
    --MinWidth: 700px;

    -st-states: ratio(enum(100, 50, 40, 30)), flippedRatio, invertInfoPosition, stacked;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    display: inline-grid;
    width: 100%;
    height: 100%;
    min-width: var(--MinWidth);
    grid-template-rows: 1fr 8fr 1fr;
    /*1fr = 10%*/
    grid-template-areas: "media margin-top" "media info" "media margin-bottom";
}

.root:ratio(100) {
    grid-template-areas: "info";
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}

.root:ratio(50) {
    grid-template-columns: 1fr 1fr;
}

.root:ratio(40) {
    grid-template-columns: 4fr 6fr;
}

.root:ratio(40):flippedRatio {
    grid-template-columns: 6fr 4fr;
}

.root:ratio(30) {
    grid-template-columns: 3fr 7fr;
}

.root:ratio(30):flippedRatio {
    grid-template-columns: 7fr 3fr;
}

.root:invertInfoPosition {
    grid-template-areas: ". media" "info media" ". media";
}

/*unsupported grid fallback*/

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

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

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

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

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

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

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

.root:invertInfoPosition > .mediaContainer {
    margin-right: 0;
    margin-left: var(--negativeInfoPadding);
}

.root > .infoContainer {
    background-color: createColor(--wix-ui-tpa-overlapping-card-main-info-color, var(--wix-color-1));
    box-sizing: border-box;
    grid-area: info;
    z-index: 20;
    border-style: solid;
    border-color: createColor(--wix-ui-tpa-overlapping-card-main-border-color, var(--wix-color-5));
    border-width: var(--wix-ui-tpa-overlapping-card-main-border-width, 1px);
    padding: calc(var(--infoPadding) - var(--wix-ui-tpa-overlapping-card-main-border-width, 1px));
}

.root > .mediaContainer {
    --gradient-1: createColor(--wix-ui-tpa-overlapping-card-main-media-color, (var(--wix-color-5), 0.2));
    --gradient-2: createColor(--wix-ui-tpa-overlapping-card-main-info-color, var(--wix-color-5));
    background: linear-gradient(var(--gradient-1), var(--gradient-1)), linear-gradient(var(--gradient-2), var(--gradient-2));
    margin-right: var(--negativeInfoPadding);
    grid-area: media;
}

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