$max-width: map-get($modal-sizes, "default");
%modal-border-padding {
  padding: $modal-padding;
  border-bottom: $modal-border;
}
/**
* Modal class
*/
.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background-color: $modal-background-background-color;

  &-container{
    justify-content: center;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%
  }
  &-content{
    width: 100%;
    max-width: $max-width;
    max-height: $modal-content-max-height;
    border-radius: $modal-content-boder-radius;
    background-color: $modal-content-background-color;
  }

  &-animated {
    transition: all 0.3s ease-in-out;
    .modal-content{
      transition: all 0.3s ease-in-out;
    }
    &:not(.show){
       opacity: 0;
      .modal-content {
        transform: scale(0);
      }
    }
    
    &.show {
      opacity: 1;
      .modal-content {
        transform: scale(1);
      }
    }
  }

  


  &-header {
   @extend %modal-border-padding;
  }
  &-body {
    @extend %modal-border-padding;
    overflow-y: auto;
  }
  &-footer {
    @extend %modal-border-padding;
    border-bottom-width: 0;
  }
  &-title {
    font-size: $modal-title-font-size;
    font-weight: $modal-title-font-weight;
  }

  p {
    margin-bottom: 0;
  }
  /*
  * change sise fo modals content 
  */
  @each $modal-size-prefix, $modal-size in $modal-sizes {
    &.modal-#{$modal-size-prefix} {
      .modal {
        &-content {
          max-width: $modal-size;
        }
      }
    }
  }
}