@import (less) 'mixins.less';
@import (less) 'variables.less';
/*************************************************************
Styles
**************************************************************/
.input-wrapper.bonzer-inputs{
  input, select, textarea{
    background: white;
  }
  > .button{
    &.upload{
      border-color: lighten(@success-300, 15%);
      background: lighten(@success-50, 5%);
      color: @success-700;
    }
  }
  &.upload-input-wapper, &.multi-upload-input-wapper{
    &.no-images{
      .images-wrapper{
        display: none;
      }
    }
    .images-wrapper{
      clear: both;
      background: @light-gray-color;      
      width: 100%;
      margin-top: 2px;
      text-align: center;           
      width: 100%;
      float: left;
      padding: 5px 0 16px;
      .image-wrapper{
        display: inline-block;
        position:relative;        
        margin: 10px 10px 0;
        padding: 1px;
        float: left;
        .roundedcorners(25px);
        img{              
          width: 50px;
          height: 50px;
          .roundedcorners(25px);
          .box-shadow(~"0 0 0px 2px #fff, 0 0 2px 4px #ddd");
        }
        i.fa{
          float: left;
          position: absolute;
          top: -4px;
          background: rgba(45, 45, 45, 0.21);
          width: 100%;
          height: 100%;
          border-radius: 50px;
          padding: 14px 3px;
          color: #FDFDFD;
          font-size: 18px;
          cursor: pointer;
          left: 0;
          top: 0;
          text-align: center;
          opacity:0;
          .transition(all, 0.25s , ease-out);
          &.move-img{
            top: -8px;
            right: -43px;
            padding: 0;
            display: inline-block;
            opacity: 1;
            width: auto;
            height: auto;
            background: transparent;
            color: @dark-color;
            cursor: move;
          }
        }
        &:hover{
          i.fa{
            opacity:1;
          }
        }

      }
      .sortable-placeholder{
        background: @orange-300;
        width: 60px;
        height: 60px;
        float: left;
        padding: 1px;
        display: inline-block;
        .box-shadow(~"0 0 0px 2px #fff, 0 0 2px 4px #ddd");
      }
    }
  }
  &.editor-input-wrapper{
    label{
      .box-shadow(none);
      background: @light-gray-color;
      color: @dark-color;
      width: 100%;
      border: 1px solid @light-border;
    }
    button{
      .roundedcorners(2px) !important;
      width: auto;
    }
    input, textarea{
      float: none !important;
      width: auto !important;
    }
    textarea{
      width: 100% !important;
      border-color: @light-border;
    }
    p{
      &.desc{
        float: left;
        width: calc(~"100% + 4px");
        border-bottom: 1px solid @light-border;
        margin-bottom: 5px;
      }
    }
    .wp-editor-wrap{
      .box-sizing(content-box);
      *{
        .box-sizing(content-box);
      }
      .quicktags-toolbar{
        input.button.button-small{
          display: inline-block;
        }
      }
      .wp-switch-editor{
        border-bottom-width: 0;
      }
    }
    
  }
  &.multi-upload-input-wapper{
    .images-wrapper{
      margin-top: 5px; 
      padding: 2px 0 12px 22px;
      position: relative;
      float: left;
    }
  } 
  &.style-1{
    &.upload-input-wapper, &.multi-upload-input-wapper{
      .images-wrapper{
        margin: 4px 0px 0;
        width: 100%;
        border: 1px dashed @light-border; 
      }
    }
  }
  &.style-2, &.style-3{    
    &.editor-input-wrapper{
      label{
        color: @dark-color;
      }
    }
  }
  &.style-2{
    &.upload-input-wapper, &.multi-upload-input-wapper{
      .images-wrapper{
        padding: 5px 0 6px;
      }
    }
    &.editor-input-wrapper{
      label{
        background: transparent;
        border-color: transparent;
      }
    }
  }
  &.style-3{
    > .button{
      &.upload{
        border-color: lighten(@success-300, 15%);
        background: lighten(@success-50, 5%);
        color: @success-700;
      }
    }
    &.editor-input-wrapper{
      label{
        width: auto;
        background: white;
        border-color: transparent;
        color: @dark-color;
      }
    }
  }
}

#edittag, #addtag{
  .form-field{
    .input-wrapper.bonzer-inputs{
      width: 95%;
      margin-top: 0;
      margin-bottom: 15px;
      > label{
        display: none;
      }
      &.style-3{
        &.select-input-wapper, &.multi-select-input-wapper{
          padding-top: 7px;
        }        
      }
    }
  }
}

#addtag {
  .bonzer-form-fields-wrapper{
    padding: 10px;
    h3{
      margin: 0 -10px 10px;
    }
    .form-field{
      .input-wrapper.bonzer-inputs{  
        > label{
          display: block;
        }    
        &.style-1, &.style-2{
          margin: 0 -10px 15px;
        }     
        &.style-1{
          min-width: 500px;
          > label{
            width: calc(~"45% - 2px");
          }
          input, select, textarea{
            width: calc(~"55% - 41px");
          }
          select{
            width: 55%;
          }
          &.icon-input-wapper{
            input{
              width: calc(~"55% - 73px");
            }
          }
          &.color-input-wapper{
            input{
              width: calc(~"55% - 83px");
            }
          }
          &.radio-input-wapper{
            .options{
              width: 55%;
              margin: 0;
              label{
                display: block;
              }
            }
          }
          &.editor-input-wrapper{
            > label{
              width: 100%;
            }
          }
        }
        &.style-3{
          .roundedcorners(0); 
          .box-shadow(0 0 0 10px @white);
        }      
      }
    }
  }  
}
#edittag{
  h3{
    margin: 0;
  }
  .form-field{
    .input-wrapper.bonzer-inputs{
      &.checkbox-input-wapper{
        > label{
          display: block;   
          width: 0;
          padding: 0;
          span{
            .opacity(0);
          }         
        }
      }
    }
  }
  
}

.form-table{
  .input-wrapper.bonzer-inputs{
    > label{
      display: none;
    }
    &.checkbox-input-wapper{
      > label{
        display: block;
        width: 0;
        padding: 0;
        span{
          .opacity(0);
        }
      }
    }
    &.style-1{
      input, textarea{
        width: calc(~"100% - 41px");
      }
      select{
        width: 100%;
      }
      p{
        &.desc{
          margin: 2px -2px 0;
          clear: both;
          float: left;
          width: calc(~"100% + 4px");
        }
      }
      &.color-input-wapper{
        input{
          width: calc(~"100% - 83px");
        }
      }
      &.icon-input-wapper{
        input{
          width: calc(~"100% - 73px");
        }
      }
      &.editor-input-wrapper{
        p{
          &.desc{
            width: 100%;
            border: 1px solid @light-border;
            margin: 0 0 2px;
          }
        }
      }
      &.radio-input-wapper{
        padding-top: 5px;
        .options{
          width: 100%;
        }
      }
    }
    &.style-2{
      padding: 10px;
      > .button{
        top: 10px;
      }
    }
    &.style-3{      
      margin-top: 0;
      margin-bottom: 15px;
      &.select-input-wapper, &.multi-select-input-wapper{
        padding-top: 7px;
      } 
      &.checkbox-input-wapper{
        > label{
          top: 3px;
          span{
            .opacity(0);
          }
          &:before, &:after{
            top: 8px;
          }
        }
      }
    }
  }
}

.profile-meta-box{
  h2{
    margin-bottom: 15px;
  }
  .input-wrapper.bonzer-inputs{
    &.style-3{
      &:nth-child(2){
        margin-top: 30px;
      }      
      margin: 0 15px 15px;
      width: calc(~"100% - 30px");
      .roundedcorners(0);
      .box-shadow(0 0 0 15px @white);
    }
  }
}