@import "./fab-button";
@import "./fab-button.ios.vars";

// iOS FAB Button
// --------------------------------------------------

:host {
  --background: #{$fab-ios-background-color};
  --background-activated: #{$fab-ios-background-color-activated};
  --background-focused: var(--background-activated);
  --color: #{$fab-ios-text-color};
  --color-activated: #{$fab-ios-text-color};
  --color-focused: var(--color-activated);
  --box-shadow: #{$fab-ios-box-shadow};
  --transition: #{$fab-ios-transition};
}

:host(.activated) {
  --box-shadow: #{$fab-ios-box-shadow-activated};
  --transform: #{$fab-ios-transform};
  --transition: #{$fab-ios-transition-activated};
}

::slotted(ion-icon),
.close-icon {
  font-size: $fab-ios-icon-font-size;
}

// FAB buttons in a list
// --------------------------------------------------

:host(.fab-button-in-list) {
  --background: #{$fab-ios-list-button-background-color};
  --background-activated: #{$fab-ios-list-button-background-color-activated};
  --background-focused: var(--background-activated);
  --background-hover: #{$fab-ios-list-button-background-color-hover};
  --color: #{$fab-ios-list-button-text-color};
  --color-activated: #{$fab-ios-list-button-text-color};
  --color-focused: var(--color-activated);
  --transition: #{transform 200ms ease 10ms,
              opacity 200ms ease 10ms};
}

:host(.fab-button-in-list) ::slotted(ion-icon) {
  font-size: $fab-ios-list-button-icon-font-size;
}


// Translucent FAB buttons
// --------------------------------------------------

@supports (backdrop-filter: blur(0)) {
  :host(.fab-button-translucent) {
    --background: #{ion-color(primary, base, $fab-ios-translucent-background-alpha)};
    --background-hover: #{ion-color(primary, base, $fab-ios-translucent-background-alpha-hover)};
    --background-focused: #{ion-color(primary, base, $fab-ios-translucent-background-alpha-focused)};
    --backdrop-filter: #{$fab-ios-translucent-filter};
  }

  :host(.fab-button-translucent-in-list) {
    --background: #{ion-color(light, base, $fab-ios-translucent-background-alpha)};
    --background-hover: #{ion-color(light, base, $fab-ios-translucent-background-alpha-hover)};
    --background-focused: #{ion-color(light, base, $fab-ios-translucent-background-alpha-focused)};
  }
}

// Translucent FAB buttons with color
// --------------------------------------------------

@supports (backdrop-filter: blur(0)) {
  @media (any-hover: hover) {
    :host(.fab-button-translucent.ion-color:hover) .button-native {
      background: #{current-color(base, $fab-ios-translucent-background-alpha-hover)};
    }
  }

  :host(.ion-color.fab-button-translucent) .button-native {
    background: #{current-color(base, $fab-ios-translucent-background-alpha)};
  }

  :host(.ion-color.ion-focused.fab-button-translucent) .button-native,
  :host(.ion-color.activated.fab-button-translucent) .button-native {
    background: #{current-color(base)};
  }
}