/**
 * app/css/wysiwyg.css
 *
 * This file is for the wysiwyg editor's css.
 *
 * @version 3.0
 * @author  Joey Kimsey <Joey@thetempusproject.com>
 * @link    https://TheTempusProject.com
 * @license https://opensource.org/licenses/MIT [MIT LICENSE]
 */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Helvetica Neue', 'Helvetica', arial, sans-serif;
}

/* WYSIWYG Editor */
.wp-webdeasy-comment-editor {
  width: 40rem;
  min-height: 18rem;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
  border-top: 6px solid #4a4a4a;
  border-radius: 3px;
  margin: 2rem 0;
  
  .toolbar {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    
    .line {
      display: flex;
      border-bottom: 1px solid #e2e2e2;
      
      &:last-child {
        border-bottom: none;
      }
      
      .box {
        display: flex;
        border-left: 1px solid #e2e2e2; 
        
        .editor-btn {
          display: block;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          transition: .2s ease all;

          &:hover, &.active {
            background-color: #e1e1e1;
            cursor: pointer;
          }
          
          &.icon img {
            width: 15px;
            padding: 9px;
            box-sizing: content-box;
          }
          
          &.icon.smaller img {
            width: 16px;
          }
          
          &.has-submenu {
            width: 20px;
            padding: 0 10px;
            
            &::after {
              content: '';
              width: 6px;
              height: 6px;
              position: absolute;
              background-image: url(https://img.icons8.com/ios-glyphs/30/000000/chevron-down.png);
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;
              right: 4px;
            }
            
            .submenu {
              display: none;
              position: absolute;
              top: 34px;
              left: -1px;
              z-index: 10;
              background-color: #FFF;
              border: 1px solid #b5b5b5;
              border-top: none;
              
              .btn {
                width: 39px;
              }
              
              &:hover {
                display: block;
              }
            }
            
            &:hover .submenu {
              display: block;
            }
          }
        }  
      }
    }
  }
  
  .content-area {
    padding: 15px 12px;
    line-height: 1.5;
    
    .visuell-view {
      outline: none;
      min-height: 12rem;
      
      p {
        margin: 12px 0;
      } 
    }
    
    .html-view {
      outline: none;
      display: none;
      width: 100%;
      height: 200px;
      border: none;
      resize: none;
    }
  }
}


/* Modal */
.modal {
  z-index: 40;
  display: none;
  
  .modal-wrapper {
    background-color: #FFF;
    padding: 1rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20rem;
    min-height: 10rem;
    z-index: 41;
    
    .close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      cursor: pointer;
    }
    
    .modal-content {
      flex-direction: column;
      
      h3 {
        margin-top: 0;
      }
        
      input {
        margin: 1rem 0;
        padding: .5rem;
      }
      
      input[type="text"] {
        width: calc(100% - 1rem);
      }
      
      .row {
        
        label {
          margin-left: .5rem;
        }
      }
      
      button {
        background-color: #D2434F;
        border: 0;
        color: #FFF;
        padding: .5rem 1.2rem;
        cursor: pointer;
      } 
    }
  }
  
  .modal-bg {
    position: fixed;
    background-color: rgba(0, 0, 0, .3);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
  }
}

/* Codepen Footer */
footer {
  position: fixed;
  bottom: 0;
  display: flex;
  
  p {
    margin: 0.5rem 1rem;
    font-size: 12px;
  }
  
  a {
    text-decoration: none;
    font-weight: bold;
    color: #000;
  }
}