/* Copyright 2026 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #import=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #scheme=relative
 * #css_wrapper_metadata_end */

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