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

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

:host {
  --background-focused: #{ion-color(primary, base, .1)};
  --border-radius: 4px;
  --color: #{$back-button-ios-color};
  --icon-margin-end: -5px;
  --icon-margin-start: -4px;
  --icon-font-size: 1.85em;
  --min-height: 32px;

  font-size: 17px;
}

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

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

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

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

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



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

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