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

:host {
  // default color / background
  --color: #{$tab-button-md-text-color};
  --color-selected: #{$tabbar-md-text-color-active};
  --background: #{$tabbar-md-background-color};
  --background-focused: #{$tabbar-md-background-color-focused};
  --icon-transform-selected: #{$tab-button-md-icon-transform-active};

  height: $tabbar-md-height;

  border-top: $tabbar-md-border;

  contain: strict;
}

// Material Design Tabbar Layout
// --------------------------------------------------

:host(.layout-icon-top) .tab-btn {
  --label-margin-bottom: -2px;
}

:host(.layout-icon-end) .tab-btn {
  --icon-transform-selected: #{$tab-button-md-icon-right-transform-active};
}

:host(.layout-icon-bottom) .tab-btn {
  --label-margin-top: -2px;
  --label-transform: transform-origin(center, top);
  --icon-transform-selected: #{$tab-button-md-icon-bottom-transform-active};
}

:host(.layout-icon-start) .tab-btn {
  --icon-transform-selected: #{$tab-button-md-icon-left-transform-active};
}