$modal--default-internal-padding: 1em;
$modal--default-border-radius: 0.5rem;
@define-mixin modal--default {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 620px;
  max-width: 95%;

  /* via https://stackoverflow.com/a/33455342/796832 */
  margin: auto;

  background: white;
  border-radius: $modal--default-border-radius;
  text-align: left;
  /*
   * TODO this is shared in several places ... should it be in a mixin
   */
  box-shadow: 0 0 0.4em rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.2s linear;
  align-items: flex-start;
}

@define-mixin modal--default__narrow {
  width: 500px;
}

@define-mixin modal--default__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: $modal--default-internal-padding;
  background: white;
  border-top-left-radius: $modal--default-border-radius;
  border-top-right-radius: $modal--default-border-radius;
}

@define-mixin modal--default__empty-header {
  background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcNCiAgdmVyc2lvbj0iMS4xIg0KICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICB2aWV3Qm94PSIwIDAgMTQgMjAiDQogIGZpbGw9IiMwMDAwMDAiDQogID4NCiAgPHJlY3QgeD0iMTIiIHk9IjQiIHdpZHRoPSIyIiBoZWlnaHQ9IjgiLz4NCiAgPHJlY3QgeD0iOCIgeT0iNCIgd2lkdGg9IjIiIGhlaWdodD0iMTYiLz4NCiAgPHJlY3QgeD0iNCIgeT0iNCIgd2lkdGg9IjIiIGhlaWdodD0iMTYiLz4NCiAgPHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMTIiLz4NCjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px 21px;
}

$icon-size: 17px;
@define-mixin modal--default__header__icon {
  margin-left: auto;
  font-size: 1.2em;
  color: $mountain;
  transition: color 0.2s linear;
  &:hover {
    cursor: pointer;
    color: $thunder;
  }
}

@define-mixin modal--default__content {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: $modal--default-internal-padding;
  background: $pampas;
}

@define-mixin modal--default__footer {
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  width: 100%;
  padding: $modal--default-internal-padding;

  background: white;
  border-bottom-left-radius: $modal--default-border-radius;
  border-bottom-right-radius: $modal--default-border-radius;

  &:not(:empty) {
    /* line-height + (2 * padding-em * font-size) */
    $footer-button-height: 1.9rem + (2 * 0.8 * 1.2rem);
    $footer-min-height: calc(
      (2 * $modal--default-internal-padding) + $footer-button-height
    );
    min-height: $footer-min-height;
    /* This is only for IE that doesn't respect `align-items` with just `min-height` */
    height: $footer-min-height;
  }

  &:after {
    clear: both;
  }
}

@define-mixin modal--default__footer__link {
}