@mixin wrap-styles {
  /* stylelint-disable */
  background-color: $gray-600 !important;
  border-color: $gray-600 !important;
  color: $white !important;
  /* stylelint-enable */
}

@mixin active-wrap-styles {
  background: $pivotgrid-sort-select-background-color;
  border-color: $pivotgrid-sort-select-border-color;
  color: $pivotgrid-sort-select-color;
  outline: none;
}

@include export-module('pivotview-layout') {
  .e-pivotview {
    &.sf-pivotview {
      height: 100%;

      &.e-pivot-gbar {
        min-width: 400px;
      }
  
      &:not(.e-pivot-gbar) {
        min-width: 310px;
      }
    }

    &.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
      @if ($skin-name =='Material3') {
        padding: 0;
      }
    }

    .e-pivot-view-port {
      height: inherit;
      display: flex;
      flex-direction: column;

      .e-pivot-table-view.e-table-chart-view {
        order: 2;
      }

      .e-pivot-table-view:not(.e-table-chart-view) {
        order: 1;
      }

      .e-pivot-chart-view {
        height: inherit;

        &.e-chart-table-view {
          order: 2;
        }

        &:not(.e-chart-table-view) {
          order: 1;
        }

        .e-pivotchart.e-pivot-accumulation-chart {
          overflow: visible;
        }

        .e-pivotchart.e-pivot-normal-chart {
          overflow: auto;
          overflow-x: hidden;
        }
      }
    }

    /* stylelint-disable */
    .e-value-field-settings,
    .e-member-editor-dialog,
    .e-group-field-settings,
    .e-pivot-format-dialog {
      max-height: 450px !important;
      border-radius: $pivotgrid-default-border-radius;
      max-width: 400px !important;
    }

    /* stylelint-enable */
    .e-value-field-settings {
      .e-field-name-text-container {
        display: flex;
      }

      .e-field-name-title {
        flex: none;
        font-size: 13px;
        font-weight: 500;
      }

      .e-field-name-content {
        flex: auto;
        font-size: 13px;
        font-weight: 500;
        width: 100%;
      }

      .e-caption-input-container,
      .e-type-option-container,
      .e-base-field-option-container,
      .e-base-item-option-container {
        padding-top: $pivotgrid-editor-search-padding-size;
      }

      .e-base-field-option-text,
      .e-base-item-option-text,
      .e-type-option-text {
        font-size: 13px;
        font-weight: 500;
        width: 100%;

        @if ($skin-name =='tailwind') or ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
          padding-bottom: 4px;
        }
      }

      .e-caption-input-text {
        font-size: 13px;
      }
    }

    .e-group-field-settings {
      /* stylelint-disable */
      width: auto !important;
      /* stylelint-enable */

      .e-caption-option-text,
      .e-input-option-text,
      .e-group-inerval-option-text,
      .e-checkbox-wrapper {
        padding-bottom: $pivotgrid-grouping-padding-bottom;
      }

      .e-group-start-option-container .e-checkbox-wrapper {
        padding-top: $pivotgrid-grouping-padding-top;
      }

      .e-caption-option-text,
      .e-input-option-text,
      .e-group-inerval-option-text,
      .e-checkbox-wrapper .e-label {
        font-size: 13px;
        font-weight: 500;
        width: 100%;
      }

      .e-group-input-container,
      .e-group-end-option-container,
      .e-group-interval-option-container {
        padding-top: $pivotgrid-editor-search-padding-size;
      }

      .e-group-field-div-content {
        margin-bottom: 10px;
      }
    }

    .e-member-editor-dialog {
      min-width: 320px;

      .e-editor-search-container {
        display: flex;
        padding: $pivotgrid-member-editor-search-padding;

        .e-clear-icon-hide {
          visibility: hidden;
        }
      }

      @if ($pivotgrid-skin =='bootstrap4') or ($skin-name =='bootstrap5') or ($skin-name =='tailwind') {
        &:not(.e-excel-filter) {
          .e-editor-search-container {
            padding: 5px $pivotgrid-editor-search-padding-size 10px;
          }
        }
      }

      .e-filter-sort {
        box-shadow: none;
        margin-left: $pivotgrid-sort-wrapper-padding-size;

        .e-member-sort {
          @if ($pivotgrid-skin =='bootstrap4') {
            background-color: $content-bg;
            border-color: $gray-400;
            color: $gray-700;
          }

          @if ($skin-name =='Material3') {
            border: 1px solid $pivotgrid-border;
            border-radius: $pivotgrid-member-sort-border-radius;
            min-width: 40px;
          }

          &:hover {
            @if ($pivotgrid-skin =='bootstrap4') {
              @include wrap-styles;
            }
          }

          &.e-active {
            @if ($pivotgrid-skin =='bootstrap4') {
              @include active-wrap-styles;
            }
          }

          .e-sort-ascend-icon,
          .e-sort-descend-icon {
            font-size: 16px;
          }

          &:focus {
            @if ($pivotgrid-skin =='bootstrap4') {
              @include wrap-styles;
            }

            &.e-active {
              @if ($skin-name =='bootstrap4') {
                @include active-wrap-styles;
              }
            }
          }
        }
      }

      .e-member-prompt {
        padding: 15px $pivotgrid-editor-search-padding-size;
        text-align: center;
        width: 100%;
      }

      .e-select-all-container {
        ul li .e-text-content > .e-icon-expandable {
          display: none;
        }

        
        @if ($skin-name =='fluent2' or $skin-name =='tailwind3') {
          .e-select-all {
            border: none;
          }
        }
      }

      .e-member-editor-container-outer-div {
        display: inline-block;
        height: $pivotgrid-member-filter-list-height;
        max-width: 400px;
        overflow: auto;
        width: 100%;
      }

      .e-member-editor-container {
        display: inline-table;
        width: 100%;

        @if ($skin-name =='fluent2' or $skin-name =='tailwind3') {
          border: none;
        }

        &.e-olap-field-list-tree {
          overflow-x: auto;
        }
      }

      ul li .e-text-content .e-checkbox-wrapper {
        @if ($skin-name =='Material3') {
          /* stylelint-disable */
          margin: 0 !important;
          /* stylelint-enable */
        }

        .e-ripple-container {
          @if ($skin-name =='Material3') {
            background: transparent;
          }
        }
      }

      .e-select-all-container ul,
      .e-member-editor-container ul {
        margin-left: $pivotgrid-member-filter-list-padding-size;
        overflow: hidden;

        li {
          .e-list-text {
            font-family: $field-list-font-family;
          }

          .e-list-icon {
            margin: 0;
          }
        }
      }

      .e-excelfilter {
        padding-top: 20px;

        @if ($skin-name =='tailwind') {
          padding-top: 12px;
        }

        @if ($skin-name =='tailwind3') {
          padding-top: 16px;
        }

        .e-member-editor-container-outer-div {
          height: $pivotgrid-excel-member-filter-height;
        }
      }

      &.e-node-limit .e-excelfilter .e-member-editor-container-outer-div {
        height: $pivotgrid-excel-member-filter-node-limit-height;
      }

      .e-label-filter,
      .e-value-filter {
        height: $pivotgrid-excel-filter-height;
        overflow: auto;
        padding: 20px;
        padding-bottom: 0;

        .e-filter-text-div {
          /* stylelint-disable */
          color: $pivotview-grid-header-font-color !important;
          /* stylelint-enable */
          font-size: 13px;
          font-weight: 500;
        }

        .e-filter-option-container-1,
        .e-filter-option-container-2,
        .e-separator-div {
          padding-top: 20px;
        }

        .e-between-text-div {
          padding: 8px 0;
        }

        .e-disable {
          display: none;
        }

        @if ($skin-name =='tailwind') {
          padding-top: 0;
        }
      }

      .e-filter-tab-container {
        border: none;

        .e-tab-header {
          .e-toolbar-item .e-icon-left + .e-tab-text {
            margin: 0 0 0 6px;
          }

          .e-text-wrap {
            .e-tab-icon {
              height: fit-content;

              &::before {
                font-size: 14px;
                /* stylelint-disable */
                top: 0 !important;
                /* stylelint-enable */
              }
            }
          }
        }

        &.e-rtl {
          .e-tab-header {
            .e-toolbar-item .e-icon-left + .e-tab-text {
              margin: 0 6px 0 0;
            }
          }
        }
      }

      /* stylelint-disable */
      .e-disable {
        display: none !important;
      }

      .e-clear-filter-button {
        float: left;
        margin: 0 !important;

        @if ($skin-name =='FluentUI') {
          margin-left: 0 !important;
          margin-right: 0 !important;
        }

        &.e-disable {
          display: none;
        }
      }

      .e-editor-label-container {
        align-items: center;
        background: $pivotgrid-editor-label-fill;
        display: flex !important;
        /* stylelint-enable */
        height: 40px;
        justify-content: center;
        opacity: $pivotgrid-editor-label-excel-opacity;

        @if ($skin-name =='Material3') {
          border-top: $pivotpager-separator-border;
        }

        &.e-label-container-visible {
          display: block;
        }

        &.e-label-container-hide {
          display: none;
        }

        .e-editor-label {
          color: $pivotgrid-editor-label-color;
          font: $pivotgrid-editor-label-font;
          margin-bottom: 0;
          opacity: $pivotgrid-editor-label-opacity;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      &.e-rtl {
        .e-member-editor-outer-container {
          .e-editor-search-container {
            .e-filter-sort {
              margin-left: 0;
              margin-right: $pivotgrid-sort-wrapper-padding-size;
            }
          }

          ul {
            margin-left: 0;
            margin-right: $pivotgrid-member-filter-list-padding-size;
          }
        }

        .e-footer-content {
          .e-clear-filter-button {
            float: right;
            margin: 0;
          }
        }
      }

      &.e-olap-editor-dialog {
        .e-member-editor-outer-container {

          .e-select-all-container ul,
          .e-member-editor-container ul {
            margin-left: 0;
          }

          .e-treeview ul:first-child {
            padding-left: 10px;
            padding-right: 10px;
          }

          .e-editor-search-container {
            .e-level-drop {
              margin: 0 5px;

              .e-caret {
                font-size: $pivotgrid-button-icon-size;
              }

              li .e-disabled {
                opacity: .5;
                pointer-events: none;
              }
            }
          }
        }

        &.e-rtl {
          .e-member-editor-outer-container {
            ul {
              margin-right: 0;
            }
          }
        }
      }

      /* stylelint-disable */
      .e-member-editor-outer-container:not(.e-excelfilter) {
        .e-editor-search-container {
          @if ($skin-name !='tailwind3') {
            padding-top: 4px !important;
          }       
        }

        @if ($skin-name =='fluent2' or $skin-name =='tailwind3') {
          .e-select-all-container {
            .e-select-all {
              border: none;
            }   
          }
        }
      }
    }

    .e-value-field-settings,
    .e-member-editor-dialog,
    .e-pivot-format-dialog,
    .e-group-field-settings {

      .e-dlg-header-content {
        border: 0;
        border-radius: $pivotgrid-default-border-radius;
        font-weight: normal;
      }

      .e-footer-content {
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        @if ($skin-name !='FluentUI') and ($skin-name !='tailwind3') {
          padding-top: $pivotgrid-editor-dialog-footer-padding;
          padding-bottom: $pivotgrid-editor-dialog-footer-padding;
        }
      }

      @if ($skin-name =='Material3') {
        white-space: nowrap;
      }

      .e-dlg-content {
        overflow: hidden;

        @if ($skin-name =='Material3') {
          border-radius: 0;
        }

        .e-empty-field::-webkit-input-placeholder,
        .e-empty-field:-moz-placeholder,
        .e-empty-field::-moz-placeholder,
        .e-empty-field:-ms-input-placeholder {
          color: $error-font-color !important;
          font-weight: 600 !important;
        }
      }
    }

    .e-member-editor-dialog,
    .e-pivot-format-dialog {
      .e-dlg-content {
        @if ($skin-name !='FluentUI') {
          padding: 0;
        }

        @if ($skin-name =='FluentUI') {
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
      }
    }

    /* stylelint-enable */
    .e-value-field-settings,
    .e-member-editor-dialog {
      .e-footer-content {
        border-top: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;

        @if ($skin-name =='FluentUI') {
          border-top: 0;
        }
      }
    }

    .e-value-field-settings,
    .e-pivot-format-dialog {
      min-width: 300px;

      .e-dlg-content {
        overflow: auto;

        @if ($skin-name =='tailwind') {
          padding-top: 12px;
        }
      }
    }

    .e-pivotchart-type-dialog {
      /* stylelint-disable */
      max-width: 350px !important;
      max-height: 420px !important;
      /* stylelint-enable */

      .e-chart-type-option-container,
      .e-chart-type-option-text {
        padding-bottom: 20px;

        .e-chart-type-option-text {
          padding-bottom: 5px;
        }
      }

      .e-multiple-axes-mode-container {
        padding-top: 20px;

        .e-multiple-axes-mode-text {
          padding-bottom: 5px;
        }
      }

      .e-dialog-multiple-axis,
      .e-dialog-show-legend {
        width: 49%;
      }
    }

    .e-pivot-format-dialog {
      /* stylelint-disable */
      max-height: 570px !important;
      max-width: 350px !important;
      /* stylelint-enable */

      .e-pivot-format-dialog-outer {
        padding: 0 $pivotgrid-editor-search-padding-size;

        .e-pivot-format-value-lable,
        .e-pivot-format-lable,
        .e-pivot-format-custom-lable,
        .e-pivot-format-grouping-lable,
        .e-pivot-format-decimal-lable {
          font-weight: 500;

          @if ($skin-name =='tailwind') or ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
            padding-bottom: 4px;
          }
        }

        .e-pivot-format-value-drop,
        .e-pivot-format-drop,
        .e-pivot-format-custom-text,
        .e-pivot-format-grouping-drop,
        .e-pivot-format-decimal-drop {
          margin-bottom: 20px;

          @if ($skin-name =='tailwind') {
            margin-bottom: 12px;
          }
        }
      }
    }

    .e-pivot-toolbar {
      /* stylelint-disable */
      box-sizing: border-box !important;
      /* stylelint-enable */
      background: $pivotgrid-grp-bg-color;
      border-bottom: 0;
      border-style: solid;

      @if ($skin-name =='tailwind3') {
        border-radius: 0;
      }

      @if ($skin-name =='FluentUI') {
        box-shadow: none;
      }

      @if ($skin-name =='fluent2') {
        border-top: 1px solid $pivotgrid-border-color;
        border-left: 1px solid $pivotgrid-border-color;
        border-right: 1px solid $pivotgrid-border-color;
      }

      @if ($skin-name =='bootstrap5') or ($skin-name =='bootstrap5.3') or ($skin-name =='tailwind') or ($skin-name =='tailwind3') or ($skin-name =='FluentUI') or ($skin-name =='Material3') {
        border-top: 1px solid $pivotgrid-border;
        border-left: 1px solid $pivotgrid-border;
        border-right: 1px solid $pivotgrid-border;
      }

      .e-toolbar-items {
        background: $pivotgrid-grp-bg-color;
      }

      .e-toolbar-item {
        .e-tbar-btn.e-btn {
          .e-icons.e-btn-icon {
            @if ($skin-name !='bootstrap5') and ($skin-name !='tailwind') and ($skin-name !='FluentUI') and ($skin-name !='Material3') {
              font-size: 16px;
            }
          }
        }
        &.e-disabled {
          pointer-events: none;
        }
      }

      .e-pivot-toolbar-menu {
        background-color: $pivotgrid-table-background-color;
        border: none;

        @if ($skin-name =='fluent2' or $skin-name =='tailwind3') {
          margin-bottom: 4px;
        }

        ul .e-menu-item {
          @if ($skin-name !='tailwind') {
            /* stylelint-disable */
            height: $pivotgrid-menubar-height !important;
            /* stylelint-enable */
          }
          overflow: hidden;
          padding-left: 10px;

          .e-menu-icon {
            margin-left: 0;
            margin-right: 0;

            @if ($skin-name !='bootstrap5') and ($skin-name !='tailwind') and ($skin-name !='fluent2'){
              font-size: 16px;
            }

            @if ($pivotgrid-skin =='bootstrap4') {
              color: $gray-700;
            }

            @if ($pivotgrid-skin =='FluentUI') {
              color: $pivotgrid-active-color;
            }

            @if ($skin-name =='bootstrap5') {
              line-height: $pivotgrid-menubar-height;
            }

            @if ($skin-name =='FluentUI') {
              line-height: 28px;
            }

            @if ($skin-name =='tailwind') {
              line-height: 40px;
            }
          }

          .e-caret {
            @if ($pivotgrid-skin =='bootstrap4') {
              color: $gray-700;
            }

            @if ($pivotgrid-skin =='FluentUI') {
              color: $pivotgrid-active-color;
            }

            @if ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
              line-height: $pivotgrid-menubar-height;
            }

            @if ($skin-name =='tailwind') {
              line-height: 40px;
            }
          }
        }

        ul .e-menu-item.e-focused {
          @if ($pivotgrid-skin =='bootstrap4') {
            background-color: $gray-600;
            border-radius: $pivotgrid-default-border-radius;
          }

          @if ($skin-name =='bootstrap5.3') {
            background-color: $pivotgrid-button-border-color;
          }

          .e-menu-icon,
          .e-icons {
            @if ($pivotgrid-skin =='bootstrap4') {
              color: $white;
            }

            @if ($pivotgrid-skin =='FluentUI') {
              color: $pivotgrid-active-color;
            }
          }
        }

        /* stylelint-disable */
        ul.e-menu {
          @if ($pivotgrid-skin =='fabric') or ($pivotgrid-skin =='fabric-dark') or ($pivotgrid-skin =='highcontrast') or ($pivotgrid-skin =='highcontrast-light') {
            padding-left: 0 !important;
            padding-right: 0 !important;
          }
        }

        &.e-menu-wrapper ul.e-menu {
          background-color: $pivotgrid-table-background-color;
        }
      }

      .e-tab .e-tab-header .e-toolbar-item.e-active {
        margin-left: 18px !important;
      }

      .e-toolbar-item.e-template,
      .e-toolbar-item:not(.e-separator):not(.e-spacer)
      {
        padding: 0 !important;
        /* stylelint-enable */
      }

      .e-reportlist-label {
        float: left;
        font-weight: 500;
      }

      .e-reportlist-drop {
        float: right;
        margin: 0 8px;

        @if ($skin-name =='Material3') {
          background: $pivotgrid-grp-bg-color;
        }
      }

      &.e-rtl {
        .e-reportlist-label {
          float: right;
        }

        .e-reportlist-drop {
          float: left;
        }

        .e-pivot-toolbar-menu {
          ul .e-menu-item {
            padding-left: 30px;
            padding-right: 10px;
          }
        }
      }
    }

    .e-frozenscrollbar {
      background: $pivotgrid-grp-bg-color;
    }

    /* stylelint-disable */
    & .e-headercontent {
      & .e-columnheader {
        & .e-headercell.e-leftfreeze {
          -webkit-transform: translate3d(0, 0, 0);
        }
      }
    }

    /* stylelint-enable */
  }

  .e-pivotview-disable-icon {
    visibility: hidden;
  }

  .e-pivotview-report-inner {
    padding-top: 10px;
  }

  .e-pivotview-report-dialog {
    /* stylelint-disable */
    max-width: 350px !important;
  }

  .e-mdx-query-content {
    background-color: $pivotgrid-table-background-color;
    color: $pivotgrid-default-font-color;
    font-size: 14px;
    font-weight: 500;
    height: 200px;
    margin-top: 5px;
    padding: 5px 10px;
    resize: none;
    width: 100%;
  }

  .e-pivotview-mdx-dialog {
    max-width: 500px !important;
  }

  /* stylelint-enable */
  .e-report-outer {
    display: inline-block;
    width: 100%;

    @if ($skin-name =='FluentUI') {
      padding-top: 1px;
    }
  }

  .e-pivotview-report-label {
    float: left;
    margin-top: $pivotgrid-report-label-margin-top;
    width: 40%;

    @if ($skin-name =='bootstrap5') {
      padding-left: 12px;
    }
  }

  /* stylelint-disable */
  .e-pivotview-report-input {
    float: right;
    width: 60% !important;
  }

  #{if(&, "&", "*")}.e-rtl {
    .e-pivotview-report-input {
      float: left;
    }

    .e-pivotview-report-label {
      float: right;
    }
  }


  .e-pivotview-pdf-export,
  .e-pivotview-excel-export,
  .e-pivotview-csv-export,
  .e-pivotview-png-export,
  .e-pivotview-jpeg-export,
  .e-pivotview-svg-export {
    font-size: 18px !important;
  }

  /* stylelint-enable */
  .e-contextmenu-container.e-menu-popup.e-menu-container.e-pivot-chart-menu ul {

    .e-dialog-multiple-axis .e-label,
    .e-dialog-multiple-axis .e-label {
      white-space: nowrap;
    }
  }

  .e-drillthrough-dialog {
    .e-drillthrough-body-header-container {
      margin-bottom: 20px;

      @if ($skin-name =='bootstrap5') {
        margin-bottom: 18px;
      }
    }

    .e-drillthrough-body-header {
      color: $pivotgrid-drillthrough-header-font-color;
      font-weight: $pivotgrid-drillthrough-header-font-weight;
    }

    .e-drillthrough-body-header-value {
      color: $pivotgrid-drillthrough-header-value-font-color;
      margin-right: 20px;
    }

    /* stylelint-disable */
    .e-drillthrough-body-header-common {
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      display: inline-block;
      flex-wrap: wrap;
    }

    /* stylelint-enable */
  }
}