/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */



.wp-block-bod-modal-block, .bod-block-close-btn {
  
  &.align-center {
    text-align: center;
  }

  &.align-left {
    text-align: left;
  }

  &.align-right {
    text-align: right;
  }

  .bod-btn {
    display: inline-block;
    vertical-align: top;
    line-height: 1.5;
    padding: 8px 20px;
    margin: 4px 0;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.1);
    cursor:pointer;
  }

}

// bevause we move the overlay and wrap to the document body then 
// we need to setup styles outside of the wp-block container

.bod-block-popup-overlay,
.bod-block-popup-wrap {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
}

.bod-block-popup-overlay {
  z-index: 10001;
  height: 100%;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 0;
  
  &.active {
    opacity: 1;
  }
}

.bod-block-popup-wrap {
  z-index: 10002;
  
  &.active {
    .bod-block-popup-closer {
      opacity: 1;
    }
    opacity: 1;
  }

  .bod-block-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    &.size-s {
      width: 400px;
    }

    &.size-m {
      width: 600px;
    }

    &.size-l {
      width: 800px;
    }
    
    &.size-xl {
      width: 1000px;
    }

    &.size-f {
      width: 100%;
    }

    .bod-modal-title h2 {
      margin: 0; // reset margin on title h2 tag
      clear: none;
    }

    max-width: 100%;
    max-height: 100%;
    overflow: auto;

    // Transition Effects

    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    opacity: 0;
    
    &.slide-right {
      -webkit-animation: slide-right 1s;
      -webkit-animation-delay: 0s;
      animation: slide-right 1s;
      animation-delay: 0s;
      opacity: 1;
    }
      
    @-webkit-keyframes slide-right {
      from { left: -50%}
      to { left: 50%; }
    }
      
    @keyframes slide-right {
      from { left: -50%}
      to { left: 50%; }
    }
      
    &.slide-left {
      -webkit-animation: slide-left 1s;
      -webkit-animation-delay: 0s;
      animation: slide-left 1s;
      animation-delay: 0s;
      opacity: 1;
    }
        
    @-webkit-keyframes slide-left {
      from { left: 150%}
      to { left: 50%; }
    }
        
    @keyframes slide-left {
      from { left: 150%}
      to { left: 50%; }
    }
      
    &.slide-down {
      -webkit-animation: slide-down 1s;
      -webkit-animation-delay: 0s;
      animation: slide-down 1s;
      animation-delay: 0s;
      opacity: 1;
    }
        
    @-webkit-keyframes slide-down {
      from { top: -50%}
      to { top: 50%; }
    }
        
    @keyframes slide-down {
      from { top: -50%}
      to { top: 50%; }
    }
      
    &.slide-up {
      -webkit-animation: slide-up 1s;
      -webkit-animation-delay: 0s;
      animation: slide-up 1s;
      animation-delay: 0s;
      opacity: 1;
    }
        
    @-webkit-keyframes slide-up {
      from { top: 150%}
      to { top: 50%; }
    }
        
    @keyframes slide-up {
      from { top: 150%}
      to { top: 50%; }
    }

    &.fade {
      opacity: 1;
    }

  }

  .bod-block-popup-closer {
    
    &:before {
      content: '\00D7';
      font-size: 48px;  
    }

    &:hover {
      cursor: pointer;
    }

    position: fixed;
    top: 0;
    right: 0;
    text-align: center;
    font-weight: normal;
    line-height: 48px;
    height: 48px;
    width: 48px;
    
    color: black;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    opacity: 0;
    background-color: rgba($color: #ffff, $alpha: 0.2)
  }

  button.bod-block-title-closer {
    float: right;
    line-height: 1;
    padding: 6px;
    margin: 0;
    border: none;
    outline: none;
    &:hover{
      background-color: transparent;
      color: black; 
      border: none;
      padding: 6px;
    }
    &:active {
      background-color: transparent;
      color: black; 
      border: none;
    }
    &:not(:hover):not(:active){
      background-color: transparent;
      color: black;
      border: none;
    }
  }

}