@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-form.x-floating {
      padding: 6px;
      @if $include-border-radius { @include border-radius($panel-border-radius); }
      @include 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-inner,
      > .x-body {
        z-index: 1;
        background-color: #fff;
        @if $include-border-radius { @include border_radius($panel-border-radius); }
      }
    }

    .x-panel.x-floating > .x-dock,
    .x-msgbox > .x-dock,
    .x-form.x-floating > .x-dock {
      z-index: 1;
    }

    .x-panel.x-floating > .x-dock.x-sized,
    .x-msgbox > .x-dock.x-sized,
    .x-form.x-floating > .x-dock.x-sized {
      margin: 6px;
    }

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

    .x-anchor {
      position: absolute;
      overflow: hidden;
      //z-index: 1;

      &.x-anchor-top {
        margin-top: -$anchor-height + 0.02em;
        margin-left: -$anchor-width / 2;
        width: $anchor-width;
        height: $anchor-height;
        -webkit-mask: 0 0 theme_image($theme-name, "tip_top.png") no-repeat;
        -webkit-mask-size: $anchor-width $anchor-height;
        background-color: darken($base-color, 40%);
      }

      &.x-anchor-bottom {
        margin-left: -$anchor-width / 2;
        width: $anchor-width;
        height: $anchor-height;
        -webkit-mask: 0 0 theme_image($theme-name, "tip_bottom.png") no-repeat;
        -webkit-mask-size: $anchor-width $anchor-height;
        background-color: darken($base-color, 40%);
      }

      &.x-anchor-left {
        margin-left: -$anchor-width / 2 + 0.15em;
        margin-top: -$anchor-height / 2;
        height: $anchor-width;
        width: $anchor-height;
        -webkit-mask: 0 0 theme_image($theme-name, "tip_left.png") no-repeat;
        -webkit-mask-size: $anchor-height $anchor-width;
        background-color: darken($base-color, 40%);
      }

      &.x-anchor-right {
        margin-top: -$anchor-height / 2;
        height: $anchor-width;
        width: $anchor-height;
        -webkit-mask: 0 0 theme_image($theme-name, "tip_right.png") no-repeat;
        -webkit-mask-size: $anchor-height $anchor-width;
        background-color: darken($base-color, 40%);
      }

    }
    .x-floating.x-panel-light {
      &:after {
        background-color: $base-color;
      }
    }
  }
}