@import '../global';

$panel-border-radius: .3em;

@mixin sencha-panel($include-floating: $include-floating-panels) {
  .x-panel,
  .x-panel-body {
    position: relative;
  }

  @if $include-floating {
    .x-panel.x-floating {
      padding: 6px;
      @if $include-border-radius { @include border-radius($panel-border-radius); }
      -webkit-box-shadow: rgba(0,0,0,.8) 0 .2em .6em;
      @include background-gradient(darken($base-color, 40%), 'flat');

      &.x-floating-light {
        @include background-gradient($base-color, 'flat');
      }

      .x-panel,
      .x-scroll-view {
        background-color: #fff;
        @if $include-border-radius { @include border_radius($panel-border-radius); }
      }
    }

    $anchor-height: .7em;
    $anchor-width: $anchor-height*2.33;

    .x-anchor {
      width: $anchor-width;
      height: $anchor-height;
      position: absolute;
      z-index: 1;
      -webkit-mask: 0 0 theme_image($theme-name, "tip_horizontal.png") no-repeat;
      -webkit-mask-size: $anchor-width $anchor-height;
      overflow: hidden;
      background-color: darken($base-color, 40%);

      &.x-anchor-bottom {
        -webkit-transform: rotate(180deg);
        background-color: darken($base-color, 40%);
      }

      &.x-anchor-left {
          -webkit-transform: rotate(270deg);
      }

      &.x-anchor-right {
          -webkit-transform: rotate(90deg);
      }
    }
    .x-floating.x-panel-light {
      &:after {
        background-color: $base-color;
      }
    }
  }
}