/*
 * Right panel in the table view
 * - SQL, facets, ...
 */

@import "../../old_common/mixins";
@import "../../old_common/form-elements";
@import "../../old_common/vars";
@import "../../old_common/common-sprite";
@import "../../table/table-sprite";

$corner_radius: 6px;

.table_panel {
  position: fixed;
  z-index: 20;
  top: 64px;
  right: -537px;
  bottom: 0;
  width: 600px;
  padding-top: 25px;
  border: 1px solid rgba(black, 0.4);
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: $corner_radius;
  background: white;
  background: #EDEDED;
  box-shadow: rgba(black, 0.15) 0 0 2px 2px;
  letter-spacing: -4px;

  .layer_panel {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin-top: -25px;
    transform-style: linear;
    transition-property: padding, margin;
    transition-duration: 250ms;
    border-top: 1px solid #999;
    border-top-left-radius: $corner_radius;
    background: #EDEDED;
    box-shadow: rgba(black, 0.1) 0 -10px 20px 0;

    &:hover {
      padding-bottom: 15px;
    }

    &:first-child {
      margin-top: 0;
    }

    &:last-child:hover {
      margin-top: -38px;
    }
  }

  ////////////////////////////////
  // ANIMATIONS FOR LAYER_PANEL //
  ////////////////////////////////

  // Sorting
  .layer_panel.ui-sortable-placeholder {
    visibility: visible !important;

    &::after {
      content: '';
      position: absolute;
      z-index: 0;
      top: 10px;
      right: 10px;
      bottom: 0;
      left: 10px;
      border: 2px dashed #AAA;
      border-top-left-radius: 3px;
    }

    &::before {
      content: 'Drop your layer here';
      position: absolute;
      z-index: 1;
      top: 25px;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      color: #CDCDCD;
      font: bold 17px $text-fonts;
      letter-spacing: 0;
      line-height: 20px;
      text-align: center;
    }
  }

  // Active layer
  .layer_panel.active {
    margin-bottom: 20px;
    padding-bottom: 0;

    .layer-info .info {
      .order {
        background: #666;
      }

      .name_info {
        color: #999;
      }

      .name {
        color: #666;
      }
    }

    &:hover {
      margin-top: -25px;
      margin-bottom: 20px;
      padding-bottom: 0;
    }
  }

  // Active layer in visualization
  .layer_panel.active.vis {
    .layer-info {
      .info .name:hover {
        color: #454545;
      }
    }
  }

  // Opened layer in visualization
  &.opened .layer_panel.active.vis {
    .layer-info {
      line-height: 46px;
    }
  }

  &.opened .layer_panel.vis {
    .layer-info {
      line-height: 46px;
    }
  }

  // Only hover state for visualizations, not for table view,
  // due to it is not possible drag layers in table view.
  &.ui-sortable .layer_panel.active .layer-info .info:hover {
    cursor: move;

    .order {
      @include table-sprite(layer_move_icon);
      background-color: none;
      text-indent: -9999px;
    }
  }
}