/**
/* This file contains generic mixins which we use throughout
/* the admin panels.
/*
/* Mixins should be stored here rather than individual files
/* so that we can keep.
/ */

/** ----------------------------------------------------
/* Hides the overflowing text from a container
/*
/* Note: you must define a width on the element with this
/* overflow.
/* ----------------------------------------------------- */
@mixin hide-text-overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

/**
 * Mixin used to generate slightly smaller text and forms Used in side panels
 * and action tabs
*/
@mixin tightSpacing {
  h3,h4,h5 {
    font-weight: bold;
    line-height: $spacer;
  }
  h3 {
    font-size: $font-size-root;
  }

  h4 {
    font-size: $font-size-root -1;
    margin: 5px 0;
  }

  .ui-widget-content {
    background: none;
  }

  .field {
    /**
     * Fields are more compressed in some areas compared to the
     * main content editing window so the below alters the internal
     * spacing of the fields so we can move that spacing to between
     * the form fields rather than padding
     */
    border-bottom: 0;
    box-shadow: none;

    label {
      float: none;
      width: auto;
      font-size: 12px;
      padding: 0 map_get($spacers, 2) 4px 0;

      &.extra-details{
        overflow:hidden;
        margin-top:10px;
        display: block;
        color: lighten($body-color, 35%);
        font-style:italic;
        font-weight:normal;
        font-size:1em;
        float:left;
        text-shadow: none;

        &.fill{
          &:before{
            color:#fff;
            content: '?';
            font-size:12px;
            box-sizing: border-box;
            padding-left:3px;
            padding-right:3px;
            display:block;
            float:left;
            text-shadow: none;
            border-radius: 50px;
            background-color:lighten($body-color, 45%);
            width:21px;
            height:15px;
            margin-right:5px;
            margin-bottom:5px;
          }
        }
      }
    }

    .middleColumn {
      margin: 0;
    }

    input.text,
    select,
    textarea {
      padding: 5px;
      font-size: 11px;
    }

    &.checkbox {
      padding: 0 8px;

      input {
        margin: 2px 0;
      }
    }
  }

  .form__fieldgroup {
    .form__fieldgroup-item {
      padding: 0;

      .field {
        margin: 0;
        padding: 0;
      }
    }
  }

  /* Restyle for smaller area */
  .cms-content-fields{
    overflow:visible;
  }

  .chosen-container-single{
    width:100% !important;

    .chosen-single{
      padding: 0 0 0 5px;
      float:none;
    }
  }

  .cms-content-actions, .cms-preview-controls{
    padding:0;
    height:auto;
    border: 0;
    box-shadow: none;
  }

  .cms-edit-form{
    width:100%;
  }

  .CompositeField{
    margin:0;
    padding:0;
    float:none;
  }

  .parent-mode{
    padding-top:0;
  }

  .treedropdown, .SelectionGroup li.selected div.field{
    margin:10px 0 0;
    //@include box-shadow(inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.1));

    .treedropdownfield-title{
      position:absolute;
      z-index:2;
      padding:5px;
    }

    .treedropdownfield-panel{
      margin-top:11px;
    }

    .treedropdownfield-toggle-panel-link{
      background:none;
      border-left: 0;
      padding:5px 3px;
      .ui-icon{
        float:right;
        opacity:0.7;
      }
    }
  }

  .cms-add-form ul.SelectionGroup{
    padding-left:0;
    padding-right:0;
    overflow:visible;
    border-bottom: 0;
  }
}