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

// iOS Back Button
// --------------------------------------------------

:host {
  --background-hover: transparent;
  --background-hover-opacity: 1;
  --background-focused: currentColor;
  --background-focused-opacity: .1;
  --border-radius: 4px;
  --color: #{$back-button-ios-color};
  --icon-margin-end: 1px;
  --icon-margin-start: -4px;
  /**
   * The icon should be sized relative
   * to the size of the text which is
   * why we use em here instead of rem.
   * This allows developers to override
   * the text font size while ensuring that
   * the icon is sized relative to that.
   */
  --icon-font-size: 1.6em;
  --min-height: 32px;

  /**
   * Main content should be prioritized over the back
   * button which is why a maximum font size is applied.
   * Also, we want the text to remain readable
   * so a minimum font size is applied.
   * Using 1.294 instead of 1.3 aligns the text
   * with the icon a bit nicer in Firefox.
   */
  font-size: dynamic-font-clamp(1, 17px, 1.294);
}

.button-native {
  transform: translateZ(0);

  overflow: visible;
  z-index: $back-button-ios-button-z-index;
}

// Back Button States
// --------------------------------------------------

:host(.ion-activated) .button-native {
  opacity: .4;
}

@media (any-hover: hover) {
  :host(:hover) {
    opacity: .6;
  }
}