@import "../../themes/ionic.globals";

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

:host {
  /**
   * @prop --color: Color of the menu button
   *
   * @prop --padding-top: Padding top of the button
   * @prop --padding-end: Padding end of the button
   * @prop --padding-bottom: Padding bottom of the button
   * @prop --padding-start: Padding start of the button
   */
  --padding-top: 0;
  --padding-bottom: 0;

  color: var(--color);

  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: none;

  white-space: nowrap;
  font-kerning: none;
}

button {
  @include text-inherit();
  @include margin(0);
  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
  @include font-smoothing();

  display: flex;

  position: relative;

  flex-flow: row nowrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  height: 32px;

  border: 0;

  outline: none;

  background: transparent;

  line-height: 1;

  cursor: pointer;
  user-select: none;
  z-index: 0;
  appearance: none;
}

ion-icon {
  @include margin(0);
  @include padding(0);

  pointer-events: none;
}

// Menu Button with Color
// --------------------------------------------------

:host(.ion-color) .button-native {
  color: current-color(base);
}

// Menu Button in Toolbar: Global Theming
// --------------------------------------------------

:host-context(ion-toolbar:not(.ion-color)) {
  color: #{var(--ion-toolbar-color, var(--color))};
}