@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: -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(.ion-activated) .button-native {
  opacity: .4;
}

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


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

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