@import "../../themes/ionic.globals";

: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;

  width: auto;

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

  border-top: var(--border);

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

  text-align: center;

  contain: strict;
  user-select: none;
  z-index: $z-index-toolbar;

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

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

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

:host(.ion-color),
:host(.ion-color) ::slotted(ion-tab-button) {
  color: #{current-color(contrast, .7)};
}

:host(.ion-color),
:host(.ion-color) ::slotted(ion-tab-button) {
  background: #{current-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-top: var(--ion-safe-area-top, 0);
  padding-bottom: 0;

  border-top: 0;
  border-bottom: var(--border);
}

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