@import "../../themes/mixins";

// Title
// --------------------------------------------------

:host {
  /**
   * @prop --color: Text color of the title
   */
  --color: initial;

  display: flex;

  flex: 1;
  align-items: center;

  transform: translateZ(0);

  color: var(--color);
}

.toolbar-title {
  display: block;

  width: 100%;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;
  pointer-events: auto;
}

// Small Title
// --------------------------------------------------

:host(.title-small) .toolbar-title {
  white-space: normal;
}