@import '../global';

$panel-border-radius: .3em;

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

  @if $include-floating {
    .x-panel.x-floating,
    .x-msgbox.x-floating,
    .x-form.x-floating {
      margin: 6px;
      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-body,
      .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;
    $anchor-offset: 0.1em;

    .x-anchor {
      width: $anchor-width;
      height: $anchor-height;
      position: absolute;
      left: 0;
      top: 0;
      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%);
      -webkit-transform-origin: 0% 0%;

      &.x-anchor-top {
        margin-left: -($anchor-width / 2);
        margin-top: -$anchor-height;
      }

      &.x-anchor-bottom {
        -webkit-transform: rotate(180deg);
        margin-left: $anchor-width / 2;
        margin-top: $anchor-height - $anchor-offset;
      }

      &.x-anchor-left {
          -webkit-transform: rotate(270deg);
          margin-left: -$anchor-height;
          margin-top: -$anchor-offset;
      }

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