/* stylelint-disable unit-disallowed-list */
@use '@funidata/fudis-core' as core;

$dialog-width-xs: calc(30rem / var(--fudis-rem-multiplier));
$dialog-width-sm: calc(44rem / var(--fudis-rem-multiplier));
$dialog-width-md: calc(55rem / var(--fudis-rem-multiplier));
$dialog-width-lg: calc(70rem / var(--fudis-rem-multiplier));
$dialog-width-xl: calc(90rem / var(--fudis-rem-multiplier));

.fudis-dialog {
  @include core.border('1px', 'solid', 'gray-dark');

  box-sizing: border-box;
  position: relative;
  padding: core.$spacing-md core.$spacing-sm;
  max-width: calc(100vw - core.$spacing-lg);

  &__close {
    float: right;

    &__absolute {
      position: absolute;
      right: core.$spacing-sm;

      @include core.breakpoint('sm') {
        right: core.$spacing-xl;
      }
    }
  }

  &__size {
    &__xs {
      width: $dialog-width-xs;
    }

    &__sm {
      width: $dialog-width-sm;
    }

    &__md {
      width: $dialog-width-md;
    }

    &__lg {
      width: $dialog-width-lg;
    }

    &__xl {
      width: $dialog-width-xl;
    }
  }

  @include core.breakpoint('sm') {
    padding: core.$spacing-md core.$spacing-xl;
  }

  @include core.breakpoint('md') {
    max-width: calc(100vw - core.$spacing-xxl);
  }
}