@import 'compass';
@import "compass/reset";

// split this to enterprise/connect files
$_color2: #4a90e2; // Enterprise - blue (old - #1077B9);

@import 'provider/colors';

$buyer-toolbar-height: 30px;
$buyer-toolbar-margin: 5px;
$buyer-toolbar-highlight-color: $_color2;

$theme-widget-width: 90%;

html, body {
  height: 100%;
}

iframe#developer-portal {
  width: 100%;

  &.not-full {
    width: 80%;
  }

  &.animate {
    @include transition-property('width');
    @include transition-duration(0.3s);
  }
}

#cms-toolbar {
  position: relative;
  line-height: 1.5;
  font-family: 'Lucida Grande',verdana,sans-serif;
  font-size: 14px;
  font-weight: normal;
  background-color: $font-color;
  color: #ddd;
  padding-top: 0;
  top: 0;
  left: 0;
  width: 0;
  float: right;
  height: 100%;
  z-index: 2147483647;

  #help, #cms-toolbar-menu-middle {
    opacity: 0;
  }

  i:before {
    @include scale(-1, 1);
    @include text-shadow(rgba(black, 0.5) -1px 1px 2px);
  }

  &.animate {
    @include transition-property('width');
    @include transition-duration(0.3s);

    #help, #cms-toolbar-menu-middle {
      @include transition-property('opacity');
      @include transition-duration(0.1s);
    }
  }

  &.not-hidden {
    width: 20%;

    #help, #cms-toolbar-menu-middle {
      opacity: 1;
      display: block;
    }

    i:before {
      @include text-shadow(none);
      @include scale(1, 1);
    }
  }

  input.mode-toggle, input.mode-toggle {
    display: none;
  }

  ul {
    color: #BBB;
    padding: 0 0 0 0;

    & > li > a {
      @include inline-block;
      color: inherit;
      text-decoration: none;
      margin-left: -20px;
      margin-right: -20px;
      line-height: 20px;
      padding: 2px 20px 0px 20px;

      text-decoration: none;
      border-bottom: 4px solid transparent;
      width: 100%;
    }

    &.horizontal {
      @include horizontal-list;
      line-height: $buyer-toolbar-height;

      li > a {
        @include inline-block;
        &:hover { color: white; }
      }
    }

    &#cms-toolbar-menu-right {
      @include horizontal-list;
      float: right;
      position: relative;
      padding-right: 15px;
      top: - $buyer-toolbar-height;
      right: $buyer-toolbar-margin;
      i { font-size: 24px; }
    }

    &#cms-toolbar-menu-middle {
      @include horizontal-list;
      margin-left: 20px;
      padding-top: 12px;
      width: 200px;

      li {
        cursor: pointer;
        padding-left: 0;

        &.active {
          font-weight: bold;
          color: white;

          .slash {
            font-weight: normal;
            color: #BBB;
          }
        }
      }
    }
  }
}


#cms-toolbar-mode {
  overflow: hidden;
}

#templates-list {
  padding: 0;
  margin-top: 0;


  li {
    list-style: none;

    &.active a, a:hover {
      background-color: $buyer-toolbar-highlight-color;
      color: white;
    }
  }


}


#help {
  //color: white;
  //background-color: $user-widget-bg-color;
  padding: 20px;

  display: none;


  h2 {
    margin-top: 1em;
    font-variant: small-caps;
    text-transform: lowercase;
    color: white;
  }

  p {
    font-weight: normal;

  }

  code {
    color: white;
    font-weight: bold;
  }

  select + select {
    margin-top: 1em;
  }

  dt {
    padding-right: 0.5em;
    float: left;
    width: 80px;
    clear: left;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: white;
  }

  dd {
    font-type: italic;
  }
}


#theme-picker-wrap {
  h2 {
    margin-top: 1em;
    margin-bottom: 0.2em;
  }

  p {
    margin-bottom: 1em;
    margin-bottom: 1em;
  }


  select {
    width: $theme-widget-width;
  }

  textarea {
    width: $theme-widget-width;
    min-height: 18em;
  }

  button {
    font-size: 115%;
    padding: 0.3em;
    width: $theme-widget-width;
  }
}
