import { css } from '//resources/lit/v3_0/lit.rollup.js';
import { getCss as getCrIconsLit } from 'chrome://resources/cr_elements/cr_icons_lit.css.js';
import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
import 'chrome://resources/cr_elements/mwb_shared_vars.css.js';
let instance = null;
export function getCss() {
    return instance || (instance = [...[getCrIconsLit()], css `
:host {
  --mwb-primary-text-font-size: 12px;
  --mwb-secondary-text-font-size: 11px;

  background-color: var(--toolbar-background-color);
  color: var(--toolbar-text-color);
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 7px 12px;
  margin: 6px 4px 0 4px;
}

#top-row {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 20px;
  width: 100%;
}

.top-toolbar-title {
  overflow: hidden;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-toolbar-logo {
  flex:0;
  box-sizing: border-box;
  display: inline-block;
  margin-right: 8px;
  --cr-icon-size: 18px;
  width: 18px;
  height: 18px;
}

.chrome-logo-dark {
  display: none;
}

:host([dark-mode]) .chrome-logo-light {
  display: none;
}

:host([dark-mode]) .chrome-logo-dark {
  display: inline-block;
}

.top-toolbar-action-buttons {
  flex: 0;
  display: flex;
  flex-direction: row;
}

.top-toolbar-action-buttons > :not(:first-child) {
  /**
  * cr-icon is 20px and cr-icon-button is 32px
  * Add another 4px to visually make the margin 16px.
  */
  margin-inline-start: 4px;
}

.top-toolbar-action-buttons > contextual-tasks-favicon-group {
  /* Add horizontal padding to match cr-icon-button. */
  padding-left: 6px;
  padding-right: 6px;
}

cr-icon-button {
  --cr-icon-button-icon-size: 20px;
  --cr-icon-button-fill-color: var(--toolbar-button-icon-color);
}

#closeButton:not(:hover)[rounded-corner='true'] {
  background-color: var(--cr-fallback-color-base-container);
}

#closeButton[rounded-corner='true'] {
  border-radius: 6px;
}

cr-icon-button[hidden] {
  display: none;
}

#overflowMenuButton.active {
  background-color: var(--cr-active-background-color);
}`]);
}
