@ionic/core/dist/collection/components/tab-bar/tab-bar.ios.css

Base components for Ionic

:host {
  /**
   * @prop --background: Background of the tab bar
   * @prop --border: Border of the tab bar
   * @prop --color: Color of the tab bar
   */
  padding-left: var(--ion-safe-area-left);
  padding-right: var(--ion-safe-area-right);
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding-bottom: var(--ion-safe-area-bottom, 0);
  border-top: var(--border);
  background: var(--background);
  color: var(--color);
  text-align: center;
  contain: strict;
  user-select: none;
  z-index: 10;
  /* stylelint-disable-next-line declaration-no-important */
  box-sizing: content-box !important;
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  :host {
    padding-left: unset;
    padding-right: unset;
    -webkit-padding-start: var(--ion-safe-area-left);
    padding-inline-start: var(--ion-safe-area-left);
    -webkit-padding-end: var(--ion-safe-area-right);
    padding-inline-end: var(--ion-safe-area-right);
  }
}

:host(.ion-color) ::slotted(ion-tab-button) {
  --background-focused: var(--ion-color-shade);
  --color-selected: var(--ion-color-contrast);
}

:host(.ion-color) ::slotted(.tab-selected) {
  color: var(--ion-color-contrast);
}

:host(.ion-color),
:host(.ion-color) ::slotted(ion-tab-button) {
  color: rgba(var(--ion-color-contrast-rgb), 0.7);
}

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

: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]) {
  padding-bottom: 0;
  border-top: 0;
  border-bottom: var(--border);
}

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

:host {
  --background: var(--ion-tab-bar-background, var(--ion-background-color, #fff));
  --background-focused: var(--ion-tab-bar-background-focused, #e0e0e0);
  --border: 0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));
  --color: var(--ion-tab-bar-color, var(--ion-color-step-400, #999999));
  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, #3880ff));
  height: 50px;
}

@supports (backdrop-filter: blur(0)) {
  :host(.tab-bar-translucent) {
    --background: rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);
    backdrop-filter: saturate(210%) blur(20px);
  }

  :host(.ion-color.tab-bar-translucent) {
    background: rgba(var(--ion-color-base-rgb), 0.8);
  }

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