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

// Material Design Tab Button
// --------------------------------------------------

.tab-btn {
  @include padding($tab-button-md-padding-top, $tab-button-md-padding-end, $tab-button-md-padding-bottom, $tab-button-md-padding-start);

  max-width: 168px;

  font-weight: $tab-button-md-font-weight;
}

// Material Design Tab Button Text
// --------------------------------------------------

.tab-btn-text {
  @include margin($tab-button-md-text-margin-top, $tab-button-md-text-margin-end, $tab-button-md-text-margin-bottom, $tab-button-md-text-margin-start);
  @include transform-origin(center, bottom);

  transform: var(--label-transform);

  transition: $tab-button-md-text-transition;

  font-size: $tab-button-md-font-size;

  text-transform: $tab-button-md-text-capitalization;
}

.tab-btn-selected .tab-btn-text {
  --label-transform: #{$tab-button-md-text-transform-active};

  transition: $tab-button-md-text-transition;
}

// Material Design Tab Button Icon
// --------------------------------------------------

.tab-btn-icon {
  @include transform-origin(center, center);

  width: $tab-button-md-icon-size;
  height: $tab-button-md-icon-size;

  transform: var(--icon-transform);

  transition: $tab-button-md-icon-transition;

  font-size: $tab-button-md-icon-size;
}