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


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

::slotted(*) ion-button {
  --padding-start: 5px;
  --padding-end: 5px;

  @include margin-horizontal(2px, 2px);

  height: 32px;

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



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

// iOS Toolbar with Color: Default Buttons
// --------------------------------------------------

:host-context(.ion-color)::slotted(*) .button {
  --color: initial;
  --border-color: initial;
  --background-focused: #{current-color(contrast, .1)};

}

:host-context(.ion-color)::slotted(*) .button-solid {
  --background: #{current-color(contrast)};
  --background-activated: #{current-color(contrast, .8)};
  --background-focused: #{current-color(contrast, .6)};
  --color: #{current-color(base)};
  --color-focused: #{current-color(base)};
}

:host-context(.ion-color)::slotted(*) .button-clear {
  --background-focused: #{current-color(contrast, .1)};
  --color-activated: #{current-color(contrast)};
  --color-focused: #{current-color(contrast)};
}

:host-context(.ion-color)::slotted(*) .button-outline {
  --background-activated: #{current-color(contrast)};
  --background-focused: #{current-color(contrast, .1)};
  --color-activated: #{current-color(base)};
  --color-focused: #{current-color(contrast)};
}


// iOS Toolbar Button Clear
// --------------------------------------------------

:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear {
  --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
  --color-activated: #{$toolbar-ios-color-activated};
  --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
}


// iOS Toolbar Button Outline
// --------------------------------------------------

:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline {
  --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
  --color-activated: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
  --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
  --border-color: #{var(--ion-toolbar-color, ion-color(primary, base))};
  --background-activated: #{var(--ion-toolbar-color, ion-color(primary, base))};
}


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

:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid {
  --color: #{$toolbar-ios-background};
  --color-activated: #{$toolbar-ios-background};
  --color-focused: #{$toolbar-ios-background};
  --background: #{var(--ion-toolbar-color, ion-color(primary, base))};
  --background-activated: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
  --background-focused: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
}


// iOS Toolbar Button Icon
// --------------------------------------------------

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

  font-size: 24px;

  line-height: .67;
}

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

  font-size: 24px;

  line-height: .67;
}

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

  font-size: 31px;

  line-height: .67;
}


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

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

//   min-width: 36px;

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

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

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

