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

// Material Design FAB Button
// --------------------------------------------------

:host {
  --box-shadow: #{$fab-md-box-shadow};
  --transition: #{box-shadow $fab-button-md-transition-duration $fab-button-md-transition-timing-function,
              background-color $fab-button-md-transition-duration $fab-button-md-transition-timing-function,
              color $fab-button-md-transition-duration $fab-button-md-transition-timing-function};
}

:host(.activated) {
  --box-shadow: #{$fab-md-box-shadow-activated};
}

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


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

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

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