:host {
  /**
   * @prop --background: Background of the tab bar
   * @prop --border: Border of the tab bar
   * @prop --color: Color of the tab bar
   */
  display: flex;

  align-items: center;
  justify-content: center;

  border-top: var(--border);

  background: var(--background);
  color: var(--color);

  text-align: center;

  user-select: none;

  /* stylelint-disable-next-line declaration-no-important */
  box-sizing: content-box !important;
}

:host(.ion-color) ::slotted(ion-tab-button.ion-focused),
:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
  background: var(--background-focused);
}

:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
  background: transparent;
}

:host([slot="top"]) {
  border-top: 0;
  border-bottom: var(--border);
}

:host(.tab-bar-hidden) {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

// Tab Bar Expand
// --------------------------------------------------

/* Full */
:host(.tab-bar-full) {
  width: auto;

  contain: strict;

  /* stylelint-disable */
  padding-bottom: var(--ion-safe-area-bottom, 0);

  padding-right: var(--ion-safe-area-right);
  padding-left: var(--ion-safe-area-left);
  /* stylelint-enable */
}

:host([slot="top"].tab-bar-full) {
  padding-top: var(--ion-safe-area-top, 0);
  padding-bottom: 0;
}