@import "../../themes/native/native.globals.ios";
@import "./menu-button.native";

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

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

  min-height: 32px;

  font-size: dynamic-font-clamp(1, 31px, 1.23);
}

// Menu Button: Activated
// --------------------------------------------------

:host(.ion-activated) {
  opacity: 0.4;
}

// Menu Button: Hover
// --------------------------------------------------

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