/**
   *  Infowindow panel styles.
   *
   *  - Fields block (sorting, draggable, etc).
   *  - Titles block (change name of a field title).
   *  - Infowindow HTML editor block.
   *
   */

@import "compass/css3/box-sizing";
@import "compass/css3/images";
@import "compass/css3/inline-block";
@import "../../../old_common/common-sprite";
@import "../../../table/table-sprite";
@import "../../../old_common/vars";
@import "../../../old_common/mixins";
@import "../../../old_common/form-elements";

.infowindow_panel {

  // TYPES MENU
  ul.types {
    position: relative;
    z-index: 2;
    padding: 10px 0 0 8px;
    border-top-left-radius: 3px;
    background: image-url('layout/linen.png') repeat 0 0;

    &::after {
      content: '';
      position: absolute;
      z-index: 1;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: rgba(black, 0.1);
    }

    li {
      display: inline-block;
      vertical-align: top;

      a {
        display: inline-block;
        width: 99px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        background: white;
        line-height: 41px;
        text-align: center;
        vertical-align: top;

        &.selected {
          position: relative;
          color: #666;
          text-decoration: none;
          cursor: default;

          &::before {
            content: '';
            position: absolute;
            z-index: 2;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: white;
          }
        }
      }
    }
  }

  .panel_content {
    top: 120px !important;
    div.wrapper { top: 31px; }
  }

  .doc_info { right: 26px !important; }

  .header {
    position: relative;
    padding: 21px 30px 19px;
    clear: both;
    overflow: hidden;

    h3 {
      padding: 0;
      float: left;
      border: 0;
    }

    .controls {
      span.label {
        margin: 2px 7px 0 0;
        float: left;
        color: #CCC;
        line-height: 18px;
      }
      &.margin { margin-right: 20px; }
    }
  }

  // No content block
  .no_content { display: none; }

  &.editing_html {
    .header h3 {
      margin-left: 23px;
    }

    .menu {
      li:first-child { margin-left: 23px; }

      &::after {
        content: ' ';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 34px;
        width: 1px;
        height: 100%;
        background: rgba($cGray4, 0.5);
      }

      &::before {
        content: ' ';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 36px;
        width: 1px;
        height: 100%;
        background: rgba(#509DD7, 0.25);
      }
    }
  }

  .help-tip { top: 143px; }

  // Tab menus => on click submenu, on hover submenu, etc...
  .menu {
    position: absolute;

    z-index: 9;
    top: 112px;

    box-sizing: border-box;
    width: 100%;
    padding: 9px 23px 3px 30px;
    border-top: 1px solid rgba(#DDD, 0.5);
    border-bottom: 1px solid rgba(#DDD, 0.5);
    background: #F6F6F6;

    .tip {
      @include size(10px, 6px);
      @include position(false, false, -1px, 33px);
      @include background(sprite($table-sprites, infowindow_panel_white_tip) no-repeat);
      z-index: 10;
    }

    ul {
      clear: both;
      overflow: hidden;

      li {

        display: inline-block;
        min-width: 20px;
        margin: 0 15px 0 0;
        text-align: center;
        vertical-align: top;

        a { margin: auto; }

        a { display: block; }

        &.editor { float: left; }

        &.title_editor,
        &.html_editor { float: right; }

        &.html_editor {
          position: relative;
          margin-right: 2px;
        }

        &.editor a {
          @include size(17px, 17px);
          @include table-sprite(infowindow_panel_icons, $offset-x:0, $offset-y:0);
        }

        &.title_editor a {
          @include size(20px, 17px);
          @include table-sprite(infowindow_panel_icons, $offset-x:-40, $offset-y:0);
        }

        &.html_editor a {
          @include size(17px, 17px);
          @include table-sprite(infowindow_panel_icons, $offset-x:-104, $offset-y:1px);
        }

        &.editor a.selected {
          @include size(17px, 17px);
          @include table-sprite(infowindow_panel_icons, $offset-x:0, $offset-y:-25px);
        }

        &.title_editor a.selected {
          @include size(20px, 17px);
          @include table-sprite(infowindow_panel_icons, $offset-x:-40, $offset-y:-25px);
        }

        &.html_editor a.selected {
          @include size(17px, 17px);
          @include table-sprite(infowindow_panel_icons, $offset-x:-104, $offset-y:-24px);
        }
      }
    }
  }

  .all {
    padding: 15px 0;
    overflow: auto;
    span.label { margin-right: 12px; }
  }

  .titlePane .fields li {
    position: relative;
    & > span:hover { cursor: default; }
  }

  // When custom html template is applied, blocked block should show up
  // and overflow should be hidden
  .titlePane.disabled .wrapper,
  .fieldPane.disabled .wrapper {
    overflow: hidden;
  }

  .blocked {
    display: none;
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px 40px;
    border-top-left-radius: 4px;
    background: rgba(white, 0.9);
    line-height: normal;
    text-align: center;

    span.block-icon {
      display: inline-block;
      position: relative;
      width: 111px;
      height: 110px;
      vertical-align: top;

      @include table-sprite(block_icon);
    }

    p {
      margin: 30px 0 3px;
      color: #999;
      line-height: normal;
    }

    a {
      display: inline-block;
      margin: 20px 0 0;
      vertical-align: top;
    }
  }

  .fields {
    li {
      padding: 13px 0;
      overflow: hidden;
      border-bottom: 1px solid rgba(#999, 0.25);
      color: $cGray4;
      font-size: 15px;

      & > span {
        display: inline-block;
        max-width: 50%;
        line-height: 16px;
        vertical-align: top;
        vertical-align: middle;
        &:hover { cursor: all-scroll; }
      }

      .form_combo {
        width: auto;
        float: right;

        .select2-container { width: 143px; }
      }

      .form_combo ~ span {
        margin-top: 3px;
      }

      .edit_in_place.input {
        @include position(7px, 0, false, false);
        @include default-input();
        z-index: 2;

        input {
          padding: 6px;
          font-size: 13px;
        }
      }

      .switches {
        float: right;
        a.switch { margin-left: 8px; }
      }

      span.title {
        margin-right: 20px;
      }

      &.drag_field {
        padding: 15px 0 15px 10px;

        @include table-sprite(drag_points, $offset-y: 23px);
      }

      &.ui-sortable-helper {
        margin-left: -15px !important;
        padding: 15px 15px 15px 20px;
        border: 1px solid #999;
        border-radius: 3px;
        background-color: white;
        box-shadow: rgba(#000, 0.1) 0 0 5px 2px;
        cursor: all-scroll;

        @include table-sprite(drag_points, $offset-y:23px, $offset-x:10px);

        & > span { color: #999; }
      }

      &.enabled {
        .switch {
          color: #000;
        }
      }
    }
  }
}