/* 

  Patched styles for select2, to change the appearance of the MasterPress-customized versions.

  This allows other plugins to use select2 alongside MasterPress, without stepping on the default appearance.
  
*/

// ---- Config ----->

@mp-select2ChoiceHeight:         28px; 

@mp-select2Color:                #444;
@mp-select2DefaultColor:         #777;

@mp-select2BorderColor:          #BBBBBB;
@mp-select2ActiveBorderColor:    #689DCD;
@mp-select2Radius:               4px;

// ---- Icon Mixin ---->

.select2-icon() {
  display: inline-block;
  width: 22px;
  height: 16px;
  position: absolute;
  left: 6px;
  top: 6px;
  line-height: 16px;
  background-repeat: no-repeat;
  background-size: 16px 16px; 
  vertical-align: text-top;
}


.select2-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}



// Select Button / List Element

.mp-select2-container {
  
  &.select2-container {
    
    .select2-default {
      color: @mp-select2DefaultColor !important;
    }
    
    .select2-choice {
      
      position: relative;
      
      &.with-icon {
        padding-left: 28px;
      }
      
      i {
        .select2-icon();
        
        &.font {
          vertical-align: baseline;
        }
      }
    
      
      .glossy-gray();
      .rounded(@mp-select2Radius);
      cursor: default;
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
    
    
      border: 1px solid @mp-select2BorderColor;
      height: @mp-select2ChoiceHeight;
      line-height: @mp-select2ChoiceHeight;
      padding: 0 0 0 8px;
      color: @mp-select2Color;
    
      span.select2-arrow {
        background: none;
        border-left: none;
        right: 3px;
      }
    
      span {

        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;

        span.text {
          margin-right: 0;

          &.with-icon {
            padding-left: 26px;
          }
        
          b {
            color: #555;
          }
        }
        
        span.mp-icon {
          padding-left: 22px;
          background-repeat: no-repeat;
          background-position: 0 5px;
          background-size: 18px 18px;
        }
      
      } // span

      abbr {
      
        position: absolute;
        right: 26px;
        top: 7px;
        width: 12px;
        height: 12px;
        font-size: 1px;
        background-size: 60px auto;
        cursor: pointer;
        text-decoration: none;
        border:0;
        outline: 0;
      
        &:hover {
          background-position: right -11px;
          cursor: pointer;
        }
      
      } // abbr
    
    } // .select2-choice
  
  } // .select2-container
  
  
  &.select2-dropdown-open {
    
    .select2-choice {
    
      border: 1px solid #aaa;
      border-bottom-color: transparent;
      -webkit-box-shadow: 0 1px 0 #fff inset;
      -moz-box-shadow   : 0 1px 0 #fff inset;
      -o-box-shadow     : 0 1px 0 #fff inset;
      box-shadow        : 0 1px 0 #fff inset;
      .glossy-gray();
      -webkit-border-bottom-left-radius : 0;
      -webkit-border-bottom-right-radius: 0;
      -moz-border-radius-bottomleft : 0;
      -moz-border-radius-bottomright: 0;
      border-bottom-left-radius : 0;
      border-bottom-right-radius: 0;
    
      div {

        background: transparent;
        border-left: none;
      
        b {
          background-position: -20px 2px;
        }

      }

    } // .select2-choice
  
    &.select2-drop-above {
      
      .select2-choice {
        .border-radius(0, 3px, 3px, 0);
      }
    }
    
  } // .select2-dropdown-open
  

  &.select2-container-multi .select2-choices {
    background-color: #fff;
    .inner-shadow(0, 1px, 2px, 0.1);
    .rounded(@mp-select2Radius);
    border: 1px solid @mp-select2BorderColor;
    margin: 0;
    padding: 0;
    cursor: text;
    overflow: hidden;
    height: auto !important;
    height: 1%;
    position: relative;
    padding: 1px 4px 3px 1px;
  }


  &.select2-container-multi.select2-dropdown-open .select2-choices {
    .top-radius(@mp-select2Radius);
  }


  &.select2-container-multi .select2-choices {
    min-height: @mp-select2ChoiceHeight;
  }

  &.select2-container-multi.select2-container-active .select2-choices {
    .inner-shadow(0, 1px, 2px, 0.1);
    border: 1px solid @mp-select2ActiveBorderColor;
    outline: none;
  }

  &.select2-container-multi .select2-choices li {
    float: left;
    list-style: none;
  }

  &.select2-container-multi .select2-choices .select2-search-field {
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }

  &.select2-container-multi .select2-choices .select2-search-field input {
    color: #666;
    background: transparent !important;
    font-family: sans-serif;
    font-size: 100%;
    padding: 5px 0 5px 5px;
    margin: 3px 0 0 0;
    outline: 0;
    border: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow   : none;
    -o-box-shadow     : none;
    box-shadow        : none;
  }

  &.select2-container-multi .select2-choices .select2-search-field input.select2-active {
    background: #fff url('../images/mpv-small-spinner.gif') no-repeat 100% !important;
  }

  &.select2-container-multi .select2-choices .select2-search-choice {
  
    .rounded(@mp-select2Radius);
    background: #F3F3F3;
    
    cursor: move;
    
    &:hover {
      background: #fafafa;
    }
    
    -moz-background-clip   : padding;
    -webkit-background-clip: padding-box;
    background-clip        : padding-box;
  
    border: 1px solid #b4b4b4;
    line-height: 12px;
    margin: 3px 0px 1px 3px;
    position: relative;
    padding: 1px 5px 1px 3px;
  
    -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    -moz-box-shadow   : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    box-shadow        : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
  
    font-size: 12px;
    border-color: #C1C1C1;
    color: #222;
  
    i {
      .select2-icon();
      top: 4px;
      width: 16px;
      background-size: 16px 16px;
    }
  
    b {
      color: #555;
    }
  
    span.text {
    
      display: inline-block;
      padding: 5px 24px 5px 6px;

      &.with-icon {
        padding-left: 28px;
      }
      
      &.mp-icon {
        padding-left: 28px; 
        background-repeat: no-repeat;
        background-position: 5px 3px;
        background-size: 16px 16px;
      }

    }

  }

  &.select2-container-multi .select2-choices .select2-search-choice span {

  }

  .select2-sortable .select2-choices .select2-search-choice {
    cursor: move;
  }

  &.select2-block .select2-choices .select2-search-choice {
    float: none;
  }

  &.select2-container-multi .select2-choices .select2-search-choice-focus {
    background: #d4d4d4;
  }

  .select2-search-choice-close {
    display: block;
    position: absolute;
    right: 5px;
    top: 5px;
    left: auto;
    width: 12px;
    height: 12px;
    font-size: 1px;
    background-size: 60px auto;
    .transition(0s);
    outline: none;
  }

  &.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
    background-position: right -11px;
  }
  
  &.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
    background-position: right -11px;
  }
  

  &.select2-container-active {

    .select2-choice, 
    .select2-choices {
      border: 1px solid @mp-select2ActiveBorderColor;
      outline: none;
    }

  } // .select2-container-active


  .select2-offscreen { 
    left: -8000px; 
  }

  
  // -- Disabled States ---->
  
  // -- Single
  
  &.select2-container.select2-container-disabled .select2-choice {
      background-color: #f4f4f4;
      color: #666;
      background-image: none;
      border: 1px solid #ddd;
      cursor: default;
    
      .text {
        b {
          color: #666;
        }
      }
  }

  &.select2-container.select2-container-disabled .select2-choice div {
      background-color: #f4f4f4;
      background-image: none;
      border-left: 0;
  }

  &.select2-container.select2-container-disabled .select2-choice div {
    opacity: 0.5;
  }

  &.select2-container.select2-container-disabled .select2-choice abbr {
    display: none !important;
  }

  // -- Multi

  &.select2-container-multi.select2-container-disabled .select2-choices{
      background-color: #FAFAFA;
      background-image: none;
      .inner-shadow(0,0,0,0);
      border: 1px solid #CCC;
      cursor: default;
  }

  &.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
      background-image: none;
      background-color: #EEE;
      border: 1px solid #ddd;
      padding: 3px 5px 3px 5px;
      color: #666;
    
      span.text {

        &.with-icon {
          padding-left: 30px;
        }

        b {
          color: #666;
        }
      
        padding-right: 10px;
      }
  }

  &.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
      display: none;
  }
  
} // .mp-select2-container




// ---- Dropdown Element ---->

.mp-select2-drop {
  
  &.select2-drop {
    
    
    z-index: 300005;
    background: #fff;
    border: 1px solid @mp-select2ActiveBorderColor;
    border-top: 0;
    .drop-shadow(0, 2px, 3px, 0.1);
  
    margin-top:-1px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
  
    
  
    .select2-search {
    
      .clearfix();
      white-space: nowrap;
      z-index: 1010;
      min-height: 26px;
      width: 100%;
      margin: 0;
      padding: 11px 5px 6px 6px;
      position: relative;
      white-space: nowrap;
      z-index: 1010;
      background: url(../images/select2-search.png) repeat-x #dedede 0 3px;
      border-bottom: 1px solid #DDD;

      input {
      
        background: #fff url('../images/select2.png') no-repeat 100% -22px;
        background: url('../images/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
        background: url('../images/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
        background: url('../images/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
        background: url('../images/select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
        background: url('../images/select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
        background: url('../images/select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
        background-size: 60px auto;
        .rounded(15px);
        padding: 4px 20px 4px 10px;
        border: 1px solid #CCC;
        outline: 0;
        font-family: sans-serif;
        font-size: 1em;
        width: 100%;
        margin: 2px 0 0 0;
        height: auto !important;
        min-height: 26px;
      
        .ie8 & {
          min-height: 16px;
          padding-left: 6px;
        }
      
      
        &.select2-active {
          background: #fff url('../images/mpv-small-spinner.gif') no-repeat 100%;
          background: url('../images/mpv-small-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
          background: url('../images/mpv-small-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
          background: url('../images/mpv-small-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
          background: url('../images/mpv-small-spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
          background: url('../images/mpv-small-spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
          background: url('../images/mpv-small-spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
        }

      } // input


      &.select2-search-hidden {
        display: block;
        position: absolute;
        left: -10000px;
      }
  
    } // .select2-search

  
    &.select2-drop-above {
      .border-radius(0, 0, 0, 0);
      border-top-color: @mp-select2ActiveBorderColor;
      
      .select2-search {
        padding-top: 4px;
        background-image: none;
      }
    }

    .select2-results {
    
      @subPadding: 8 + 22px;

      margin: 0px 0px 4px 0;
      max-height: 200px;
      padding: 0 0 0 0px;
      border-top: 1px solid #CCC;
      list-style: none;
    
      ul.select2-result-sub {
        margin: 0 0 0 0;
        padding: 0;
        list-style: none;
      }

      .select2-more-results {
        background: #f4f4f4;
        display: list-item;
      }

      .select2-more-results.select2-active {
        background: #f4f4f4 url('../images/mpv-small-spinner.gif') no-repeat 100%;
      }

      ul.select2-result-sub > li .select2-result-label { padding-left: 8 }
      ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 8 + @subPadding }
      ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 8 + @subPadding * 2 }
      ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 8 + @subPadding * 3 }
      ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 8 + @subPadding * 4 }
      ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 8 + @subPadding * 4 + @subPadding / 2 }
      ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 8 + @subPadding * 4 + @subPadding }
    
      @levelPadding: 12px;
    
      li.level-1  .select2-result-label { padding-left: 8 + @levelPadding; }
      li.level-2  .select2-result-label { padding-left: 8 + @levelPadding * 2; }
      li.level-3  .select2-result-label { padding-left: 8 + @levelPadding * 3; }
      li.level-4  .select2-result-label { padding-left: 8 + @levelPadding * 4; }
      li.level-5  .select2-result-label { padding-left: 8 + @levelPadding * 5; }
      li.level-6  .select2-result-label { padding-left: 8 + @levelPadding * 6; }
      li.level-7  .select2-result-label { padding-left: 8 + @levelPadding * 7; }
      li.level-8  .select2-result-label { padding-left: 8 + @levelPadding * 8; }
      li.level-9  .select2-result-label { padding-left: 8 + @levelPadding * 9; }
      li.level-10 .select2-result-label { padding-left: 8 + @levelPadding * 10; }
      
      li {
        list-style: none;
        margin: 0;
      }

      li.select2-result-with-children > .select2-result-label {
        /* group label */
        .glossy-gray();
        font-weight: bold;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
      }

      .select2-result-label {
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid #F6F6F6;
        cursor: default;
      
        span.subtle {
          color: #CCC;
          text-shadow: none;
        }
        
        div.result {
          .clearfix();
          display: block;  
          padding: 7px 10px 7px;
          position: relative;
          font-size: 12px;
          
          &.with-icon {
            padding-left: 34px;
          }
          
          &.mp-icon {
            background-repeat: no-repeat;
            background-position: 10px 6px;
            padding-left: 32px;
            background-size: 16px 16px;
          }
        
          i {
            .select2-icon();
            background-size: 16px 16px;
          }
        
          h5 {
            font-size: 12px;
            margin: 5px 0 4px 0;
          }

          h4 {
            font-size: 13px;
            margin: 12px 0 0px 0;
            font-weight: normal;
          }
        
          p {
            margin: 4px 0 4px 0;
            font-size: 11px;
          }
        
          p.no-excerpt {
            opacity: 0.5;
          }
        
          .info {
            padding-top: 3px;
          }
        
          img,
          span.no-image {
            display: block;
            margin: 4px 14px 6px 2px;
            float: left;
            border: 1px solid #ddd;
          }
        
          span.no-image {
            line-height: 1.2em;
            font-size: 11px;
            color: #999;
            text-transform: uppercase;
            padding: 16px 10px 0 10px;
            text-align: center;
            width: 40px;
            height: 44px;
            background: #eee;
          
            &.small {
              font-size: 9px;
              width: 40px;
              padding: 10px 0 0 0;
              height: 30px;
            }
          
          }
        
        }

      }

      > li:first-child > .select2-result-label {
        border-top: none;
      }

      .select2-highlighted {
        background-color: #3B659C;
        color: #fff;
      
        .result {
          //.text-shadow();
        
          h1,h2,h3,h4,h5,h6,p {
            color: #FFF;
            text-shadow: none;
          }
        
          i:before {
            color: #FFF;
          }
        }
    
      }
    
      li em {
        background: #feffde;
        font-style: normal;
      }

      .select2-highlighted em {
        background: transparent;
      }

      .select2-no-results {
        background: #f4f4f4;
        display: list-item;
        padding: 8px;
        color: @mp-select2DefaultColor;
      }

      .select2-disabled {
          display: none;
      }

      .select2-match b { 
        background: #fcff90;
        font-style: normal;
        color: #333;
        //text-shadow: 0 1px 0 #FFF;
        border: 1px solid #CCD03F;
        font-weight: normal;
        text-decoration: none;
      }

    } // .select2-results

  } // &.select2-drop

  &.mp-field-types {
    .select2-results .select2-result-label div.result i.mp-icon {
      left: 10px
    }
  }
  
  
} // .mp-select2-drop 

.mp-select2-container.mp-field-types.select2-container .select2-choice i.mp-icon {
  left: 8px;
}





// ----- Blue Color Scheme ----->

.admin-color-classic {

  .mp-select2-container.select2-container {

    .select2-choice {
      .glossy-blue();
      border-color: #AECFE6;
    }
    
  }
  
  .mp-select2-drop.select2-drop {
    
    border-color: #AECFE6;
    
    .select2-results {

      li.select2-result-with-children > .select2-result-label {
        .glossy-blue();
      }
      
    }
    
    .select2-search {
      background-color: #EFF9FF;
    }

  } // .mp-select2-drop
  
} // .admin-color-classic



