@import "../mixins/modals/default.css";
@import "../mixins/grid/row.css";
@import "../mixins/text/h3.css";
@import "../mixins/text/h5.css";
@import "../mixins/buttons/base.css";
@import "../mixins/links/positive.css";
@import "../mixins/links/negative.css";
@import "../mixins/links/neutral.css";
@import "../mixins/utils/center-items.css";


.modal--default {
  @mixin modal--default;
}

.modal--default__narrow {
  @mixin modal--default__narrow;
}

.modal--default__header {
  @mixin modal--default__header;
}

.modal--default__empty-header {
  @mixin modal--default__empty-header;
}

.modal--default__header__title {
  @mixin h3;
  max-width: 100%;
}

.modal--default__header__icon {
  @mixin modal--default__header__icon;
}

.modal--default__content {
  @mixin modal--default__content;
}

/* MESSAGES -> error || info || success*/
.modal--default__content__error {
  color: $ruby;
}

.modal--default__content__success {
  color: $caribbean;
}

.modal--default__content__info {
  color: $jaffa;
}

.modal--default__content__fineprint {
  color: $fineprint-color;
  p {
    font-size: $fineprint-font-size;
    line-height: $fineprint-line-height;

    a {
      color: inherit;
      text-decoration: underline;
    }
  }
}

/* FIXME, @import is not working
 * The @import is defining the mixin below where we use it and it is causing errors
 * so we just dump it here */
@define-mixin center-items {
  align-items:     center;
  justify-content: center;
  text-align:      center;
}
.modal--default__footer {
  @mixin center-items;
  @mixin modal--default__footer;

  /* TODO Figure out how to manage this better */
  & *:last-child {
    margin-right: 0;
    margin-left: auto;
  }

  & *:first-child {
    float: left;
  }

  & *:only-child {
    float: right;
  }

  & .pull-left {
    float: left;
  }

  & .pull-right {
    float: right;
  }

}

/* FOOTER BUTTONS  */
.modal--default__footer__btn  {
  @mixin h5;
  @mixin btn-base caribbean, $caribbean;
}

.modal--default__footer__btn--negative  {
  @mixin h5;
  @mixin btn-base ruby, transparent, $ruby;
}

.modal--default__footer__btn--neutral  {
  @mixin h5;
  @mixin btn-base pampas, $pampas, $base-text-color;
}


/* FOOTER LINKS */
.modal--default__footer__link {
  @mixin h5;
  @mixin link-positive;
}

.modal--default__footer__link--negative {
  @mixin h5;
  @mixin link-negative;
}

.modal--default__footer__link--neutral {
  @mixin h5;
  @mixin link-neutral;
}

.modal--default__footer__btn,
.modal--default__footer__btn--negative,
.modal--default__footer__btn--neutral,
.modal--default__footer__link,
.modal--default__footer__link--negative,
.modal--default__footer__link--neutral {
  @mixin modal--default__footer__link;
}