@import "./buttons.md.vars";
@import "./buttons.native";

// Material Design Toolbar Default Button
// --------------------------------------------------

// TODO(FW-6203): do we need these styles?
::slotted(*) ion-button {
  --padding-top: 3px;
  --padding-bottom: 3px;
  --padding-start: 8px;
  --padding-end: 8px;
  --box-shadow: none;

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

  min-height: 32px;
}

::slotted(*) .button-has-icon-only {
  --padding-top: 0;
  --padding-bottom: 0;
}

// TODO(FW-6203): is this value correct?
::slotted(*) ion-button:not(.button-round) {
  --border-radius: #{$toolbar-md-button-border-radius};
}

// Material Design Toolbar w/ Color: Default Buttons
// --------------------------------------------------

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

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

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

// Material Design Toolbar Icon Only Clear Button
// --------------------------------------------------

// TODO(FW-6203): do we need these styles?
::slotted(*) .button-has-icon-only.button-clear {
  --padding-top: 12px;
  --padding-end: 12px;
  --padding-bottom: 12px;
  --padding-start: 12px;
  --border-radius: 50%;

  @include margin(0);

  width: 3rem;
  height: 3rem;
}

::slotted(*) .button {
  --background-hover: currentColor;
}

// Material Design Toolbar Solid Button
// --------------------------------------------------

::slotted(*) .button-solid {
  --color: #{$toolbar-md-background};
  --background: #{$toolbar-md-color};
  --background-activated: transparent;
  --background-focused: currentColor;
}

// Material Design Toolbar Outline Button
// --------------------------------------------------

::slotted(*) .button-outline {
  --color: initial;
  --background: transparent;
  --background-activated: transparent;
  --background-focused: currentColor;
  --background-hover: currentColor;
  --border-color: currentColor;
}

// Material Design Toolbar Clear Button
// --------------------------------------------------

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

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

  font-size: 1.4em;
}

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

  font-size: 1.4em;
}

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

  font-size: 1.8em;
}