@import "compass";
@import "vendor/mixins";

.cs-framework{
  margin-left: 20px;
  margin-right: 0;

  .cs-header{
    h1{
      float: right;
    }

    fieldset{
      float: left;
    }
  }

  .cs-nav{
    float: right;

    ul{
      clear: right;

      li{
        .cs-section-active:after{
          right: auto;
          left: 0;
          border-left-color: #fff;
          border-right-color: transparent;
        }

        .cs-arrow:after{
          content: "\f053";
          right: auto;
          left: 10px;
        }

        &.cs-tab-active .cs-arrow:after{
          @include transform( rotate(-90deg) );
        }
      }

      ul{
        li{
          a{
            padding-right: 25px;
            padding-left: 15px;
          }
        }

        &:before{
          left: auto;
          right: 15px;
        }
      }
    }

    .cs-icon{
      margin-left: 5px;
      margin-right: 0;
    }
  }

  .cs-nav-background{
    left: auto;
    right: 0;
  }

  .cs-content{
    margin-left: 0;
    margin-right: 225px;

    .cs-sections{
      float: right;
    }
  }

  .cs-show-all .cs-content {
    margin-right: 0;
    overflow: hidden;
  }

  .cs-expand-all {
    right: auto;
    left: 40px;
  }

  .cs-footer{
    text-align: left;
  }
}

.cs-metabox-framework{
  margin: -6px -12px -12px -12px;

  .cs-content{
    .cs-section-title{
      padding: 20px;
    }
  }
}

.cs-element{
  .cs-title{
    float: right;
  }

  .cs-fieldset{
    margin-left: 0;
    margin-right: 30%;
  }
}

.cs-pseudo-field{
  padding: 0 0 0 5px !important;
}

.cs-field-number em{
  margin-left: 0;
  margin-right: 5px;
}

.cs-field-typography select,
.cs-field-typography .chosen-container{
  margin-right: 0;
  margin-left: 5px;
}

.cs-field-checkbox .horizontal li,
.cs-field-radio .horizontal li{
  margin-right: 0;
  margin-left: 15px;
}

.cs-field-switcher{
  label{
    float: right;
  }

  .cs-text-desc{
    float: right;
    margin-left: 0;
    margin-right: 5px;
  }
}

.cs-field-color_picker{
  .cs-alpha-slider{
    margin-left: 0;
    margin-right: 2px;

    .ui-slider-handle{
      margin: 0 -11px;
    }
  }

  .cs-alpha-slider-offset{
    background-position: center right;
  }

  .cs-alpha-text{
    right: auto;
    left: 10px;
  }
}

.cs-field-group{
  .ui-accordion-icons{
    padding-left: 0;
    padding-right: 30px;
  }

  .ui-accordion-header-icon{
    left: auto;
    right: .5em;
  }

  .dashicons-arrow-right:before{
    content: "\f141";
  }
}

.cs-help{
  right: auto;
  left: 5px;
}

.cs-field-icon{
  .button{
    margin-right: 0;
    margin-left: 5px;
  }

  .cs-icon-preview i{
    margin-right: 0;
    margin-left: 5px;
  }
}

.cs-field-gallery{
  ul li{
    margin-right: 0;
    margin-left: 5px;
  }

  .button{
    margin-right: 0;
    margin-left: 5px;
  }
}

.cs-field-sorter .cs-modules{
  float: right;
  margin-right: 0;
  margin-left: 10px;
}

#cs-save-ajax{
  right: auto;
  left: 5px;
}

.cs-dialog{
  .cs-element{
    padding-right: 15px;
    padding-left: 30px;
  }

  .cs-shortcode-clone .cs-remove-clone{
    right: auto;
    left: 5px;
  }
}

#customize-controls .cs-element .cs-fieldset,
.widget-content .cs-element .cs-fieldset,
#side-sortables .cs-element .cs-fieldset{
  margin-right: 0;
}

@media only screen and (max-width:1200px){
  .cs-metabox-framework .cs-element .cs-fieldset{
    margin-left: 0;
  }
}

@media only screen and (max-width:782px){
  .cs-framework .cs-fieldset,
  .cs-framework .cs-content{
      margin-right: 0;
  }
}

.ui-dialog{
  right: auto;
}
