/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use '@material/animation/animation' as mdc-animation;
@use '@material/theme/theme' as mdc-theme;
@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
@use '@material/typography/typography' as mdc-typography;
@use '../utils/mixins-media';
@use '../theme';
@use './variables';

@mixin provide-theme($theme) {
  @include theme.theme-properties(toast, $theme, variables.$theme-values);
}

@mixin core-styles() {
  .forge-toast {
    &__container {
      @include base;

      @include mixins-media.phone-only {
        @include phone;
      }

      ::slotted(*) {
        @include theme.css-custom-property(color, --forge-toast-theme-on-background, variables.$on-background);
      }

      @include mixins-media.tablet-portrait-up {
        @include non-phone(
          forge-toast__container--top,
          forge-toast__container--top-left,
          forge-toast__container--top-right,
          forge-toast__container--bottom, 
          forge-toast__container--bottom-left, 
          forge-toast__container--bottom-right
        );
      }

      &--active {
        @include active(forge-toast__message, forge-toast__action-button);

        @include mixins-media.phone-only {
          @include active-phone;
        }

        @include mixins-media.tablet-portrait-up {
          @include active-non-phone(
            forge-toast__container--top,
            forge-toast__container--top-left,
            forge-toast__container--top-right,
            forge-toast__container--bottom, 
            forge-toast__container--bottom-left, 
            forge-toast__container--bottom-right
          );
        }
      }

      &--custom {
        @include container-custom;
      }
    }

    &__message {
      @include message;
    }

    &__action-container {
      @include action-container;
    }

    &__action-button {
      @include action-button;
    }

    &__close-button {
      @include close-button;
      
      &::before,
      &::after {
        @include theme.css-custom-property(background-color, --forge-toast-theme-on-background, variables.$on-background);
      }
    }
  }
}

@mixin base() {
  @include theme.z-index(notification);
  @include mdc-elevation-theme.elevation(6);
  @include theme.css-custom-property(background-color, --forge-toast-theme-background, variables.$background);

  display: flex;
  position: fixed;
  border-radius: 2px;
  transition: mdc-animation.exit-permanent(transform, 250ms);
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 4px 8px 4px 16px;
  min-height: variables.$min-height;
}

@mixin phone() {
  bottom: 0;
  width: 100%;
  border-radius: 0;
  transform: translateY(100%);
}

@mixin non-phone($top-class, $top-left-class, $top-right-class, $bottom-class, $bottom-left-class, $bottom-right-class) {
  min-width: variables.$min-width;
  max-width: variables.$max-width;

  // Reset the bottom and top values for any top positioning.
  &.#{$top-class},
  &.#{$top-left-class},
  &.#{$top-right-class} {
    top: 0;
  }

  &.#{$top-class} {
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
        @include theme.css-custom-property(margin-top, --forge-toast-top-margin-top, variables.$top-margin-top);
  }

  &.#{$bottom-class} {
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    @include theme.css-custom-property(margin-bottom, --forge-toast-bottom-margin-bottom, variables.$bottom-margin-bottom);
  }

  // Set the transform for the top-left and top-right positions
  &.#{$top-left-class},
  &.#{$top-right-class} {
    transform: translateY(-100%);
  }

  // When using the bottom left or bottom right
  &.#{$bottom-left-class},
  &.#{$bottom-right-class} {
    transform: translateY(100%);
  }

  // Set position when using a bottom class
  &.#{$bottom-class},
  &.#{$bottom-left-class},
  &.#{$bottom-right-class} {
    bottom: 0;
  }

  &.#{$bottom-left-class} {
    @include theme.css-custom-property(margin-bottom, --forge-toast-bottom-left-margin-bottom, variables.$bottom-left-margin-bottom);
    @include theme.css-custom-property(margin-left, --forge-toast-bottom-left-margin-left, variables.$bottom-left-margin-left);
    left: 0;
  }

  &.#{$bottom-right-class} {
    @include theme.css-custom-property(margin-bottom, --forge-toast-bottom-right-margin-bottom, variables.$bottom-right-margin-bottom);
    @include theme.css-custom-property(margin-right, --forge-toast-bottom-right-margin-right, variables.$bottom-right-margin-right);
  }

  &.#{$top-left-class} {
    @include theme.css-custom-property(margin-top, --forge-toast-top-left-margin-top, variables.$top-left-margin-top);
    @include theme.css-custom-property(margin-left, --forge-toast-top-left-margin-left, variables.$top-left-margin-left);
    left: 0;
  }

  &.#{$top-right-class} {
    @include theme.css-custom-property(margin-top, --forge-toast-top-right-margin-top, variables.$top-right-margin-top);
    @include theme.css-custom-property(margin-right, --forge-toast-top-right-margin-right, variables.$top-right-margin-right);
    right: 0;
  }
  &.#{$bottom-right-class} {
    @include theme.css-custom-property(margin-bottom, --forge-toast-bottom-right-margin-bottom, variables.$bottom-right-margin-bottom);
    @include theme.css-custom-property(margin-right, --forge-toast-bottom-right-margin-right, variables.$bottom-right-margin-right);
    right: 0;
  }
}

@mixin active($message-class, $action-button-class) {
  transition: mdc-animation.enter(transform, 250ms);

  > .#{$message-class} {
    opacity: 1;
  }

  > .#{$action-button-class} {
    opacity: 1;
  }
}

@mixin active-phone() {
  transform: translateY(0%) !important;
}

@mixin active-non-phone($top-class, $top-left-class, $top-right-class, $bottom-class, $bottom-left-class, $bottom-right-class) {
  &.#{$top-class},
  &.#{$bottom-class} {
    transform: translateX(-50%) translateY(0) !important;
  }

  &.#{$bottom-left-class},
  &.#{$bottom-right-class},
  &.#{$top-left-class},
  &.#{$top-right-class} {
    transform: translateY(0) !important;
  }
}

@mixin message() {
  @include mdc-typography.typography(body1);
  @include theme.css-custom-property(color, --forge-toast-theme-on-background, variables.$on-background);

  display: flex;
  align-items: center;
  transition: mdc-animation.exit-permanent(opacity, 300ms);
  opacity: 0;
}

@mixin action-container() {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

@mixin action-button() {
  @include theme.css-custom-property(--mdc-theme-primary, --forge-toast-theme-action, variables.$action);
}

@mixin close-button() {
  @include theme.css-custom-property(color, --forge-toast-theme-on-background, variables.$on-background);

  margin-left: 8px;
}

@mixin container-custom() {
  min-width: 0;
  max-width: none;
}
