import { css } from '//resources/lit/v3_0/lit.rollup.js';
import { getCss as getCrSharedStyleLit } from '//resources/cr_elements/cr_shared_style_lit.css.js';
import '//resources/cr_elements/cr_shared_vars.css.js';
let instance = null;
export function getCss() {
    return instance || (instance = [...[getCrSharedStyleLit()], css `
:host {
  border-radius: 12px;
  color: var(--cr-primary-text-color);
  display: block;
  overflow: hidden;
  --color-button-background-prominent: var(--color-sys-primary);
  --color-button-foreground-prominent: var(--color-sys-on-primary);
  --color-button-foreground: var(--color-sys-primary);
  --color-button-border: var(--color-sys-tonal-outline);
}

#contentContainer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

:host([is-modal_]) #contentContainer {
  height: auto;
  min-height: auto;
  padding: 20px;
}

#textContainer {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:host([is-modal_]) #textContainer {
  text-align: start;
}

#avatar {
  /** The user avatar may be transparent, add a background */
  background-color: var(--md-background-color);
  border: solid var(--md-background-color);
  border-radius: 50%;
  height: 75px;
  /* To place the avatar at the center of the background image,
     place it at top left point of its parent,
     then shift it back by half its width and height. */
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75px;
}

.dialog-illustration {
  content: url(./images/avatar_surrounding_illustration_light.svg);
  width: 100%;
}

:host([is-modal_]) #illustrationContainer {
  margin-top: auto;
}

#illustrationContainer {
  display: flex;
  justify-content: center;
  position: relative;
}

#imageContainer {
  display: flex;
  /* The height must be set so that the height of this relatively positioned
  container is taken into account in the height calculator of the entire screen. */
  height: 212px;
  justify-content: center;
  /* Establishes a positioning context for absolute children. */
  position: relative;
}

:host([is-modal_]) #imageContainer {
  margin-top: auto;
}

#buttonRow {
  display: flex;
  gap: 8px;
  justify-content: center;

  /* Window case style. */
  box-sizing: border-box;
  width: 100%;
}

:host([is-modal_]) #buttonRow {
  box-sizing: content-box;
  width: auto;
}

#modalDescription {
  /* colors */
  background-color: var(--cr-fallback-color-neutral-container);
  border-top: 1px solid var(--cr-fallback-color-neutral-outline);
  /* fonts */
  font-size: 11px;
  line-height: 20px;
  /* layout */
  padding: 12px 20px 12px 20px;
}

h1 {
  font-size: 24px;
  font-weight: 500;
  margin: 0;
}

:host([is-modal_]) h1 {
  font-size: 16px;
}

#subtitle {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

:host([is-modal_]) #subtitle {
  font-size: inherit;
  font-weight: inherit;
}

#description {
  font-size: 11px;
}

:host([is-modal_]) #description {
  font-size: inherit;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-color-scheme: dark) {
  .dialog-illustration {
    content: url(./images/avatar_surrounding_illustration_dark.svg);
  }
}`]);
}
