@use "../variables" as vars;
@use "../functions" as func;
@use "../mixins" as mixins;

body.modal-open{
  overflow: hidden;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: func.color(vars.$modal-overlay-background-color);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: vars.$zindex-modal-backdrop;
  padding: 16px;
}
.fds-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: vars.$zindex-modal;
  margin: func.units(4);

  &[aria-hidden="false"] {
    display: flex;
  }

 .modal-content {
    align-self: center;
    max-height: 100%;
    overflow: hidden auto;
    background-color: func.color(vars.$modal-background-color);
    box-shadow: func.shadow(vars.$modal-shadow);
    max-width: 800px;
    width: 100%;
    position: relative;
    margin: func.units(5) auto;
  }

  .modal-header {
    padding: 16px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: func.color(vars.$modal-header-background-color);
    color: func.color(vars.$modal-header-text-color);
    @include mixins.media-breakpoint-up(md) {
      padding: func.units(7) func.units(7) func.units(3); // top | left and right | bottom
    }
    @include mixins.media-breakpoint-up(md) {
      padding-right: 48px;
    }

    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
      color: func.color(vars.$modal-header-text-color);
    }
  }
  .modal-title {
    margin: func.units(5) func.units(8) func.units(3) 0;
    
    @include mixins.media-breakpoint-up(md) {
      margin: 0 func.units(8) 0 0;
    }
  }

  .modal-body {
    background-color: func.color(vars.$modal-body-background-color);
    color: func.color(vars.$modal-body-text-color);
    padding: 0 24px;
    @include mixins.media-breakpoint-up(md) {
      padding: func.units(3) func.units(7); // top and bottom | left and right
    }
    & > *:first-child{
      margin-top: 0;
    }

    p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
      color: func.color(vars.$modal-body-text-color);
    }
  }

  .modal-footer{
    padding: 0 func.units(5) func.units(5) ;
    background-color: func.color(vars.$modal-footer-background-color);
    color: func.color(vars.$modal-footer-text-color);
    @include mixins.media-breakpoint-up(md) {
      padding: func.units(3) func.units(7) func.units(7); // top | left and right | bottom
    }
    @include mixins.media-breakpoint-up(lg) {
      display: flex;
    }
    .button {
      margin-top: func.units(3);
      margin-right: func.units(4);
    }
    
    p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
      color: func.color(vars.$modal-footer-text-color);
    }
  }

  .modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: inherit;
    color: func.color(vars.$modal-header-close-color);
    @include mixins.media-breakpoint-up(md) {
      top:func.units(5);
      right: func.units(6);
    }

    &:hover, &:visited, &:focus{
      color: func.color(vars.$modal-header-close-color);
    }
  }

  // Animation Style
  @keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes modal-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes modal-slide-in {
    from { transform: translateY(15%); }
    to { transform: translateY(0); }
  }

  @keyframes modal-slide-out {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
  }




  &[aria-hidden="false"] .modal-content {
    animation: modal-slide-in .3s cubic-bezier(0, 0, .2, 1);
  }

  &[aria-hidden="true"] .modal-content {
    animation: modal-slide-out .3s cubic-bezier(0, 0, .2, 1);
  }

}