@st-namespace 'InputDialog-st-css';
@st-import [ setColor, setVar, createFont, createColor, createFontWithOverrides ] from '../../common/formatters.st';
@st-import TPADialog from '../Dialog/Dialog.st.css';
@st-import [ --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ --wst-primary-background-color-rgb, --wst-paragraph-2-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

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

/*
 * Title font
 * @type font
 */
@property st-global(--wix-ui-tpa-input-dialog-title-font);

/*
 * Title color
 * @type color
 */
@property st-global(--wix-ui-tpa-input-dialog-title-color);

/*
 * Title size
 * @type size
 */
@property st-global(--wix-ui-tpa-input-dialog-title-size);

/*
 * Subtitle font
 * @type font
 */
@property st-global(--wix-ui-tpa-input-dialog-subtitle-font);

/*
 * Subtitle color
 * @type color
 */
@property st-global(--wix-ui-tpa-input-dialog-subtitle-color);

/*
 * Subtitle size
 * @type size
 */
@property st-global(--wix-ui-tpa-input-dialog-subtitle-size);

.root {
  -st-states: mobile, fullscreen;
  -st-mixin:
    setColor(--wix-ui-tpa-dialog-background-color, (--wix-ui-tpa-input-dialog-background-color, --wst-primary-background-color-rgb), '255, 255, 255');
}

.dialog {
  -st-extends: TPADialog;
}

@st-scope .root:fullscreen {
  .dialogContent {
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    max-width: none;
  }

  .dialogChildrenWrapper {
    width: 100%;
    height: 100%;
  }
}

.root:not(:fullscreen).dialog::contentWrapper {
  max-width: 980px;
  max-height: 620px;
}

.root.dialog.dialog::dialogContent {
  padding: 0;
}

.root.dialog.dialog::contentWrapper {
  min-height: 0;
}

.dialogChildrenWrapper {
  display: flex;
  flex-direction: column;
}

.header, .footer {
  padding: 24px;
}

.content {
  padding: 0 24px;
  flex-grow: 1;
  overflow-y: auto;
}

@st-scope .header {
  .title {
    -st-mixin:
    createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "20px", "line-height": "1.4em" }'),
      createFont((--wix-ui-tpa-input-dialog-title-font, --wst-paragraph-2-overriden-font), 'Page-title');
    font-size: var(--wix-ui-tpa-input-dialog-title-size, 20px);
    color: createColor(--wix-ui-tpa-input-dialog-title-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
    overflow-wrap: break-word;
    margin: 0px;
  }
  .subtitle {
    -st-mixin:
    createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "20px", "line-height": "1.4em" }'),
      createFont((--wix-ui-tpa-input-dialog-subtitle-font, --wst-paragraph-2-overriden-font), 'Body-M');
    font-size: var(--wix-ui-tpa-input-dialog-subtitle-size, 16px);
    color: createColor(--wix-ui-tpa-input-dialog-subtitle-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
    margin-top: 4px;
    overflow-wrap: break-word;
  }
}

.footer {
  display: flex;
  flex-direction: row-reverse;
}
.footer .button {
  flex-basis: auto;
}

.footer .button:nth-child(1) {
  margin: 0 12px;
}

.customFooterWrapper {
  padding: 24px;
}

.divider {
  border-bottom: solid #CCCCCC 1px;
}

.button {
  -st-states: primary, secondary;
}

.button:primary {
  -st-mixin:
		setColor(--wix-ui-tpa-button-main-text-color, null, '255, 255, 255'),
		setColor(--wix-ui-tpa-button-main-background-color, null, '0, 0, 0'),
		setColor(--wix-ui-tpa-button-hover-background-color, null, '0, 0, 0', 0.7),
		setColor(--wix-ui-tpa-button-main-border-color, null, '0, 0, 0'),
		setColor(--wix-ui-tpa-button-hover-border-color, null, '0, 0, 0', 0.7);
}

.button:secondary {
  -st-mixin:
		setColor(--wix-ui-tpa-button-main-text-color, null, '0, 0, 0'),
		setColor(--wix-ui-tpa-button-main-background-color, null, '255, 255, 255'),
		setColor(--wix-ui-tpa-button-hover-background-color, null, '255, 255, 255'),
		setColor(--wix-ui-tpa-button-main-border-color, null, '0, 0, 0'),
		setColor(--wix-ui-tpa-button-hover-border-color, null, '0, 0, 0', 0.7);
}

@st-scope .root:mobile {
  .header {
    text-align: center;
  }
  .header .title {
    font-size: 16px;
  }
  .header .subtitle {
    font-size: 14px;
  }

  .dialogChildrenWrapper {
    height: 100%;
  }

  .content {
    overflow-y: auto;
  }

  .footer .button {
    flex-basis: 50%;
  }
}

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