@import (less) '../variables.less';
@import (less) '../mixins.less';
/* ****************************************************************
FieldBakers
********************************************************************/
.bonzer-custom-fields-creator-tabs-content{

  .field-baker {
    .box-shadow(0 2px 0 @light-gray-color);
    position: relative;
    padding: 2px;
    border:1px solid darken(@teal-50, 20%);

    .field-baker-header {
      background: @teal-400;
      line-height: 40px;
      padding-left: 0;
      height: 40px;

      h3 {
        margin: 0;
        color: @white;
        line-height: inherit;
        padding: 0 15px;
      }

      .field-settings, .field-delete, .field-move, .field-duplicate{
        color: @white;
        border-left: 1px solid @teal-600;
        position: absolute;
        right: 2px;
        line-height: inherit;
        height: inherit;
        padding: 0 15px;
        top: 2px;

        span{
          line-height: inherit;
          height: inherit;
        }
        &:focus{
          .box-shadow(none);
          outline: none;
        }
      }

      .field-delete{
        right: 65px;
        background: @teal-600;
        padding: 0;
        width: 25px;
        text-align: center;
        height: 25px;
        line-height: 25px;
        top: 9px;
        border-width: 0;
        .roundedcorners(30px);
        color: @white;
      }
      .field-move{
        cursor: move;
        right: 102px;
        background: transparent;
        border-right: 1px solid @teal-600;
      }
      .field-duplicate{
        cursor: pointer;
        right: 152px;
        background: transparent;
      }
      &.opened{
        border-bottom: 1px solid @teal-600;
        .field-settings{
          background: @teal-600;
        }
      }
    }
    .pages-selector-wrapper{
      padding: 15px;
      background: lighten(@brown-50, 3%);
      .tabs{
        border-color: darken(@brown-50, 10%);
        background: darken(@brown-50, 5%);
        li{
          &.active{
            background: lighten(@brown-50, 3%);
            border-color: darken(@brown-50, 10%);
          }
        }
      }
    }
    .tabs{
      width: 20%;
      float: left;
      margin: 3px 0 0;
      min-height: 100px;
      background: @slate-50;
      padding: 15px 0 5px 5px;
      border: 1px solid darken(@slate-50, 5%);
      li{
        display: block;
        cursor: pointer;
        padding: 5px;
        font-weight: 600;
        text-transform: uppercase;
        background: transparent;
        position: relative;
        left: 1px;
        border-width: 1px 0 2px 1px;
        border-style: solid;
        border-color: transparent; 
        margin-bottom: 0;
        &.active{
          border-color: darken(@slate-50, 5%); 
          background: @white;
        }
        p{
          margin: 0;
          .step{
            line-height: 20px;
            width: 20px;
            background: darken(@slate-50, 5%);
            color: @slate-500;
            display: block;
            float: left;
            text-align: center;
            margin: 0 7px 0 0;
          }
        }
      }
      &.page-selector{
        width: 40%;
        margin-top: 0;
        
      }
    }
    .tab-content{
      width: 80%;
      padding: 15px;
      float: left;
      .options-for-tabs{
        clear: both;
        padding: 15px;
        border: 1px solid darken(@grey-50, 5%);
        margin-bottom: 15px;
        background: @grey-50;
        .button{
          margin-right: 15px;
        }          
      }
      .selection-panel{
        border-color: darken(@brown-50, 10%);
        background: @white;
        > header{
          background: @brown-400;
        }
      }
      &.page-selector{
        width: 60%;
        padding-top: 0;
        .selection-panel{
          width: 100%;            
          max-width: 420px;            
          .checkbox-options{
            label{
              &:first-child{
                padding-left: 0;
                font-weight: 700;
              }
            }
            input{
              &.title{
                display: none;
              }
            }
          }
        }
      }
    }
    .field-settings-panel{   
      
    }
    &.closed{
      form{
        display: none;
      }
    }    
  }
}