
$header-bg: #040430;
$body-bg: #FFFFF7;

.post-preview{
  display: flex;
  flex-wrap: wrap;
  width: 75%;
  justify-content: center;
  align-items: center;
  transition: box-shadow 0.5s, border-top 0.5s;
 input{
    display: none;
    }
  .admin-action-menu{
    position: relative;
    bottom: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    overflow: hidden;
    flex-wrap: wrap;
    label{
      z-index: 2;
      width: 100%;
      margin: auto;
     // height: 50%;
     
      display: block;
     font-family: 'Montserrat', sans-serif;
     font-size: 12px;
  flex: 1 1 40px;
  max-height: 40px;

     &:hover{
        cursor: pointer;
      }
    }

    .action-button-collection{
      width: 100%;
      text-align: center;
      position: absolute;
      left: 0;
      display: flex;
      justify-content: center;
    }

    .progress-indicator{
      width: 100%;
      max-width: 400px;
      background-color: lighten(black, 15%);
      height: 100px;
      color: white;
      h3{
        width: 100%;
        text-align: left;
        padding: 5px 0 0 5px;
      }

      #progress-bar{
        height: 8px;
        width: 80%;
        margin: 35px auto;
        align-self: center;
        background-color: darken(white, 15%);
        position: relative;
        overflow: hidden;
        border-radius: 6px;
        transition: background-color 0.25s;
          #progress-shield{
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: grey;
            transition: transform 0.5s;
          }
      }
    }

    .error-message{
      width: 74%;
      max-width: 300px;
      background-color: lighten(rgba(222, 33, 33, 0.3), 1%);
       display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 0 10px;
      h3{
        margin-bottom: 10px;
      }
      p{
        margin-bottom: 10px;
      }
    }

    button{
      position: relative;
      background-color: lighten(black, 15%);
      color: $body-bg;
      font-size: ms(1)*0.8;
      border: none;
      border-left: 1px solid lighten(black, 25%);
      border-right: 1px solid black;
      width: 24%;
      max-width: 100px;
      height: 100px;
      transition: background-color 0.25s;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0;


      &:hover{
        background-color: lighten(black, 1%);
        cursor: pointer;
      }

      &.confirm-button{
        background-color: green;
        border-left: 1px solid lighten(green, 5%);
        &:hover{
          background-color: lighten(green, 8%);
          cursor: pointer;
        }
      }

    }
    
  }

  @media screen and (max-width: 600px){
    width: 100%;
    padding: ms(2) 5px;
    justify-content: flex-start;
    padding: 0 !important;
    margin: 0 auto ms(2) auto;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
    border-top: 1px solid rgba(0,0,0,0.1);

    & .featured{
      padding-top: 0;
      padding: 0;
      border-top: 0px;
      width: initial;
      padding: ms(2) 0 0 0;
      //margin: 0;
    }
  }

  &.featured{
     width: initial;
     padding: ms(2) 0 0 0;
    }

    

  margin: 0 auto;

  padding: ms(2) ms(2) 0 ms(2);
  max-width: 1000px;
  border-radius: 5px;


}


.post-image-admin{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba($header-bg, 0.2);
    opacity: 0;
   display:flex;
   justify-content: center;
   align-items: center;
   
}

.bubble{

 // box-shadow: -2px 4px 6px 0 rgba(0,0,0,0.25), 1px 0px 2px 0 rgba(0,0,0,0.18);

}

.post-image-wrapper{
  position: relative;
  width: 17vw;
  display: flex;
  height: 17vw;
  max-height: 30vh;
  max-width: 30vh;
  overflow: hidden;
  &:hover{
    cursor: pointer;
  }

  .featured &{
    width: 75%;
    max-width: none;
    max-height: none;
    height: 50vh;
  }

  @media screen and (max-width: 600px){
    width: 33vw;
    height: 33vw;

    .featured &{
      width: 100%;
    }
  }


  .post-image{
    width: 100%;
  object-fit: cover;


  }

}

.post-info{
  width: 62%;
  margin: 0 0 0 ms(1);
  .no-image &{
    width: 100% !important;
  }
  @media screen and (max-width: 600px){
      width: 49%;
      align-self: stretch;
      //border-top: 1px solid $header-bg;
      border-radius: 0px;
      margin-top: ms(1);
      .featured &{
        border-top: 1px solid rgba(0,0,0,0.1);
        margin: ms(1) auto 0 auto !important;
      }

  }
  transition: background-color 0.5s, color 0.5s;
  border-radius: 5px;
  align-self: stretch;
  display: flex;
  flex-direction: column;

 // justify-content: center;
  &:hover{
    @media screen and (min-width: 600px){
      cursor: pointer;
    //   background-color: $header-bg;
    //   color: $body-bg;
    //   .post-title{
    //     color: $body-bg;
    //   }
    } 
  }
  .featured &{
    width: 75%;
        margin-left: 0;

      //text-align: center;

  }
  padding: 0 ms(1);

  .post-title{
   // text-transform: uppercase; 
    font-size: ms(2)*1.33;
    line-height: 1;
    text-align: center;
    padding: ms(1) 0;
    color: $header-bg;
    z-index: 4;
    transition: color 0.25s;
    //font-weight: bold;
    @media screen and (max-width: 600px){
      font-size: ms(2);
      margin: auto 0;
    }

    .featured &{
    font-size: ms(3);

      margin-top: ms(1);
    }
  }
  .excerpt{
    font-size: ms(1)*0.9;
    padding-bottom: ms(1);
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
    //font-weight: 300;
    @media screen and (max-width: 600px){

      display: none;
      .featured &{
        display: block;
      }
    }

    .featured &{
      font-size: ms(1);
    }

  }
  .mce-content-body {
    * {
      background-image: none;
      position: relative;
      padding-top: 18px;
    }
    *:before{
      content: ' ';
      position: absolute;
      top: 0;
      left: 0;
      font-size: 10px;
      border-right: 1px dashed #BBB;
      border-bottom: 1px dashed #BBB;
      color: #BBBBBB;
      padding: 2px;
    }
    .post-title:before{
      content: 'Post Title';
    }
  }
  .mce-content-body.excerpt {
    p:before{
      content: 'Post Excerpt';
    }
  }
  .category{
      text-align: left;
      padding: 5px 5px 5px 0;
      margin: auto auto 2px 0;
        //margin-top: auto;
    span{
      text-transform: uppercase; 
      letter-spacing: ms(1)/11;
      font-size: ms(1)/1.5;
     // font-weight: 300;
     font-family: 'Open Sans', sans-serif;
     font-weight: 300;
      background-color: rgba($header-bg, 1);
      color: $body-bg;
      padding: 3px 6px;
      border-radius: 5px;
      @media screen and (max-width: 600px){
        background-color: initial;
        color: initial;
      }
    }
  }  
}

.excerpt-drawer{
  width: 100%;
  //margin: ms(1) auto;
  //background-color: $header-bg;
  //color: $body-bg;
  //border-top: 1px solid $header-bg;

  font-size: ms(1);

  padding: ms(1) ms(2);
  //border-radius: 5px;
  input[type='checkbox']{
    display: none;
  }
  @media screen and (min-width: 600px){
    display: none;
  }
  .featured &{
    display: none;
  }
  .excerpt-drawer-content{
    display: none;

  }
}

.post-divider{
  width: 100%;
  max-width: 750px;
  margin: ms(2) auto 0 auto;
  border: none;
  border-top: 1px solid lighten(black, 3%);

  @media screen and (max-width: 600px){
    width: 90%;
    display: none;
    .featured &{
      display: block;
      margin: ms(1) auto 0 auto;
      border-color: $body-bg;
    }
  }
}

#post-load-status{
  width: 75%;
  margin: ms(2) auto ms(4) auto;
  font-size: ms(2);
  text-align: center;
}