/* stylelint-disable max-nesting-depth */
/* stylelint-disable selector-max-compound-selectors */
/* stylelint-disable selector-max-class */
/* stylelint-disable selector-no-qualifying-type */
/* stylelint-disable selector-class-pattern */
/* stylelint-disable declaration-no-important */
@use '@funidata/fudis-core' as core;

.fudis-dialog {
  /* Body Text inside Dialog should be md-light by default but can be altered by the App */
  fudis-body-text {
    .fudis-body-text__default {
      @include core.body-text-md-light;
    }
  }
}

/* Adding extra padding when scrollbar is visible */
.fudis-dialog--scrollable {
  .fudis-dialog-content:has(.fudis-form) {
    .fudis-form__content-wrapper {
      padding: core.$spacing-xxs core.$spacing-sm core.$spacing-xxs core.$spacing-xxs !important;
    }
  }

  .fudis-dialog-content:not(:has(.fudis-form)) {
    padding: core.$spacing-xxs core.$spacing-sm core.$spacing-xxs core.$spacing-xxs !important;
  }
}

.cdk-overlay-pane.fudis-dialog-panel.mat-mdc-dialog-panel {
  max-width: 100vw;
}

.cdk-overlay-container {
  .cdk-global-overlay-wrapper {
    overflow: auto;
  }
}

.fudis-dialog-panel {
  display: block;

  mat-dialog-container.mat-mdc-dialog-container {
    padding: 0;

    .mat-mdc-dialog-surface {
      border-radius: 0;
      box-shadow: none;
      overflow-y: visible; /** This was set to auto by ngMaterial, it caused double scrollbar in Sisu environment. This is a try-out fix */

      .mat-mdc-dialog-title {
        margin: core.$spacing-xxs 0 core.$spacing-sm 0;
        padding: 0;
        letter-spacing: normal;
        pointer-events: none;

        &::before {
          display: none;
        }

        &:focus-visible {
          @include core.focus-generic;
        }

        &:focus-visible.fudis-form__header__title__dialog {
          /* stylelint-disable-next-line unit-disallowed-list */
          outline-offset: -2px;
        }
      }

      .mat-mdc-dialog-content {
        @include core.box-reset;
        /* stylelint-disable-next-line property-disallowed-list */
        line-height: core.$body-text-md-line-height;
        letter-spacing: normal;
        /* stylelint-disable-next-line property-disallowed-list */
        font-size: core.$body-text-md-font-size;

        &:focus-visible,
        &:focus {
          @include core.focus-generic;
        }

        // Checkbox and radio-button elements need small padding if form is inside dialog
        // Otherwise focus and invalid styles won't show properly as dialog padding is overlapping them
        fudis-checkbox-group-option,
        fudis-radio-button {
          padding-left: core.$spacing-xxs;
        }

        // Additional padding for dialog content buttons so that focus style is not cropped in any case
        fudis-button {
          padding: core.$spacing-xxs;
        }

        .fudis-form.fudis-grid__xxl {
          @include core.breakpoint('sm') {
            @include core.grid-max-width('xxl');

            gap: core.$spacing-sm;
          }
        }
      }

      /* Necessary padding for content, otherwise it's visible focus is cropped */
      .mat-mdc-dialog-content:not(:has(.fudis-form)) {
        padding: core.$spacing-xxs;
      }

      /* Styles and overrides for Form inside Dialog */
      .mat-mdc-dialog-content:has(.fudis-form) {
        /* Originally overflow auto is set in dialog-content wrapper but since the HTML structure is different in Form, we have to override it and set it correctly in fudis-form__content-wrapper below */
        overflow: hidden;

        /* Set inherited max-height from MatDialogContent in order for Action buttons to position correctly at the bottom */
        fudis-form,
        form {
          max-height: inherit;
        }

        /* Make Form content scrollable when inside Dialog */
        .fudis-form__content-wrapper {
          /* Necessary padding for form content Note! Form dialog content focus will be cropped for all content that is used outside of fudis-form */
          padding: core.$spacing-xxs;

          /* These styles can be found in MatDialogContent directive which enables scrollable content */
          max-height: 65vh;
          overflow: auto;
        }
      }

      .mat-mdc-dialog-actions {
        align-items: flex-end;
        margin-top: core.$spacing-xs;
        margin-bottom: 0;
        padding: 0;
        min-height: initial;

        fudis-button {
          &:not(:first-of-type) {
            margin-top: core.$spacing-xs;
            margin-left: core.$spacing-xs;
          }
        }
      }
    }
  }
}

.fudis-dialog-backdrop {
  @include core.bg-color('white');

  &.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    top: -50vh;
    opacity: 0.95 !important;
    width: 300vw;
    height: 350vh;
  }
}