@import "./menu-button";

// iOS Menu Button
// --------------------------------------------------

:host {
  --background-focused: #{ion-color(primary, base, .1)};
  --border-radius: 4px;
  --color: #{ion-color(primary, base)};
  --padding-start: 5px;
  --padding-end: 5px;

  height: 32px;

  font-size: 31px;
}

:host(.activated) {
  opacity: .4;
}

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


// Menu Button Color: Focused
// --------------------------------------------------

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