@import "compass/css3";

#skinr-lite-chooser-toggle {
  display: none;
  height: 48px;
  width: 48px;
  position: fixed;
  right: -14px;
  top: 120px;
  background: white url('eye.png');
  z-index: 100;
  opacity: 0.4;
  overflow: hidden;
  text-indent: -999px;
  cursor: pointer;
  border: 1px solid lightgrey;
  border-right: none;
  @include border-left-radius(5px);
  &:hover {
    opacity: 0.8;
    right: 0px;
  }
}

body.skinr-lite-show-chooser {
  margin-right: 200px;
  #skinr-lite-chooser {
    display:block;
    position:fixed;
    top:0;
    right:0;
  }
  #skinr-lite-chooser-toggle {
    right: 200px;
    opacity: 0.8;
  }
}

#skinr-lite-chooser {
  @include box-sizing(border-box);
  padding: 0 12px 12px;
  display: none;
  width: 220px;
  height:100%;
  overflow: scroll;
  z-index: 1000;
  background: #333;
  color: #fff;
  font-family: "Arial Narrow", 'Arial', sans-serif;
  font-size: 14px;
  
  #placeholder {
    position: relative;
  }
  
  fieldset {
    border: none;
    padding: 0;
    margin: 0;
    legend {
      display: none;
    }
  } 
  
  a, a:link, a:hover, a:active, a:visited {
    color: #0e71fe;
    display: inline-block;
    line-height: 1.2em;
    text-decoration: underline;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 14px;
    background: transparent;
  }
  
  textarea, 
  input[type="file"], 
  input[type="date"], 
  input[type="datetime"], 
  input[type="datetime-local"], 
  input[type="email"], 
  input[type="month"], 
  input[type="number"], 
  input[type="password"], 
  input[type="search"], 
  input[type="tel"], 
  input[type="text"], 
  input[type="time"], 
  input[type="url"], 
  input[type="week"] {
    padding: 0;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.2em;
    height: 1.4em;
    background-color: white;
    color: #333;
  }
  
  select {
    font-family: Arial, sans-serif;
    padding: .2em;
    width: 90%;
    font-size:14px;
    height: 2em;
    background-color: white;
    color: #333;
    &#edit-scheme {
      margin-bottom: 1em;
    }
  }
  
  input[type="submit"],
  input.form-submit {
    background: lightgray;
    border-width: 1px;
    border-style: solid;
    border-color: #eee #aaa #999 #ddd;
    color: black;
    line-height: 1.2em;
    padding: 2px 9px;
    margin: 2px 9px;
    height: auto;
    width: auto;
    float: none;
    @include border-radius(12px);
    font-family: "Arial Narrow", Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
  }

  #skinr-lite-memory { 
    .ajax-progress {
      position:absolute;
      .throbber {
        position:relative;
        top:9px;
        left:-28px;
      }
    }
    input.form-submit {
      background: none repeat scroll 0 0 #333;
      color: gray;
      font-weight: normal;
      height: 32px;
      margin: 3px;
      width: 32px;
      &.in-use {
        color:lightgoldenrodyellow;
        font-weight:bold;
        border-color:lightgoldenrodyellow;
        border-width:2px;
      }
      &.active {
        @include box-shadow(rgba(lightgoldenrodyellow, .5) 0 0 10px);
        background-color: rgba(lightgoldenrodyellow, .5);
      }
    }
  }
  
  .form-item {
    margin: 0;
    padding: 0;
    .form-radios.options label,
    .form-checkboxes.options label,
    label {
      border-top: none;
      font-family: "Arial Narrow", Arial, sans-serif;
      font-weight: normal;
      margin-top: 0;
      color: white;
    }
    &.form-type-radios label,
    &.form-type-checkboxes label,
    &.form-type-select label {
      border-top: 1px solid white;
      font-family: Arial, sans-serif;
      font-weight: bold;
      color: white;
      margin-top: .6em;
      float: none;
      line-height: 1.6em;
    }
    &.form-item-scheme {
      height: 4em;
    }

  }
  
  #palette .form-type-textfield {
    margin: 5px 0 0;
    width: 200px;
    label {
      margin: 0;
      padding: 0;
      width: 105px;
      float: left;
      line-height: 1.2em;
    }
    &.item-selected {
      background: transparent;
    }
    .ajax-progress {
      position:absolute;
      right:0;
    }
  } 

}

