////
/// @group alert
////

@import '@react-md/elevation/dist/scss/mixins';
@import '@react-md/typography/dist/scss/mixins';
@import '@react-md/theme/dist/scss/mixins';
@import '@react-md/transition/dist/scss/mixins';
@import '@react-md/utils/dist/scss/mixins';
@import './functions';
@import './variables';

/// Creates the styles for one of the alert's theme values. This is mostly going
/// to be an internal helper mixin util.
///
/// @param {String} property - The property to set a `rmd-alert-theme-values`
/// value to.
/// @param {String} theme-style - One of the keys of `rmd-alert-theme-values` to
/// extract a value from.
/// @param {Color|String|Number} fallback [null] - A fallback value to use if
/// the css variable isn't set somehow. This will default to automatically
/// retrieving the default value from the `rmd-alert-theme-values` map when
/// `null`.
@mixin rmd-alert-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-alert-theme-values,
    alert
  );
}

/// Updates one of the alert's theme variables with the new value for the
/// section of your app.
///
/// @param {String} theme-style - The alert theme style type to update. This
/// should be one of the `$rmd-alert-theme-values` keys.
/// @param {Color|String|Number} value - The new value to use.
@mixin rmd-alert-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-alert-theme-values,
    alert
  );
}

/// Generates the styles for a snackbar and should probably only be used
/// internally.
@mixin rmd-snackbar {
  display: flex;
  justify-content: center;
  left: 0;
  margin: $rmd-snackbar-margin;
  // disable pointer events since otherwise this will block clicking on elements while the toast
  // is visible. they will be re-enabled on the toast itself.
  pointer-events: none;
  position: fixed;
  right: 0;
  z-index: $rmd-snackbar-z-index;

  &--top {
    top: 0;
  }

  &--bottom {
    bottom: 0;
  }
}

/// Generates the styles for a toast and should probably only be used
/// internally.
@mixin rmd-toast {
  @include rmd-elevation($rmd-toast-elevation);
  @include rmd-typography(subtitle-2);
  @include rmd-alert-theme(background-color);
  @include rmd-alert-theme(color);

  align-items: center;
  border-radius: $rmd-toast-border-radius;
  display: flex;
  min-height: $rmd-toast-min-height;
  min-width: $rmd-toast-min-width;
  padding: 0 $rmd-toast-horizontal-padding;
  pointer-events: auto;
  transform-origin: center;

  &--padded {
    padding-bottom: $rmd-toast-vertical-padding;
    padding-top: $rmd-toast-vertical-padding;
  }

  &--action {
    @include rmd-utils-rtl-auto(
      padding-right,
      0,
      $rmd-toast-horizontal-padding
    );
  }

  &--two-lines {
    min-height: $rmd-toast-two-line-min-height;
  }

  &--stacked {
    flex-direction: column;
    padding-bottom: 0;
  }

  &--enter {
    @include rmd-transition(deceleration);

    opacity: 0;
    transform: scale(0);
    transition: opacity $rmd-toast-enter-duration,
      transform $rmd-toast-enter-duration;
  }

  &--enter-active {
    opacity: 1;
    transform: scale(1);
  }

  &--exit {
    @include rmd-transition(acceleration);

    opacity: 1;
    transform: scale(1);
  }

  &--exit-active {
    opacity: 0;
    transform: scale(0);
    transition: opacity $rmd-toast-exit-duration,
      transform $rmd-toast-exit-duration;
  }

  &__message {
    @include rmd-utils-rtl-auto(margin-right, auto);

    display: inline-flex;
    flex: 1 1 auto;
    flex-wrap: wrap;

    &--action {
      @include rmd-utils-rtl-auto(
        padding-right,
        $rmd-toast-horizontal-padding,
        0
      );
    }

    p {
      margin: 0;
      width: 100%;
    }
  }

  &__action {
    display: inline-flex;
    flex-shrink: 0;
    margin: 0 $rmd-toast-action-margin;

    &--stacked {
      align-self: flex-end;
      margin-bottom: $rmd-toast-action-margin;
      margin-top: $rmd-toast-stacked-action-margin-top;
    }
  }
}

/// Creates all the styles for this package as well as defining all the theme
/// CSS variables.
@mixin react-md-alert {
  @include rmd-theme-create-root-theme($rmd-alert-theme-values, alert);

  .rmd-snackbar {
    @include rmd-snackbar;
  }

  .rmd-toast {
    @include rmd-toast;
  }
}