@mixin common-settings-panel {
  .x-panel.x-panel-settings {
    @include background-gradient($base-color, color_stops(lighten($base-color, 13%), $base-color));
    @include box-shadow(lighten($base-color, 100%) 0 1px 0 inset, rgba(0, 0, 0, .3) 0 .2em .6em);
    border: 1px solid darken($base-color, 32%);

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

      background-color: darken($base-color, 32%);
      margin-top: -$anchor-height + 0.02em + 0.06em;
      @include box-shadow(lighten($base-color, 100%) 0 -1px 0 0 inset);

      &:after {
        content: '';
        position: absolute;
        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;
        @include background-gradient($base-color, color_stops(lighten($base-color, 15%), lighten($base-color, 13%)));
        top: 1px !important;
      }
    }

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

      height: $anchor-height + .1em;
      background-color: darken($base-color, 32%);
      margin-top: -0.15em;
      @include box-shadow(lighten($base-color, 100%) 0 -1px 0 0 inset);

      &:after {
        content: '';
        position: absolute;
        width: $anchor-width;
        height: $anchor-height + .1em;
        //-webkit-mask: 0 0 theme_image($theme-name, "tip_bottom.png") no-repeat;
        -webkit-mask-size: $anchor-width $anchor-height;
        @include background-gradient($base-color, color_stops($base-color, darken($base-color, 5%)));
        top: -1px !important;
      }
    }

    .x-panel-inner {
      background: transparent;
    }

    .x-navigation-bar {
      border-bottom: none;
      margin-top: -6px;
      background: transparent;
      overflow: hidden;

      .x-title {
        color: darken($base-color, 60%);
        text-shadow: lighten($base-color, 50%) 0 .08em 0;
      }
    }


    .x-navigationview.plain {
      .x-navigationview-inner {
        background: transparent;
        @include border-radius(0);
        &:after {
          content: none;
        }
      }
    }

    .x-navigationview-inner {
      background-color: lighten($base-color, 14%);
      @include border-radius($panel-border-radius);
      &:after {
        @include insertion(100%, 100%);
        pointer-events: none;
        @include border-radius($panel-border-radius);
        @include single-box-shadow(darken($base-color, 1%), 0, 1px, 2px, 2px, inset);
        border: 1px solid darken($base-color, 32%);
      }
    }
  }

  .x-label.info .x-innerhtml {
    color: darken($base-color, 30%);
    text-shadow: 0 1px 0 lighten($base-color, 50%);
    text-align: center;
  }

  .btn-input-image input[type="file"] {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
  }

  // custom mask
  .x-mask.transparent {
    background: transparent;
  }

  .round {
    @include border-radius($form-fieldset-radius);
  }

  // Hide group header
  .x-list-header-wrap {
    @include border-top-radius($form-fieldset-radius !important);

    .x-innerhtml {
      @include border-top-radius($form-fieldset-radius !important);
    }
  }

  .x-list-header {
    display: none;
  }
}