@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);
    border:1px solid darken(@grey-50, 10%);
    position: relative;
    border-top-width: 0;

    &:first-child {
      border-top-width: 1px;
    }

    &.closed{
      form{
        display: none;
      }
    }
    &.opened{
      border-color: @primary-500;
      background: @grey_2;
    } 

    > form {
      > div {
        .flex();
      }
    } 

    .field-baker-header{
      background: @white;
      line-height: 55px;
      padding-left: 0;
      height: 55px;

      h3{
        margin: 0;
        color: @grey-900;
        line-height: inherit;
        padding: 0 15px 0 54px;
        font-size: 18px;
      }

      h4 {
        color: @grey-300;
        position: absolute;
        left: 366px;
        top: 0;
        margin: 0;
        font-size: 15px;
      }

      .field-settings, 
      .field-delete,
      .field-move, 
      .field-duplicate{
        .opacity(0);
        color: @grey_2;
        position: absolute;
        right: 2px;
        line-height: inherit;
        height: inherit;
        padding: 0 15px;
        top: 0;

        span{
          line-height: inherit;
          height: inherit;
        }

        &:focus{
          .box-shadow(none);
          outline: none;
        }

      }

      .field-settings {
        color: @grey-300;
        .opacity(1);
        right: auto;
        left: 0;
      }

      &:hover, 
      &.opened {
        .field-settings, 
        .field-delete, 
        .field-move, 
        .field-duplicate{
          color: @grey-500;
           .opacity(1);
        }
        .field-delete{
          color: @danger-600;
          background: @white;
        }
      }

      .field-delete{
        right: 2px;
        background: transparent;
        padding: 0;
        width: 40px;
        text-align: center;
        height: 25px;
        line-height: 25px;
        top: 15px;
        border-width: 0;
        .roundedcorners(30px);
        color: darken(@danger-50, 10%);
      }

      .field-move{
        cursor: move;
        right: 45px;
        font-size: 16px;
        background: transparent;
      }
      .field-duplicate{
        cursor: pointer;
        right: 96px;
        background: transparent;
      }

      &.opened {
        background: @primary-500;
        border-bottom: 1px solid @primary-500;

        h3 {
          color: @white;
        }

        h4 {
          color: fade(@white, 70);
        }

        .field-settings, 
        .field-delete, 
        .field-move, 
        .field-duplicate{
          border-color: fade(@white, 20);
          color: @white;
          background: transparent;
        }

      }
    }
    .pages-selector-wrapper{
      padding: 0;
      background: @white;
      .tabs{
        border-color: darken(@grey-50, 8%);
        background: darken(@grey-50, 2%);
        li{
          &.active{
            background: lighten(@grey-50, 3%);
            border-color: darken(@grey-50, 8%);
          }
        }
      }
    }
    .tabs{
      background: @grey_1;
      border-right: 1px solid @grey_3;
      width: 20%;
      float: left;
      margin: 0;
      min-height: 100px;
      padding: 20px 0 10px 10px;

      li{
        display: block;
        cursor: pointer;
        padding: 10px;
        font-weight: 600;
        text-transform: none;
        background: transparent;
        position: relative;
        left: 1px;
        margin-bottom: 0;
        border: 1px solid transparent;

        &.active {
          background: @white;
          border: 1px solid @grey_3;
          border-right: none;
        }

        p {
          margin: 0;
          font-size: 15px;

          .step{
            line-height: 20px;
            width: 20px;
            background: @grey-300;
            color: @white;
            display: block;
            float: left;
            text-align: center;
            margin: 0 7px 0 0;
          }
        }
      }
      &.page-selector{
        width: 40%;
        margin: 0;
        
      }
    }
    .tab-content{
      background: @white;
      width: 80%;
      padding: 30px;
      float: left;

      .options-for-tabs{
        clear: both;
        .button{
          margin-right: 15px;
        }          
      }
      &.page-selector{
        border: 3px solid @grey_1;
        margin-left: -3px;
        width: 60%;
        padding-top: 0;

        .selection-panel{
          width: 100%;            
          max-width: 420px; 

          .checkbox-options{
            clear: both;
            label{
              &:first-child{
                padding-left: 0;
                font-weight: 700;
              }
            }
            input{
              &.title{
                display: none;
              }
            }
          }
        }
      }
    }
    .field-settings-panel{   
      
    }
      
  }
}