@use 'palette.tokens' as palette;
@use 'spacing.tokens' as spacing;

$background-color-modal: palette.$color-light-stronger !default;
$padding-modal: spacing.rhythm(4) !default;
$spacing-dialog-sections: spacing.rhythm(3) !default;
$height-header-footer-modal: spacing.rhythm(12) !default;
$width-confirm-dialog: spacing.rhythm(48) !default;
$border-radius-modal: spacing.$border-radius-default !default;

@mixin centered-dialog() {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@mixin fixed-header() {
  background: $background-color-modal;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

@mixin fixed-footer() {
  background: $background-color-modal;
  bottom: 0;
  left: 0;
  position: fixed;
  padding: $spacing-dialog-sections $padding-modal;
  right: 0;
}