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

// MD Back Button
// --------------------------------------------------

:host {
  --border-radius: 4px;
  --background-focused: currentColor;
  --background-focused-opacity: .12;
  --background-hover: currentColor;
  --background-hover-opacity: 0.04;
  --color: #{$back-button-md-color};
  --icon-margin-end: 0;
  --icon-margin-start: 0;
  --icon-font-size: #{dynamic-font(24px)};
  --icon-font-weight: normal;
  --min-height: 32px;
  --min-width: 44px;
  --padding-start: 12px;
  --padding-end: 12px;

  font-size: dynamic-font(14px);
  font-weight: 500;

  text-transform: uppercase;
}

:host(.back-button-has-icon-only) {
  --border-radius: 50%;

  min-width: 48px;
  min-height: 48px;

  /**
   * This allows the icon only button to
   * keep its circular shape even when the
   * text scales up.
   */
  aspect-ratio: 1 / 1;
}

.button-native {
  box-shadow: none;
}

.button-text {
  @include padding(0, 4px);
}

ion-icon {
  line-height: .67;

  text-align: start;
}


// Back Button Color: Hover
// --------------------------------------------------

@media (any-hover: hover) {
  :host(.ion-color:hover) .button-native::after {
    background: #{current-color(base)};
  }
}


// Back Button Color: Focused
// --------------------------------------------------

:host(.ion-color.ion-focused) .button-native::after {
  background: #{current-color(base)};
}