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

@mixin host() {
  display: flex;
  width: 100%;
  justify-content: center;
}

@mixin base() {
  @include theme.css-custom-property(width, --forge-page-state-width, variables.$width);
  @include theme.css-custom-property(margin-top, --forge-page-state-vertical-margin, variables.$vertical-margin);
  @include theme.css-custom-property(margin-bottom, --forge-page-state-vertical-margin, variables.$vertical-margin);
  text-align: center;
}

@mixin base-mobile() {
  @include theme.css-custom-property(width, --forge-page-state-mobile-width, variables.$mobile-width);
}

@mixin graphic() {
  @include theme.css-custom-property(height, --forge-page-state-graphic-height, variables.$graphic-height);
  @include theme.css-custom-property(margin-bottom, --forge-page-state-vertical-margin, variables.$vertical-margin);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@mixin graphic-mobile() {
  @include theme.css-custom-property(height, --forge-page-state-mobile-graphic-height, auto);
}

@mixin title() {
  @include mdc-typography.typography(headline3);  
  @include mdc-theme.property(color, text-secondary-on-background);
  @include theme.css-custom-property(margin-top, --forge-page-state-vertical-margin, variables.$vertical-margin);
  @include theme.css-custom-property(margin-bottom, --forge-page-state-vertical-margin, variables.$vertical-margin);
}

@mixin title-mobile() {
  @include mdc-typography.typography(headline5);
}

@mixin message() {
  @include mdc-typography.typography(subtitle1);
  @include mdc-theme.property(color, text-primary-on-background);
  @include theme.css-custom-property(margin-bottom, --forge-page-state-vertical-margin, variables.$vertical-margin);

  font-size: 20px;
  margin-top: 0;
}

@mixin message-mobile() {
  @include mdc-typography.typography(body1);
}

@mixin core-styles() {
  .forge-page-state {
    @include base;

    &__graphic {
      @include graphic;

      ::slotted([slot=graphic]) {
        height: 100%;
        width: 100%;
      }
    }

    &__title {
      @include title;
    }

    &__message {
      @include message;
    }

    &__actions {
      ::slotted(:not(:last-child)) {
        margin-right: 16px;
      }
    }
  }

  @include mixins-media.phone-only {
    .forge-page-state {
      @include base-mobile;

      &__graphic {
        @include graphic-mobile;
      }

      &__title {
        @include title-mobile;
      }
  
      &__message {
        @include message-mobile;
      }

      &__actions {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        ::slotted(:not(:last-child)) {
          margin-right: 0;
          margin-bottom: 16px;
        }
      }
    }
  }
}
