/**
   *  Wizard panel styles.
   *
   *  - Default styles for any wizard.
   *
   */

@import "compass/css3/images";
@import "compass/css3/inline-block";
@import "../../../table/table-sprite";
@import "../../../old_common/vars";
@import "../../../old_common/mixins";

// LOCAL VARS
$corner_radius: 6px;

div.wizards_panel {
  display: block;
  width: 100%;
  overflow: hidden;

  h3 {
    padding-left: 30px;
  }

  div.wizard_wrap {
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    height: 149px;
    overflow: hidden;

    background: image-url('layout/linen.png');

    &.left_shadow::before {
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      bottom: 0;
      left: 0;
      width: 30px;
      pointer-events: none;

      @include background(linear-gradient(left, rgba(#333, 0.7), rgba(#333,0)));
    }

    &::after {
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      bottom: 0;
      width: 30px;
      pointer-events: none;

      @include background(linear-gradient(left, rgba(#333, 0), rgba(#333, 0.7)));
    }
  }

  div.wizard_arrows {
    a {
      display: block;
      position: absolute;
      z-index: 10;
      top: 55px;
      width: 43px;
      height: 43px;

      @include table-sprite(wizard-arrows);

      &.left {
        left: 8px;

        &:hover {
          @include table-sprite(wizard-arrows, $offset-y:-43px);
        }
      }

      &.right {
        @include table-sprite(wizard-arrows, $offset-x:-43px);
        right: 8px;

        &:hover {
          @include table-sprite(wizard-arrows, $offset-x:-43px, $offset-y:-43px);
        }
      }

      &.disabled {
        display: none;
        opacity: 0;

        &.left:hover {
          @include table-sprite(wizard-arrows);
        }

        &.right:hover {
          @include table-sprite(wizard-arrows, $offset-x:-43px);
        }
      }
    }
  }

  ul.vis_options {
    display: block;
    position: absolute;
    width: 1050px;
    padding: 0 30px;
    border-bottom: 1px solid #E5E5E5;
    box-shadow: rgba(#000, 0.05) 0 -4px 8px 0 inset;
    letter-spacing: -4px;

    @include position(0, 0, false, 0);

    li {

      display: inline-block;
      position: relative;
      margin: 0 12px 0 0;
      padding: 0;
      transition: opacity 200ms ease-in;
      letter-spacing: 0;
      vertical-align: top;
      word-space: 0; /* stylelint-disable-line */

      a {
        display: block;
        position: relative;
        margin: 30px 0;
        border-radius: 3px;
        opacity: 0.7;
        box-shadow: 0 0 3px 4px rgba(black, 0.15);

        @include size(92px, 90px);

        .name {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: 8px 0;
          border-top: 1px solid #CCC;
          border-radius: 0 0 3px 3px;
          background: #FFF;
          color: #397DBA;
          font-size: 11px;
          font-weight: bold;
          text-align: center;
          text-transform: uppercase;
        }

        // Wizard icons
        &.simple {
          background: image-url('layout/wizard-simple.png') no-repeat;

          &.polygon,
          &.polygon-polygon { background: image-url('layout/wizard-simple-polygon.png') no-repeat; }

          &.line,
          &.line-line { background: image-url('layout/wizard-simple-polyline.png') no-repeat; }
        }

        &.intensity {
          background: image-url('layout/wizard-intensity.png') no-repeat;
        }

        &.choropleth {
          background: image-url('layout/wizard-choropleth.png') no-repeat;

          &.line,
          &.line-line { background: image-url('layout/wizard-choropleth-polyline.png') no-repeat; }

          &.polygon,
          &.polygon-polygon { background: image-url('layout/wizard-choropleth-polygon.png') no-repeat; }
        }

        &.color {
          background: image-url('layout/wizard-color.png') no-repeat;

          &.polygon,
          &.polygon-polygon { background: image-url('layout/wizard-color-polygon.png') no-repeat; }

          &.line,
          &.line-line { background: image-url('layout/wizard-color-polyline.png') no-repeat; }
        }

        &.category {
          background: image-url('layout/wizard-category.png') no-repeat;

          &.polygon,
          &.polygon-polygon { background: image-url('layout/wizard-category-polygon.png') no-repeat; }

          &.line,
          &.line-line { background: image-url('layout/wizard-category-polyline.png') no-repeat; }
        }

        &.bubble { background: image-url('layout/wizard-bubble.png') no-repeat; }
        &.cluster { background: image-url('layout/wizard-cluster.png') no-repeat; }
        &.density { background: image-url('layout/wizard-density-hex.png') no-repeat; }
        &.torque { background: image-url('layout/wizard-torque.png') no-repeat; }
        &.torque_cat { background: image-url('layout/wizard-torque-cat.png') no-repeat; }
        &.torque_heat { background: image-url('layout/wizard-torque-heat.png') no-repeat; }

        &:hover {
          border-color: $cGray2;

          opacity: 1;
        }

        &.selected {
          border-color: $cGray2;

          opacity: 1;

          .name {
            color: #333;
          }

          &::before,
          &::after {
            @include size(0);
            content: '';
            position: absolute;
            z-index: 5;
            bottom: 0;
            left: 50%;
            margin-left: -13px;
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
          }

          &::before {
            z-index: 10;
            bottom: -30px;
            border-bottom: 10px solid white;
          }

          &::after {
            bottom: -30px;
            border-bottom: 10px solid $cGray4;
          }
        }

        &.disabled {
          display: none;

          &:hover {
            border: 1px solid $cGray4;
          }
        }
      }
    }
  }

  div.forms {
    ul {
      width: 100%;
      margin: 15px 0 0;

      li {
        display: block;
        width: 100%;
        padding: 13px 0;
        overflow: hidden;
        border-bottom: 1px solid rgba(#E5E5E5, 0.5);

        & > span:first-child {
          margin-top: 2px;
          float: left;
          color: #AAA;
        }

        & > span:last-child {
          float: right;
        }

        .form_combo {
          display: inline-block;
          vertical-align: top;
        }

        &.label_text { border: none; }
        &.label_text.border { border-bottom: 1px solid rgba(#E5E5E5, 0.5); }
        &:last-child { border: none; }

        span.field > div {
          margin-left: 5px;

          &.form_hidden {
            display: none;
            margin: 0;
          }

          // Removed left space for first combo
          &:first-child { margin-left: 0 !important; }
        }

        // Text between fields like " - to - "
        span.field span.text {
          display: inline-block;
          width: 43px;
          margin-left: 5px;
          line-height: 21px;
          text-align: center;
          vertical-align: top;
        }
      }
    }

    &.panel_content {
      top: 212px;
    }

    // Color wizard styles
    ul.custom_colors,
    ul.custom_categories {
      margin: 0;
      border-top: 1px solid rgba(#E5E5E5, 0.5);

      li.custom_color_item {
        span {
          max-width: 260px;

          @include text-overflow();
        }
      }
    }

    div.colors_loader {
      display: none;
      padding: 15px 0 0 50px;
      border-top: 1px solid rgba(#E5E5E5, 0.5);
      background: image-url("layout/loader.gif") no-repeat 0 15px;
      span { color: $cGray4; }
    }

    div.colors_error {
      display: none;
      padding: 15px;

      border-radius: $corner_radius;
      background: rgba(#FECBCB, 0.4);
      color: #666;
    }
  }
}

/* Temporary hack for a Chrome v45 bug */

/* https://github.com/CartoDB/cartodb/issues/5368 */
.select2-result-label td.color {
  width: 10%;
}