@import "../palette";
@import "../variables";
@import "../mixins/fontSize";

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $scrim-content-z-index;
  overflow: auto;
  &__shadow {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	  background-color: rgba($dark-blue-color, 0.5);
  }
  &__fill {
    position: relative;
    padding: em-calc(20px) 10vh;
    min-height: 100vh;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &__content {
    text-align: left;
    @include border($panel-border-color);
    @include word-wrap(break-word);
    background-color: $modal-background-color;
	  border-radius: 2px;
    position: relative;
    margin: 0 auto;
	  padding: em-calc(10px) em-calc(25px);
    box-shadow: 0px 4px em-calc(40px) 0px rgba($dark-blue-color, 0.50);

    @media (min-width: $medium)  {
      width: calc(#{$medium} - 60px);
    }
  }
  &__close {
		position: absolute;
		top: 10px;
		right: 12px;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
}