@st-namespace 'Dialog-deprecated-st-css';
:import {
    -st-from: "../../common/formatters.st";
    -st-named: color, fallback;
}

:import {
    -st-from: "../IconButton/IconButton.deprecated.st.css";
    -st-default: TPAIconButton
}

:import {
    -st-from: "../../common/palette.st.css";
    -st-named: focusRing;
}

/*Constants*/
:vars {
    NotFullscreenMobilePadding: 20px;
}

/*Overrides*/
:vars {
    CloseButtonColor: --overridable;
    BackgroundColor: --overridable;
}

/*
 * Close button color
 * @type color
 */
@property st-global(--wix-ui-tpa-dialog-close-button-color);

/*
 * Background color
 * @type color
 */
@property st-global(--wix-ui-tpa-dialog-background-color);

/*Fallbacks*/
:vars {
    FixedCloseButtonColor: color(fallback(value(CloseButtonColor), black));
    FixedBackgroundColor: color(fallback(value(BackgroundColor), white));
    WiredCloseButtonColor: color(fallback(value(CloseButtonColor), color-5));
    WiredBackgroundColor: color(fallback(value(BackgroundColor), color-1));
}

.root {
    -st-states: mobile, rtl, wired, notFullscreenMobile;
}

.contentWrapper {
    box-sizing: border-box;
    min-width: 280px;
    max-width: 980px;
    min-height: 240px;
    max-height: 620px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.closeButtonWrapper {
    position: absolute;
    top: 20px;
    right: 20px;
}

.dialogContent {
    padding: 80px 32px;
}

.root:mobile .contentWrapper {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
}

.outerContentWrapper {
    -st-states: appendToBody;
}
.outerContentWrapper:appendToBody *:focus {
    -st-mixin: focusRing();
}

.root:mobile:notFullscreenMobile .outerContentWrapper {
    display: flex;
    align-items: center;
    position:absolute;
    overflow: hidden;

    top: value(NotFullscreenMobilePadding);
    left: value(NotFullscreenMobilePadding);
    width: calc(100% - 2 * value(NotFullscreenMobilePadding));
    height: calc(100% - 2 * value(NotFullscreenMobilePadding));
}

.root:mobile:notFullscreenMobile .contentWrapper{
    position: relative;
    height: auto;
    max-height: 440px;
    min-width: auto;
}

.root:rtl .closeButtonWrapper {
    right: initial;
    left: 20px;
}

/* New style overrides capabilities */
.root:not(:wired).skin-fixed .contentWrapper {
    background-color: value(FixedBackgroundColor);
}

.root:not(:wired).skin-fixed .closeIconButton {
    -st-mixin: TPAIconButton(IconColor value(FixedCloseButtonColor));
}

.root:wired.skin-wired .contentWrapper {
    background-color: value(WiredBackgroundColor);
}

.root:wired.skin-wired .closeIconButton {
    -st-mixin: TPAIconButton(IconColor value(WiredCloseButtonColor));
}

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