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

/*
 * 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);

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

  --white: 255, 255, 255;
  --black: 0, 0, 0;
}

.contentWrapper {
  box-sizing: border-box;
  min-width: 280px;
  max-width: 980px;
  min-height: 240px;
  max-height: min(100vh, 620px);

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

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

.dialogContent {
  padding: 80px 32px;
}

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

.root:mobile:not(:notFullscreenMobile) .contentWrapper {
  max-width: none;
  max-height: 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: 20px;
  left: 20px;
  width: calc(100% - 2 * 20px);
  height: calc(100% - 2 * 20px);
}

.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: createColor(--wix-ui-tpa-dialog-background-color, var(--white));
}

.root:not(:wired).skin-fixed .closeIconButton {
  -st-mixin:
    setColor(--wix-ui-tpa-icon-button-icon-color, --wix-ui-tpa-dialog-close-button-color, var(--black));
}

.root:wired.skin-wired .contentWrapper {
  background-color: createColor(--wix-ui-tpa-dialog-background-color, var(--wix-color-1));
}

.root:wired.skin-wired .closeIconButton {
  -st-mixin:
    setColor(--wix-ui-tpa-icon-button-icon-color, --wix-ui-tpa-dialog-close-button-color, var(--wix-color-5));
}

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