@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)};
}

:host-context(.ion-color)::slotted(*) .button-solid {
  --background: #{current-color(contrast)};
  --background-focused: #000;
  --background-focused-opacity: .12;
  --background-activated: #000;
  --background-activated-opacity: .12;
  --background-hover: #{current-color(base)};
  --background-hover-opacity: 0.45;
  --color: #{current-color(base)};
  --color-focused: #{current-color(base)};
}

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

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


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

::slotted(*) .button-clear,
::slotted(*) .button-outline {
  --background-activated: transparent;
  --background-focused: currentColor;
  --background-hover: transparent;
}


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

::slotted(*) .button-solid:not(.ion-color) {
  --background-focused: #000;
  --background-focused-opacity: .12;
  --background-activated: #000;
  --background-activated-opacity: .12;
}


// 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: 28px;

  line-height: .67;
}
