@import 'ext-base';

.x-container {
  -webkit-transform: translate3d(0,0,0);  
}

.x-panel {
  position: relative;
  -webkit-transform: translate3d(0,0,0);
}

.x-panel-body {
  position: relative;
}

.x-panel.x-floating {
  padding: 6px;
  -webkit-border-radius: 8px;
  -webkit-box-shadow: rgba(0,0,0,.8) 0 2px 10px;
  @include bg_gradient(darken($base_color, 40%), 'glossy');
  
  &.x-panel-light {
    @include bg_gradient($base_color, 'glossy');    
  }
}

.x-panel.x-floating > .x-panel-body {
  background-color: #fff;
  -webkit-border-radius: 4px;
}

$anchor_size: .7em;
$anchor_width: $anchor_size*2.33;
$anchor_height: $anchor_size;

.x-anchor {
  width: $anchor_size;
  height: $anchor_size;
  position: absolute;
  z-index: 1;

  &:before, &:after {
    @include insertion($anchor_width, $anchor_height, 0, 0);
    -webkit-mask: 0 0 inline_image("tip_horizontal.png") no-repeat;
    -webkit-mask-size: $anchor_width $anchor_height;
    overflow: hidden;
    @include bg_gradient($base_color);
  }
  &.x-anchor-left {
    left: $anchor_size * 2;
  }
  &.x-anchor-right {
    right: $anchor_size * 3;
  }
  &.x-anchor-top {
    top: - $anchor_size;
  }
  &.x-anchor-bottom {
    -webkit-transform: rotate(180deg);
    bottom: -$anchor_size;

    &:before, &:after {
      @include bg_gradient(darken($base_color, 30%));
    }
    &.x-anchor-left {
      left: $anchor_size * 3;
    }
    &.x-anchor-right {
      right: $anchor_size * 2;
    }
  }
}