$modal-padding: 3em;
$modal-close-color: $light-gray;
$modal-image-height: 135px;
$modal-image-width: $modal-image-height;

.modal-open {
  overflow: hidden;
}

.modal {
  label {
    cursor: pointer;

    img {
      $img-width: 300px;
      border-radius: $img-width/2;
      display: block;
      margin-bottom: 2em;
      max-width: $img-width;
    }
  }

  input[type="checkbox"] {
    display: none;
  }
}

.modal-window {
  @include transition(opacity .25s ease);
  @include position(fixed, 0px 0px 0px 0px);
  background: rgba(0,0,0, .85);
  opacity: 0;
  text-align: left;
  visibility: hidden;
  z-index: 999;

  .modal-bg {
    @include position(absolute, 0px 0px 0px 0px);
    cursor: pointer;
  }

  .modal-inner {
    @include transition(opacity .25s ease);
    @include position(absolute, -20% 0px 0px 0px);
    border-radius: 3px;
    background: white;
    margin: auto;
    max-height: 70%;
    overflow: auto;
    padding: $modal-padding;
    width: 95%;

    @include media($medium-screen) {
      width: 50%;
    }

    .img-wrapper-modal {
      @include size($modal-image-width $modal-image-height);
      background-color: $light-gray;
      border-radius: 190px;
      display: block;

      img {
        @include size($modal-image-width $modal-image-height);
        content: '';
        display: block;
        padding: 30px;
      }
    }

    h1 {
      color: $base-font-color;
      margin-bottom: .6em;
      text-align: left;
      text-transform: capitalize;
    }

    p {
      font-size: $base-font-size;
      max-width: 100% !important;
      padding: 0;
      text-align: left;

      &.intro {
        color: $blue;
        line-height: 1.6em;
      }

      &.body { 
        color: $base-font-color;
        line-height: 1.45em;

        @include media($medium-screen) {
          @include columns(2 8em);
        }
      }
    }

    a.cta {
      color: white;
      display: inline-block;
      margin-right: .5em;
      margin-top: 1em;

      &:last-child {
        padding: 0 2em;
      }
    }
  }

  .modal-close {
    @include position(fixed, ($modal-padding /2) ($modal-padding /2) 0 0);
    @include size(0.5em);
    cursor: pointer;

    &:after,
    &:before {
      @include position(absolute, 0px 0 0 -50%);
      @include transform(rotate(45deg));
      @include size(.15em 1.5em);
      background: $modal-close-color;
      content: '';
      display: block;
      margin: -3px 0 0 -1px;
    }

    &:hover:after,
    &:hover:before {
      background: darken($modal-close-color, 10);
    }

    &:before {
      @include transform(rotate(-45deg));
    }
  }
}

.modal-state:checked + .modal-window {
  opacity: 1;
  visibility: visible;
}

.modal-state:checked + .modal-window .modal-inner {
  top: 0;
}


.btn {
  @include button(simple, $base-accent-color);
  font-size: $base-font-size;
}

p img {
  float: left;
  height: auto;
  margin: 0 1em 1em 0;
  max-width: 200px;
}

// Based on code by Kasper Mikiewicz