<style include="cr-hidden-style print-preview-shared">
  :host {
    border-top: var(--print-preview-settings-border);
    display: block;
  }

  :host([disabled]) {
    pointer-events: none;
  }

  div {
    align-items: center;
    display: flex;
    font: inherit;
    margin: 0;
    min-height: 48px;
  }

  :host cr-expand-button {
    margin-inline-end: calc(var(--print-preview-sidebar-margin) + 6px);
    --cr-expand-button-size: 28px;
  }

  :host([hidden]) {
    display: none;
  }

  #label {
    color: var(--cr-primary-text-color);
    flex: 1;
    margin-inline-start: var(--print-preview-sidebar-margin);
    text-align: start;
  }

  :host([disabled]) #label {
    @apply --print-preview-disabled-label;
  }
</style>
<div on-click="toggleExpandButton_" actionable>
  <span id="label">$i18n{moreOptionsLabel}</span>
  <cr-expand-button alt="$i18n{moreOptionsLabel}"
      expanded="{{settingsExpandedByUser}}" disabled="[[disabled]]">
  </cr-expand-button>
</div>
