@import "./tabbar";
@import "./tabbar.ios.vars";
@import "./tab-button.ios";

// iOS Tabs
// --------------------------------------------------

:host {
  // default color / background
  --background: #{$tabbar-ios-background-color};
  --background-rgb: var(--ion-tabbar-translucent-background-color-rgb, 248, 248, 248);
  --color: #{$tab-button-ios-text-color};
  --color-selected: #{$tabbar-ios-text-color-active};
  --background-focused: #{$tabbar-ios-background-color-focused};

  justify-content: center;

  height: $tabbar-ios-height;

  border-top: $tabbar-ios-border;

  contain: strict;
}

:host(.placement-top) {
  border-top: 0;
  border-bottom: $tabbar-ios-border;
}

// iOS Translucent Tabbar
// --------------------------------------------------

:host(.tabbar-translucent) {
  background-color: #{current-color(base, $tabbar-ios-translucent-background-color-alpha)};
  backdrop-filter: $tabbar-ios-translucent-filter;
}


// iOS Tabbar Layout
// --------------------------------------------------

:host(.layout-icon-end) .tab-btn,
:host(.layout-icon-start) .tab-btn,
:host(.layout-icon-hide) .tab-btn {
  --label-margin-top: 2px;
  --label-margin-bottom: 2px;
  --label-font-size: 14px;
  --label-line-height: 1.1;
}

:host(.layout-icon-end) .tab-btn,
:host(.layout-icon-start) .tab-btn {
  --icon-margin-top: 2px;
  --icon-margin-bottom: 1px;
  --icon-min-width: 24px;
  --icon-height: 26px;
  --icon-font-size: 24px;
}

:host(.layout-label-hide) .tab-btn {
  --icon-margin: 0;
}