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

:import {
  -st-from: "../Button/Button.deprecated.st.css";
  -st-default: TPAButton;
}

:import {
  -st-from: "../Dialog/Dialog.deprecated.st.css";
  -st-default: TPADialog;
}

:vars {
  DefaultBackgroundColor: #FFFFFF;
  DefaultTitleColor: #000000;
  DefaultSubtitleColor: #000000;

  DefaultTitleStyle: "{theme: 'Page-title', size: '20px', lineHeight: '1.4em'}";
  DefaultSubtitleStyle: "{theme: 'Body-M', size: '20px', lineHeight: '1.4em'}";

  DefaultTitleSize: 20;
  DefaultMobileTitleSize: 16;
  DefaultSubtitleSize: 16;
  DefaultMobileSubtitleSize: 14;
}

:vars {
  BackgroundColor: --overridable;
  TitleStyle: --overridable;
  TitleColor: --overridable;
  TitleSize: --overridable;
  SubtitleStyle: --overridable;
  SubtitleColor: --overridable;
  SubtitleSize: --overridable;
}

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

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

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

:vars {
  backgroundColor: color(fallback(value(BackgroundColor), value(DefaultBackgroundColor)));
  titleStyle: font(fallback(value(TitleStyle), font(value(DefaultTitleStyle))));
  titleColor: color(fallback(value(TitleColor), value(DefaultTitleColor)));
  titleSize: unit(fallback(value(TitleSize), value(DefaultTitleSize)), px);
  subtitleStyle: font(fallback(value(SubtitleStyle), font(value(DefaultSubtitleStyle))));
  subtitleColor: color(fallback(value(SubtitleColor), value(DefaultSubtitleColor)));
  subtitleSize: unit(fallback(value(SubtitleSize), value(DefaultSubtitleSize)), px);
}

.root {
  -st-states: mobile, fullscreen;

  -st-mixin: TPADialog(
    BackgroundColor value(DefaultBackgroundColor)
  );
}

.dialog {
  -st-extends: TPADialog;
}

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

  .dialogChildrenWrapper {
    width: 100vw;
    height: 100vh;
  }
}

.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: scroll;
}

@st-scope .header {
  .title {
    font: font(value(DefaultTitleStyle));
    font-size: unit(value(DefaultTitleSize), px);
    color: color(value(DefaultTitleColor));
    overflow-wrap: break-word;
    margin: 0px;
  }
  .subtitle {
    font: font(value(DefaultSubtitleStyle));
    font-size: unit(value(DefaultSubtitleSize), px);
    color: color(value(DefaultSubtitleColor));
    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: TPAButton(
          MainTextColor #FFFFFF,
          MainBackgroundColor #000000,
          HoverBackgroundColor rgba(0, 0, 0, 0.7),
          MainBorderColor #000000,
          HoverBorderColor rgba(0, 0, 0, 0.7),
  );
}

.button:secondary {
  -st-mixin: TPAButton(
          MainTextColor #000000,
          MainBackgroundColor #FFFFFF,
          HoverBackgroundColor #FFFFFF,
          MainBorderColor #000000,
          HoverBorderColor rgba(0, 0, 0, 0.7),
  );
}

@st-scope .root:mobile {
  .header {
    text-align: center;
  }
  .header .title {
    font-size: unit(value(DefaultMobileTitleSize), px);
  }
  .header .subtitle {
    font-size: unit(value(DefaultMobileSubtitleSize), px);
  }

  .dialogChildrenWrapper {
    height: 100%;
  }

  .content {
    overflow-y: scroll;
  }

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

@st-scope .overrideStyleParams {
  .header .title {
    font: value(titleStyle);
    font-size: value(titleSize);
    color: value(titleColor);
  }
  .header .subtitle {
    font: value(subtitleStyle);
    font-size: value(subtitleSize);
    color: value(subtitleColor);
  }
}

.root.overrideStyleParams {
  -st-mixin: TPADialog(
    BackgroundColor value(backgroundColor)
  );
}


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