/*!
 * This file is part of the WPSF package.
 * This package is Open Source Software. For the full copyright and license
 * information, please view the LICENSE file which was distributed with this
 * source code.
 *
 * @package    WPSF
 * @author     Varun Sridharan <varunsridharan23@gmail.com>
 */

.wpsf-css-builder-container {
  .wpsf-css-builder-extra-options {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5%;
    width: 50%;

    .wpsf-element {
      padding: 10px 0;
      display: inline-block;
      margin-right: 5%;
      border: none !important;
      width: 45%;
      .wpsf-title {
        width: 100%;
        margin-bottom: 10px;
      }

      .wpsf-fieldset {
        margin-left: 0 !important;
      }

    }

    .wpsf-css-builder-border-radius {
      margin-top: 10px;
      .wpsf-css-border-radius-caption {
        margin-bottom: 10px;
      }
      .wpsf-element {
        width: 20%;
        margin-right: 2%;
        text-align: left;
      }
    }
  }

  .wpsf-css-builder-margin {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-color: #f2f2f2;
    padding: 10px;
    width: 440px;
    height: 286px;
    border: 1px dashed #a6a6a6;
    box-sizing: border-box;
  }

  .wpsf-css-builder-border {
    position: relative;
    top: 5px;
    margin: 0 auto;
    padding: 10px 3px;
    width: 326px;
    height: 218px;
    box-sizing: border-box;
  }

  .wpsf-css-builder-padding {
    position: relative;
    top: 9px;
    margin: 0 auto;
    padding: 10px 3px;
    width: 209px;
    height: 142px;
    border: 1px dashed #9c9c9c;
    box-sizing: border-box;
  }

  .wpsf-css-builder-layout-center {
    position: relative;
    top: 8px;
    margin: 0 auto;
    width: 96px;
    height: 66px;
    border: none;
    left: 0;
  }

  .wpsf-css-checkall {
    font-size: 16px;
    width: 18px;
    height: 18px;
    margin-left: 5px;
    cursor: pointer;
    color: #eee;
    background: #ccc;
    border-radius: 50%
  }

  .wpsf-css-checkall.checked {
    color: #00a0d2;
  }

  .wpsf-css-info {
    position: absolute;
    right: 4px;
    top: 4px;
    color: #ccc;
    &:hover {
      cursor: pointer;
      color: #00a0d2;
    }
  }

  .wpsf-element {
    &.wpsf-margin, &.wpsf-border, &.wpsf-padding {
      position: absolute;
      text-align: center;
      line-height: 20px;
      box-sizing: border-box;
    }

    &.wpsf-margin-top, &.wpsf-border-top, &.wpsf-padding-top {
      left: 50%;
      margin-left: -20px;
      top: 2px;
    }

    &.wpsf-margin-bottom, &.wpsf-border-bottom, &.wpsf-padding-bottom {
      left: 50%;
      margin-left: -20px;
      bottom: 2px;
    }

    &.wpsf-margin-left, &.wpsf-border-left, &.wpsf-padding-left {
      top: 50%;
      margin-top: -15px;
      left: 4px;
    }

    &.wpsf-margin-right, &.wpsf-border-right, &.wpsf-padding-right {
      top: 50%;
      margin-top: -15px;
      right: 4px;
    }

    &.wpsf-border-top, &.wpsf-padding-top {
      top: 6px;
    }
    &.wpsf-border-bottom, &.wpsf-padding-top {
      bottom: 5px;
    }

  }

}