toolbar.ionic.scss

@use "./toolbar.common";
@use "../../themes/ionic/ionic.globals.scss" as globals;

// Ionic Toolbar
// --------------------------------------------------

:host {
  --background: #{globals.$ion-bg-surface-default};
  --color: #{globals.$ion-text-default};
  --border-color: currentColor;
  --padding-top: #{globals.$ion-space-200};
  --padding-bottom: #{globals.$ion-space-200};
  --padding-start: #{globals.$ion-space-200};
  --padding-end: #{globals.$ion-space-200};
  --min-height: #{globals.$ion-scale-1400};
}

.toolbar-container {
  gap: globals.$ion-space-400;
  // TODO(ROU-10853): replace this value with a layer token
  z-index: 10;
}

// Toolbar: Transparent
// --------------------------------------------------

.toolbar-background {
  // TODO(ROU-10853): replace this value with a layer token
  z-index: -1;
}

// Toolbar: Content
// --------------------------------------------------

.toolbar-content {
  flex: 1 1 auto;

  min-width: 0;
}

// Toolbar: Searchbar
// --------------------------------------------------

:host(.toolbar-searchbar) ::slotted(ion-searchbar) {
  @include globals.padding(0);
}

// Toolbar: Buttons
// --------------------------------------------------

::slotted(ion-buttons) {
  gap: globals.$ion-space-200;
}

// Toolbar: Title
// --------------------------------------------------

::slotted(ion-title) {
  @include globals.padding-horizontal(globals.$ion-space-200);
}

:host(.toolbar-title-default) ::slotted(ion-title) {
  text-align: center;
}

:host(.toolbar-title-large) ::slotted(ion-title) {
  @include globals.padding-horizontal(globals.$ion-space-400);
}

// Ionic Toolbar Slot Placement
// --------------------------------------------------
// We're using the slots to force the main toolbar content to be
// centered in the toolbar. This is a bit of a hack but it works.
// The main content is placed in the center and then JavaScript evaluates
// the sizes of the different slots and sets what size the pairs should be
// based on the larger one. We then use `flex-basis` to set the expected
// size of the slots and disable `flex-shrink` so that the smaller slot cannot
// shrink and throw off the center, we also disable flex-grow so that slots do
// not grow more than they need. The slots are paired up so the mirroring slots
// always have the same size. That is, start and end are paired and primary
// and secondary are paired. All of this works together to force the main
// content to maintain the center as best as CSS allows while also allowing
// the slots and main content to have fairly dynamic widths.
// --------------------------------------------------

:host(.has-end-content) slot[name="end"],
:host(.show-end) slot[name="end"] {
  display: flex;

  flex: 0 0 var(--start-end-size, 0);
  justify-content: flex-end;

  text-align: end;
}

:host(.has-start-content) slot[name="start"],
:host(.show-start) slot[name="start"] {
  display: flex;

  flex: 0 0 var(--start-end-size, 0);
}

:host(.has-primary-content) slot[name="primary"],
:host(.show-primary) slot[name="primary"] {
  display: flex;

  flex: 0 0 var(--primary-secondary-size, 0);
  justify-content: flex-end;

  text-align: end;
}

:host(.has-secondary-content) slot[name="secondary"],
:host(.show-secondary) slot[name="secondary"] {
  display: flex;

  flex: 0 0 var(--primary-secondary-size, 0);
}