@import "settings.global";
@import "objects.grid";
@import "utilities.alignment";

@mixin modal {
  @include center-block__content;
  display: block;
  width: $modal-width;
  background-color: $modal-background-color;
  border: $modal-border;
  border-radius: $modal-border-radius;
  z-index: $modal-z-index;
  overflow: hidden;
}

@mixin modal__header {
  position: relative;
  text-align: $modal-header-text-align;
}

@mixin modal__close {
  top: .7em;
}

@mixin modal__body {
  padding: $modal-body-padding;
}

@mixin modal__footer {
  padding: $modal-footer-padding;
}

@mixin modal__footer--block {
  @include grid;
  @include grid__cell--no-gutter;
  padding: $modal-footer-block-padding;
}

@mixin modal__footer-button--block {
  @include grid__cell;
  border-radius: $modal-footer-block-button-border-radius;
}

@mixin modal--ghost {
  background-color: $modal-ghost-background-color;
  color: $modal-ghost-color;
}

@mixin modal__heading--ghost {
  color: $modal-ghost-heading-color;
}

@mixin modal--high {
  box-shadow: $box-shadow-solid-high;
}

@mixin modal--higher {
  box-shadow: $box-shadow-solid-higher;
}

@mixin modal--highest {
  box-shadow: $box-shadow-solid-highest;
}