import { css } from '//resources/lit/v3_0/lit.rollup.js';
import '../cr_shared_vars.css.js';
import { getCss as getCrHiddenStyleLit } from '../cr_hidden_style_lit.css.js';
import { getCss as getCrIconsLit } from '../cr_icons_lit.css.js';
import { getCss as getCrScrollableLit } from '../cr_scrollable_lit.css.js';
let instance = null;
export function getCss() {
    return instance || (instance = [...[getCrHiddenStyleLit(), getCrIconsLit(), getCrScrollableLit()], css `
dialog {
  background-color: var(--cr-dialog-background-color, white);
  border: 0;
  border-radius: var(--cr-dialog-border-radius, 8px);
  bottom: 50%;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.12),
              0 16px 16px rgba(0, 0, 0, 0.24);
  color: inherit;
  line-height: 20px;
  max-height: initial;
  max-width: initial;
  overflow-y: hidden;
  padding: 0;
  position: absolute;
  top: 50%;
  width: var(--cr-dialog-width, 512px);
}

@media (prefers-color-scheme: dark) {
  dialog {
    background-color: var(--cr-dialog-background-color,
        var(--google-grey-900));
    /* Note: the colors in linear-gradient() are intentionally the same to
     * add a 4% white layer on top of the fully opaque background-color. */
    background-image: linear-gradient(rgba(255, 255, 255, .04),
                                      rgba(255, 255, 255, .04));
  }
}

:host-context([webui-refresh-2026]) {
  dialog {
    background-color: var(--cr-dialog-background-color,
        var(--color-webui-dialog-background));
  }
}

@media (forced-colors: active) {
  dialog {
    /* Use border instead of box-shadow (which does not work) in Windows
       HCM. */
    border: var(--cr-border-hcm);
  }
}

dialog[open] #content-wrapper {
  /* Keep max-height within viewport, and flex content accordingly. */
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: auto;
}

/* When needing to flex, force .body-container alone to shrink. */
.top-container,
:host ::slotted([slot=button-container]),
:host ::slotted([slot=footer]) {
  flex-shrink: 0;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

:host ::slotted([slot=body]) {
  color: var(--cr-secondary-text-color);
  padding: 0 var(--cr-dialog-body-padding-horizontal, 20px);
}

:host ::slotted([slot=title]) {
  color: var(--cr-primary-text-color);
  flex: 1;
  font-family: var(--cr-dialog-font-family, inherit);
  font-size: var(--cr-dialog-title-font-size, calc(15 / 13 * 100%));
  line-height: 1;
  padding-bottom: var(--cr-dialog-title-slot-padding-bottom, 16px);
  padding-inline-end:  var(--cr-dialog-title-slot-padding-end, 20px);
  padding-inline-start: var(--cr-dialog-title-slot-padding-start, 20px);
  padding-top: var(--cr-dialog-title-slot-padding-top, 20px);
}

/* Note that if the padding is non-uniform and the button-container
 * border is visible, then the buttons will appear off-center. */
:host ::slotted([slot=button-container]) {
  display: flex;
  justify-content: flex-end;
  padding-bottom: var(--cr-dialog-button-container-padding-bottom, 16px);
  padding-inline-end: var(--cr-dialog-button-container-padding-horizontal, 16px);
  padding-inline-start: var(--cr-dialog-button-container-padding-horizontal, 16px);
  padding-top: var(--cr-dialog-button-container-padding-top, 16px);
}

:host ::slotted([slot=footer]) {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  border-top: 1px solid #dbdbdb;
  margin: 0;
  padding: 16px 20px;
}

:host([hide-backdrop]) dialog::backdrop {
  opacity: 0;
}

@media (prefers-color-scheme: dark) {
  :host ::slotted([slot=footer]) {
    border-top-color: var(--cr-separator-color);
  }
}

.body-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 1.375rem; /* Minimum reasonably usable height. */
  overflow: auto;
}

.top-container {
  align-items: flex-start;
  display: flex;
  min-height: var(--cr-dialog-top-container-min-height, 31px);
}

.title-container {
  display: flex;
  flex: 1;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  outline: none;
}

#close {
  align-self: flex-start;
  margin-inline-end: 4px;
  margin-top: 4px;
}

/* If --cr-dialog-body-border-top is defined, force show the scrollable top
 * border and override its styling. */
@container style(--cr-dialog-body-border-top) {
  .cr-scrollable-top {
    display: block;
    border-top: var(--cr-dialog-body-border-top);
  }
}`]);
}
