@use "../../themes/native/native.globals" as globals;
@use "./button.common";

// Button - iOS and Material Design
// --------------------------------------------------

:host {
  font-family: globals.$font-family-base;
}

// Solid Button
// --------------------------------------------------

// Default Solid Color
:host(.button-solid) {
  --background: #{globals.ion-color(primary, base)};
  --color: #{globals.ion-color(primary, contrast)};
}

// Outline Button
// --------------------------------------------------

// Default Outline Color
:host(.button-outline) {
  --border-color: #{globals.ion-color(primary, base)};
  --color: #{globals.ion-color(primary, base)};
}

// Clear Button
// --------------------------------------------------

// Default Clear Color
:host(.button-clear) {
  --color: #{globals.ion-color(primary, foreground)};
}

// Button Icons
// --------------------------------------------------

::slotted(ion-icon) {
  font-size: 1.35em;
}

::slotted(ion-icon[slot="start"]) {
  @include globals.margin(0, 0.3em, 0, -0.3em);
}

::slotted(ion-icon[slot="end"]) {
  @include globals.margin(0, -0.2em, 0, 0.3em);
}

// Button Badge
// --------------------------------------------------

.button-native ::slotted(ion-badge) {
  position: fixed;
}

:host ::slotted(ion-badge[vertical]:not(:empty)) {
  @include globals.padding(2px);
}

// Button in Datetime
// --------------------------------------------------

:host(.in-datetime) {
  @include globals.margin(0px, 2px, 0px, 2px);

  min-height: 32px;
}