@import "./buttons.ios.vars";
@import "./buttons";


// iOS Toolbar Button Default
// --------------------------------------------------

::slotted(*) .button {
  --padding-top: 0;
  --pading-bottom: 0;
  --padding-start: 5px;
  --padding-end: 5px;
  --height: 32px;

  font-size: #{$toolbar-ios-button-font-size};
  font-weight: 400;
}

::slotted(*) .button:not(.button-round) {
  --border-radius: #{$toolbar-ios-button-border-radius};
}

:host-context(.ion-color)::slotted(*) .button {
  --ion-color-base: currentColor;
}

// iOS Toolbar Button Icon
// --------------------------------------------------
::slotted(*) ion-icon[slot="start"] {
  @include margin(0);
  @include margin-horizontal(null, .3em);

  font-size: 24px;

  line-height: .67;
  pointer-events: none;
}

::slotted(*) ion-icon[slot="end"] {
  @include margin(0);
  @include margin-horizontal(.4em, null);

  font-size: 24px;

  line-height: .67;
  pointer-events: none;
}

::slotted(*) ion-icon[slot="icon-only"] {
  @include padding(0);
  @include margin(0);

  font-size: 31px;

  line-height: .67;
  pointer-events: none;
}

::slotted(*) .button.button-clear {
  --height: 35px;
}

// iOS Toolbar Button Solid
// --------------------------------------------------

::slotted(*) .button.button-solid-ios:hover {
  opacity: .4;
}

  // iOS Toolbar Menu Toggle
  // --------------------------------------------------

  // .button-menutoggle-ios {
  //   order: map-get($toolbar-order-ios, menu-toggle-start);

  //   min-width: 36px;

  //   --margin-top: 0;
  //   --margin-bottom: 0;
  //   --margin-start: 6px;
  //   --margin-end: 6px;

  //   --padding-top: 0;
  //   --padding-bottom: 0;
  //   --padding-start: 0;
  //   --padding-end: 0;

  //   ion-icon {
  //     @include padding(0, 6px);

  //     font-size: 28px;
  //   }
  // }

// iOS Toolbar Button Placement
// --------------------------------------------------

:host([slot="start"]) {
  order: map-get($toolbar-order-ios, buttons-start);
}

:host([slot="secondary"]) {
  order: map-get($toolbar-order-ios, buttons-secondary);
}

:host([slot="primary"]) {
  order: map-get($toolbar-order-ios, buttons-primary);

  text-align: end;
}

:host([slot="end"]) {
  order: map-get($toolbar-order-ios, buttons-end);

  text-align: end;
}