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 {
  --dialog-padding: 20px;
}

#signoutConfirmationDialog {
  display: flex;
  flex-direction: column;
  padding: var(--dialog-padding);
}

#title {
  color: var(--cr-primary-text-color);
  font-size: 18px;
  font-weight: 500;
  margin-top: 0;
}

#subtitle {
  color: var(--cr-secondary-text-color);
  font-size: 13px;
  line-height: 20px;
}

#subtitle p:first-child {
  white-space: pre-wrap;
}

extensions-section {
  margin-bottom: 1em;
}

#action-row {
  display: flex;
  flex-wrap: wrap;      /* Allow items to wrap to the next line */
  gap: 8px;
  justify-content: flex-end;
}

#action-row cr-button {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 3-button case: push Cancel to the far left. */
#action-row:not(:has(#verifyReauthButton[hidden])) #cancelButton {
  margin-inline-end: auto;
}

.delete-button {
  --cr-button-background-color: var(--google-red-600);
  --cr-button-text-color: var(--google-grey-50);
}

.delete-button:hover {
  --cr-button-background-color: rgba(var(--google-red-600-rgb), .9);
}

@media (prefers-color-scheme: dark) {
  .delete-button {
    --cr-button-background-color: var(--google-red-300);
    --cr-button-text-color: var(--google-grey-900);
  }

  .delete-button:hover {
    --cr-button-background-color: var(--google-red-300)
        linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
  }
}`]);
}
