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

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

::slotted(*) ion-button {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-start: 8px;
  --padding-end: 8px;
  --box-shadow: none;

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

  height: 32px;

  font-size: #{$toolbar-md-button-font-size};
  font-weight: 500;
}

::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-hover: #{current-color(contrast, .08)};
  --background-focused: #{current-color(contrast, .24)};
}

:host-context(.ion-color)::slotted(*) .button-solid {
  --background: #{current-color(contrast)};
  --background-activated: #{current-color(contrast)};
  --background-focused: #{current-color(shade)};
  --background-hover: #{current-color(tint)};
  --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
// --------------------------------------------------

::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: 48px;
  height: 48px;
}


::slotted(*) .button {
  --background-hover: rgba(66, 66, 66, 0.08);
}

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

::slotted(*) .button-solid {
  --color: #{$toolbar-md-background};
  --color-activated: #{$toolbar-md-background};
  --background: #{$toolbar-md-color};
  --background-activated: #{$toolbar-md-color};
  --background-focused: #{$toolbar-md-color-activated};
  --background-hover: rgba(66, 66, 66, 0.92);
}


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

::slotted(*) .button-outline {
  --color: initial;
  --color-activated: currentColor;
  --color-focused: #{$toolbar-md-color};
  --background: transparent;
  --background-activated: transparent;
  --border-color: #{$toolbar-md-color};
  --background-focused: rgba(66, 66, 66, 0.1);
}


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

::slotted(*) .button-clear {
  --color: initial;
  --color-focused: #{$toolbar-md-color};
  --color-activated: currentColor;
  --background: transparent;
  --background-focused: rgba(66, 66, 66, 0.1);
}


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

  font-size: 1.4em;
}

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

  font-size: 1.4em;
}

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

  font-size: 1.8em;
}
