import { css } from '//resources/lit/v3_0/lit.rollup.js';
import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
let instance = null;
export function getCss() {
    return instance || (instance = [...[], css `
:host {
  box-sizing: border-box;
  display: block;
  inset-inline-start: var(--composebox-start-indent);
  margin-bottom: 14px;
  max-width: var(--composebox-max-width);
  min-width: var(--min-composebox-width);
  position: relative;
  width: var(--composebox-width);
  z-index: 100;
  pointer-events: auto;
}

#container {
  background-color: var(--color-contextual-tasks-banner-promo-background);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--color-contextual-tasks-banner-promo-text);
  display: flex;
  flex-direction: row;
  font-family: var(--google-sans-font);
  gap: 12px;
  padding: 16px;
  width: 100%;
}


cr-icon {
  --iron-icon-fill-color:
      var(--color-contextual-tasks-banner-promo-text);
  /* These lines can be removed if standard 24px size is wanted,
     but 20px is in the spec. */
  --iron-icon-height: 20px;
  --iron-icon-width: 20px;
  margin-inline-end: 4px;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
}

.header {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 8px;
}

.body {
  font-size: 13px;
  line-height: 20px;
  margin-bottom: 16px;
}

.buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: flex-start;
}
`]);
}
