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

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

:host {
  --box-shadow: #{$fab-ios-box-shadow};
  --transition: #{$fab-ios-transition};
}

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

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

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

:host(.fab-button-in-list) {
  --ion-color-contrast: #{$fab-ios-list-button-text-color};
  --ion-color-base: #{$fab-ios-list-button-background-color};
  --transition: #{transform $fab-ios-list-button-transition-duration $fab-ios-list-button-transition-timing-function $fab-ios-list-button-transition-delay,
              opacity $fab-ios-list-button-transition-duration $fab-ios-list-button-transition-timing-function $fab-ios-list-button-transition-delay};
}

:host(.fab-button-in-list.activated) {
  --background: #{$fab-ios-list-button-background-color-activated};
}


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

:host(.fab-translucent) {
  --background: #{$fab-ios-translucent-background-color};
  --backdrop-filter: #{$fab-ios-translucent-filter};
}

:host(.fab-translucent-in-list) {
  --background: #{$fab-ios-list-button-translucent-background-color};
}

// .fab-translucent-ios-#{$color-name} {
//   background-color: ion-color($color-name, base, $fab-ios-translucent-background-color-alpha);
//   opacity: .8;
// }

// .fab-translucent-ios-#{$color-name}.activated {
//   opacity: 1;
// }