@use 'variables' as *;
@mixin wrap-style {
  float: right;
  height: $field-list-adaptive-btn-size;
  pointer-events: all;
  width: $field-list-adaptive-btn-size;
  z-index: 1000;

  .e-add-icon {
    font-size: $field-list-adaptive-btn-icon-size;
    line-height: $field-list-adaptive-icon-height;
  }
}

@include export-module('field-list-theme') {

  .e-drag-item {
    &.e-treeview {
      &.e-pivot-calc {
        &.e-display-inline {
          display: inline;
        }
      }
    }
  }

  .e-pivotfieldlist {

    .e-member-editor-dialog,
    .e-olap-editor-dialog {
      visibility: hidden;
    }

    .e-select-table {
      background: $field-list-toggle-bg-color;
      border: $field-list-border-1 $field-list-border-type $field-list-toggle-border-color;
      box-shadow: $field-list-toggle-shadow-color;
      color: $field-list-toggle-font-color;
      font-size: $field-list-toggle-icon-size;
      height: $field-list-toggle-size;
      max-height: $field-list-toggle-size;
      max-width: $field-list-toggle-size;
      min-height: $field-list-toggle-size;
      min-width: $field-list-toggle-size;
      padding: $field-list-toggle-padding-size;
      position: relative;
      width: $field-list-toggle-size;
      z-index: 1000;

      @if ($skin-name =='Material3') {
        border: none;
        border-radius: $field-list-radius-4;
        top: 1px;
      }

      @if ($theme-name =='Material3-dark') {
        /* stylelint-disable */
        background: $field-list-toggle-bg-color-dark !important;
      }

      &.e-toggle-field-list.e-field-list-icon-left {
        right: 0;
        position: absolute;
      }
  
      &.e-toggle-field-list.e-field-list-icon-right {
        left: 0;
        position: absolute;
      }

      &.e-fieldlist-left {
        @if ($skin-name =='Material3') {
          left: 2px !important;
          /* stylelint-enable */
        }
        box-shadow: $field-list-toggle-left-shadow-color;
      }

      &:focus,
      &:active,
      &:hover {
        background-color: $field-list-toggle-hover-color;
        
        @if ($skin-name =='fluent2'){
          color: $field-list-icon-hover-color;
        }
      }
    }
  }

  /* stylelint-disable */
  *.e-rtl {

    .e-select-table {
      padding: $field-list-spacing-8 $field-list-spacing-5;
    }
  }

  .e-pivotfieldlist-container {
    font-family: $field-list-font-family;
    font-size: $field-list-content-font-size;
    max-width: $field-list-width-700;
    min-width: $field-list-width-300;

    &.sf-pivotfieldlist-container {
      .e-field-list-container .e-field-table .e-field-list {
        display: block;
        overflow-y: auto;

        &.e-olap-field-list-tree.e-treeview {
          ul:first-child {
            padding-right: $field-list-spacing-0;
          }

          li {

            &.e-no-checkbox>.e-text-content>.e-checkbox-wrapper,
            .e-measure-icon {
              display: none;
            }

            &.e-rtl {
              ul:first-child {
                padding-left: $field-list-spacing-0;
                padding-right: $field-list-spacing-10;
              }
            }
          }
        }

        li {
          .e-drag {
            padding: revert !important;
            margin: revert !important;
            width: $field-list-width-auto !important;
            height: $field-list-height-auto !important;
          }

          .e-draggable {
            display: contents;
          }

          .e-text-content {
            display: flex;
            align-items: center;

            @if ($skin-name =='FluentUI') {
              padding-right: revert;
            }
          }

          .e-list-text {
            text-overflow: ellipsis;
            overflow-x: hidden;
            width: $field-list-width-100p;
            white-space: nowrap;
          }
        }
      }

      .e-field-list-container .e-field-table .e-field-list.e-treeview:not(.e-rtl) {
        .e-list-text {
          padding-right: revert;
        }
      }

      .e-field-list-container .e-field-table .e-field-list.e-treeview.e-rtl {
        .e-list-text {
          padding-left: revert;
        }
      }

      .e-adaptive-field-list-dialog .e-member-editor-container {
        li {

          &.e-no-checkbox>.e-text-content>.e-checkbox-wrapper,
          .e-measure-icon {
            display: none;
          }
        }
      }
    }

    .e-layout-footer {
      display: flex;
      padding: $field-list-spacing-10 $field-list-spacing-2 $field-list-spacing-2;

      .e-button-layout {
        flex: auto;
        text-align: end;

        .e-defer-apply-button {
          margin-right: $field-list-spacing-10;
        }

        .e-cancel-btn,
        .e-defer-apply-button {
          min-width: fit-content;
        }
      }

      .e-cancel-btn,
      .e-defer-apply-button,
      .e-checkbox-layout {
        max-width: $field-list-width-25p;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-checkbox-layout .e-label {
        padding-right: $field-list-spacing-10;
        overflow: hidden;
        text-overflow: ellipsis !important;
        white-space: unset;
      }

      .e-checkbox-layout {
        max-width: $field-list-width-45p;
        overflow: visible;
      }
    }

    .e-checkbox-layout {
      float: left;
      margin-top: $field-list-spacing-6;

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

    &.e-rtl {
      .e-layout-footer {
        .e-defer-apply-button {
          margin-left: $field-list-spacing-10;
        }
      }

      .e-checkbox-layout {
        float: right;
      }
    }

    &.e-dialog {
      max-height: $field-list-height-550 !important;

      .e-layout-footer {
        padding: $field-list-spacing-0;
      }

      .e-checkbox-layout {
        margin-left: $field-list-spacing-10;
      }

      .e-button-layout {
        @if ($skin-name !='tailwind3') {
          margin-right: $field-list-spacing-10;
        }
      }

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

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

    .e-dlg-header-content,
    .e-footer-content {
      border: $field-list-border-0;
    }

    .e-dlg-header-content {
      @if ($skin-name =='bootstrap5') {
        border-bottom: $field-list-border-1 solid $field-list-border;
      }

      .e-dlg-header {
        overflow: visible;
      }
    }

    .e-value-field-settings .e-dlg-header,
    .e-member-editor-dialog .e-dlg-header {
      overflow: hidden;
    }

    .e-footer-content {
      @if ($skin-name =='bootstrap5') {
        border-top: $field-list-border-1 solid $field-list-border;
      }
    }

    .e-field-list-title {
      display: flex;
      font-size: $field-list-title-font-size;
      min-height: $field-list-height-25;
      padding: $field-list-spacing-0 $field-list-spacing-2 $field-list-title-padding-size;
      width: $field-list-width-100p;

      .e-title-content {
        flex: auto;
      }
    }

    .e-title-header {
      display: flex;
      padding: $field-list-spacing-2;
      width: $field-list-width-100p;

      @if ($skin-name =='bootstrap5' or $skin-name =='bootstrap5.3' or $skin-name == 'tailwind3')
      {
        align-items: center;
      }

      .e-title-content {
        flex: auto;

        @if ($skin-name =='Material3') {
          font-size: 22px;
          font-weight: $field-list-button-font-weight;
        }
      }
    }

    .e-field-list-container {
      display: flex;
      height: $field-list-height-342;
      padding: $field-list-spacing-1;
      position: relative;

      .e-field-table {
        border: $field-list-border-size $field-list-border-type $field-list-default-border-color;
        border-radius: $field-list-default-border-radius;
        display: inline-block;
        overflow: hidden;
        width: $field-list-width-30p;

        .e-field-list-tree {
          .e-sibling {
            display: none;
          }
        }

        .e-field-header,
        .e-field-list {
          width: $field-list-width-100p;
        }

        .e-field-header {
          background: $field-list-header-background-color;
          color: $field-list-default-header-font-color;
          font-size: $field-list-header-font-size;
          font-weight: $field-list-table-header-font-weight;
          overflow: hidden;
          padding: $field-list-table-header-padding;
          text-align: left;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;

          @if ($field-list-skin =='tailwind') {
            text-transform: uppercase;
          }
        }

        .e-field-header-container {
          align-items: center;
          background: $field-list-header-background-color;
          color: $field-list-default-header-font-color;
          display: flex;
          height: $field-list-header-height;
          padding-right: $field-list-header-padding;

          .e-field-header {
            flex: auto;
          }

          .e-sort-none,
          .e-sort-ascend,
          .e-sort-descend {
            color: $field-list-default-header-icon-font-color;
            cursor: pointer;
            font-size: $field-list-header-icon-size;
            padding: $field-list-spacing-0 $field-list-spacing-0 $field-list-spacing-0 $field-list-sort-icon-to-icon-padding;

            &.e-selected::before {
              color: $field-list-active-color;
            }

            &:hover,
            &:focus {
              font-weight: $field-list-font-weight-bold;
            }
          }
        }

        .e-field-list-tree-outer-div {
          display: inline-block;
          height: $field-list-tree-outer-div-height;
          overflow: auto;
          width: $field-list-width-100p;
        }

        .e-field-list {
          display: inline-table;
          height: $field-list-height-100p;
          padding-left: $field-list-spacing-2;
          width: $field-list-width-100p;

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

          &:not(.e-olap-field-list-tree) {
            ul {
              padding-left: $field-list-treeview-ul-padding;

              li.e-pivot-parent {
                @if ($skin-name =='bootstrap5') {
                  padding-left: $field-list-spacing-10;
                }

                @if ($skin-name =='FluentUI') {
                  padding-left: $field-list-spacing-9;
                }
              }

              li:not(.e-pivot-parent):not(.e-pivot-child) {
                .e-text-content {
                  padding-left: $field-list-treeview-li-padding;
                }
              }
            }
          }

          ul {
            overflow: hidden;

            li {
              .e-fullrow {
                cursor: default;
              }

              .e-drag {
                color: $field-list-drag-icon-color;
                cursor: move;
                display: inline-block;
                font-size: $field-list-icon-size;
                height: $field-list-height-20;
                margin-bottom: $field-list-treeview-drag-margin;
                margin-right: $field-list-spacing-6;
                pointer-events: all;
                text-align: center;
                vertical-align: bottom;
                width: $field-list-width-20;

                @if ($skin-name =='fluent2') {
                  font-size: $field-list-font-icon-16;
                  margin-right: $field-list-spacing-0;
                }

                @if ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
                  margin-right: $field-list-spacing-4;
                  padding-left: $field-list-spacing-8;
                }

                @if ($skin-name =='tailwind3') {
                  margin-right: $field-list-spacing-0;
                }

                &.e-disable-drag {
                  cursor: not-allowed;
                  opacity: .4;
                  visibility: hidden;
                }
              }

              .e-list-icon {
                @if ($skin-name !='fluent2'){
                  color: $field-list-tree-icon-color;
                }
                margin: $field-list-spacing-0;
              }

              /* stylelint-disable */
              .e-calc-measure-icon,
              .e-calc-dimension-icon,
              .e-attributeCDB-icon,
              .e-hierarchyCDB-icon,
              .e-level-members,
              .e-namedSetCDB-icon,
              .e-measure-icon,
              .e-kpiGoal-icon,
              .e-kpiStatus-icon,
              .e-kpiTrend-icon,
              .e-kpiValue-icon {
                margin-left: $field-list-spacing-10;
              }

              /* stylelint-enable */
              .e-list-selected {
                opacity: .5;
              }

              .e-selected-node {
                font-weight: $field-list-treeview-font-weight;
              }

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

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

            /* stylelint-enable */
          }

          &.e-olap-field-list-tree {
            ul {
              .e-list-icon {
                font-size: $field-list-icon-size;
                height: $field-list-height-auto;
                width: $field-list-width-auto;

                @if ($skin-name =='fluent2'){
                  &:hover {
                    color: $field-list-icon-hover-color;
                  }
                }
              }
            }

            &.e-treeview ul:first-child {
              padding-left: $field-list-spacing-10;
              padding-right: $field-list-spacing-10;
            }

            &.e-rtl {
              ul {
                .e-list-icon {
                  transform: rotateX(0deg) rotateY(180deg);
                }
              }
            }
          }
        }

        &.e-olap-field-table {
          width: $field-list-width-40p;
        }
      }

      .e-axis-table {
        display: flex;
        overflow: hidden;
        width: $field-list-width-70p;

        .e-left-axis-fields,
        .e-right-axis-fields {
          padding-left: $field-list-default-padding-size;
          width: $field-list-width-50p;
        }

        .e-left-axis-fields .e-field-list-filters,
        .e-left-axis-fields .e-field-list-rows,
        .e-right-axis-fields .e-field-list-columns,
        .e-right-axis-fields .e-field-list-values {
          background-color: $field-list-table-background-color;
          border: $field-list-border-size $field-list-border-type $field-list-default-border-color;
          border-radius: $field-list-default-border-radius;
          fill: $field-list-default-fill-color;
          font-weight: $field-list-font-weight-normal;
          min-height: $field-list-height-165;
          position: relative;
          width: $field-list-width-100p;

          @if ($skin-name =='tailwind3') {
            font-weight: $field-list-font-weight-medium;
          }

          .e-axis-container {
            align-items: center;
            background: $field-list-header-background-color;
            border-bottom: $field-list-border-size $field-list-border-type $field-list-default-border-color;
            color: $field-list-default-header-font-color;
            display: flex;
            height: $field-list-header-height;
            padding: $field-list-spacing-0 $field-list-header-padding $field-list-spacing-0;

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

            .e-axis-icon-container {
              display: flex;
              height: $field-list-header-icon-size;
              width: $field-list-width-20;

              .e-axis-rows,
              .e-axis-columns,
              .e-axis-values,
              .e-axis-filters {
                color: $field-list-default-header-icon-font-color;
                font-size: $field-list-header-icon-size;
              }
            }
          }

          .e-axis-header {
            flex: auto;
            font-size: $field-list-header-font-size;
            line-height: $field-list-header-content-line-height;
            overflow: hidden;
            padding: $field-list-spacing-0 $field-list-spacing-8;
            text-overflow: ellipsis;
            text-transform: $field-list-text-transform;
            white-space: nowrap;
            width: $field-list-width-100p;

            @if ($skin-name =='Material3') {
              font-weight: $field-list-table-header-font-weight;
            }
          }

          .e-axis-content {
            cursor: default;
            height: $field-list-axis-content-height;
            overflow: auto;
            scroll-behavior: smooth;
            width: $field-list-width-100p;

            &.e-drag-restrict {
              cursor: no-drop;
            }

            .e-pvt-btn-div {

              .e-drop-indicator-last,
              .e-drop-indicator {
                display: block;
                pointer-events: none;
                width: $field-list-width-100p;

                &.e-drop-hover {
                  border-top: $field-list-border-2 dashed $field-list-drop-hover-color;
                  margin-top: $field-list-spacing--2;

                  @if ($skin-name =='tailwind') or ($skin-name =='bootstrap5') {
                    border-top: $field-list-border-2 solid $field-list-drop-hover-color;
                  }
                }
              }

              &.e-first-btn {
                .e-drop-indicator {
                  &.e-drop-hover {
                    position: absolute;
                  }
                }
              }

              .e-pivot-button {
                background: $field-list-button-color;
                border-bottom: $field-list-border-size $field-list-border-type $field-list-button-border-color;
                border-left: $field-list-border-0;
                border-radius: $field-list-border-0;
                border-right: $field-list-border-0;
                border-top: $field-list-border-0;
                box-shadow: none;
                cursor: default;
                display: flex;
                font-weight: $field-list-font-weight-normal;
                height: $field-list-button-height;
                line-height: $field-list-line-height-100p;
                padding: $field-list-button-padding;
                text-transform: none;
                width: $field-list-width-100p;

                @if ($field-list-skin =='bootstrap4') or ($skin-name =='bootstrap5') or ($skin-name =='bootstrap5.3') {
                  color: $field-list-button-font-color;
                }

                &.e-list-selected {
                  color: $field-list-button-font-color;
                  opacity: .5;
                }

                &:hover {
                  background-color: $field-list-button-hover-color;

                  .e-pvt-btn-content {
                    background-color: transparent;
                  }

                  @if ($skin-name =='fluent2'){
                    .e-sort,
                    .e-pv-filter,
                    .e-pv-filtered,
                    .e-dropdown-icon,
                    .e-edit {
                      color: $field-list-button-active-color;
                    }
                  }
                }

                &:focus {
                  @if ($skin-name =='tailwind3') {
                    /* stylelint-disable */
                    background-color: $field-list-default-fill-color !important;
                    /* stylelint-enable */
                    border: $field-list-border-1 Solid $field-list-active-color;
                  }
                }
                
                &:focus,
                &:active {
                  background-color: $field-list-button-focus-color;
                  color: $field-list-button-active-color;

                  .e-pvt-btn-content {
                    background-color: transparent;
                  }

                  .e-sort,
                  .e-pv-filter,
                  .e-pv-filtered,
                  .e-dropdown-icon,
                  .e-edit {
                    color: $field-list-button-active-color;
                  }

                  .e-drag {
                    @if ($skin-name =='tailwind') {
                      color: $field-list-button-active-color;
                    }
                  }
                }

                .e-pvt-btn-content {
                  background: transparent;
                  flex: auto;
                  font-size: $field-list-button-font-size;
                  height: $field-list-height-16;
                  overflow: hidden;
                  padding: $field-list-spacing-0 $field-list-spacing-8;
                  text-align: left;
                  text-overflow: ellipsis;
                  width: $field-list-width-70p;

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

                .e-draggable {
                  height: $field-list-height-20;
                  width: $field-list-width-20;
                }

                .e-drag {
                  color: $field-list-drag-icon-color;
                  cursor: move;
                  font-size: $field-list-icon-size;
                  height: $field-list-height-20;
                  width: $field-list-width-20;

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

                  &.e-disable-drag {
                    cursor: not-allowed;
                    opacity: .4;
                    visibility: hidden;
                  }
                }

                .e-sort,
                .e-pv-filter,
                .e-pv-filtered,
                .e-dropdown-icon,
                .e-edit {
                  color: $field-list-button-icon-color;
                  cursor: pointer;
                  display: inline-block;
                  font-size: $field-list-icon-size;
                  height: $field-list-height-20;
                  padding-left: $field-list-icon-to-icon-padding;
                  width: $field-list-width-20;

                  &:hover {
                    color: $field-list-icon-hover-color;
                  }

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

                .e-sort {
                  height: $field-list-icon-size;
                }

                .e-remove {
                  display: none;
                }

                &.e-rtl {
                  .e-pvt-btn-content {
                    text-align: right;
                  }

                  .e-sort,
                  .e-pv-filter,
                  .e-pv-filtered,
                  .e-remove,
                  .e-dropdown-icon,
                  .e-edit {
                    padding-left: $field-list-spacing-0;
                    padding-right: $field-list-icon-to-icon-padding;
                  }
                }
              }
            }
          }

          .e-sort {
            height: fit-content;
            transform: rotateX(0deg);
            transition: transform 200ms ease-in-out;

            &.e-descend {
              transform: rotateX(180deg);
            }
          }

          .e-draggable-prompt {
            bottom: 32%;
            color: $field-list-default-prompt-color;
            font-size: $field-list-content-font-size;
            height: $field-list-height-25;
            pointer-events: none;
            position: absolute;
            text-align: center;
            width: $field-list-width-100p;

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

        .e-left-axis-fields .e-field-list-rows,
        .e-right-axis-fields .e-field-list-values {
          margin-top: $field-list-default-padding-size;
        }

        &.e-olap-axis-table {
          width: $field-list-width-60p;
        }
      }
    }

    &.e-search-mode {
      &.e-static {
        max-height: $field-list-height-750;

        .e-field-list-container .e-field-table {
          height: $field-list-search-static-field-table-height;
        }
      }

      &.e-popup {
        min-height: $field-list-search-popup-min-height;

        .e-field-list-container {
          height: $field-list-height-369;

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

          @if ($skin-name =='fluent2') {
            height: 383px;
          }

          /* stylelint-disable */
          .e-field-table {
            height: $field-list-search-popup-table-height !important;

            .e-field-list-tree-outer-div {
              @if ($skin-name =='Material3' or $skin-name =='fluent2' or $skin-name =='tailwind') {
                height: $field-list-search-popup-table-outer-div-height !important;
              }
            }
          }

          .e-axis-table {
            height: $field-list-height-392;

            .e-axis-content {
              height: $field-list-search-popup-axis-content-height !important;
            }
          }
          /* stylelint-enable */
        }
      }

      .e-member-prompt {
        color: $field-list-drag-icon-color;
        padding: $field-list-member-prompt-padding-size;
        text-align: center;
        width: $field-list-width-100p;

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

      .e-field-table {
        .e-field-list-search {
          display: flex;
          padding: $field-list-search-padding-size;

          .e-field-list-search-input .e-field-list-search-icon {
            float: right;
            font-size: $field-list-header-icon-size;
          }

          /* stylelint-disable */
          .e-input-group .e-input-group-icon,
          .e-input-group.e-control-wrapper .e-input-group-icon {
            border-width: $field-list-border-0 !important;
            cursor: text !important;
          }

          .e-input-group-icon:hover {
            background-color: transparent !important;
            border: transparent !important;
            color: currentColor !important;
          }
        }

        .e-field-list-tree-outer-div .e-disable,
        .e-disable {
          display: none !important;
        }
      }
    }

    .e-calculated-field {
      color: $field-list-cal-button-text-color;
      font-size: $field-list-button-font-size;
      font-weight: $field-list-button-font-weight;
      min-width: $field-list-width-145;

      @if ($skin-name =='Material3') {
        border: $field-list-calculated-field-border;
        box-shadow: none;
      }

      &.e-disable {
        display: none;
      }

      @if ($skin-name =='fluent2') {
        &:hover {
          color: $field-list-cal-button-text-color-hover;
        }
      }
    }

    /* stylelint-enable */
    &.e-rtl {
      .e-field-table {
        .e-field-list {
          padding-left: $field-list-spacing-0;
          padding-right: $field-list-spacing-2;

          &:not(.e-olap-field-list-tree) {
            ul {
              padding-right: $field-list-treeview-ul-padding;

              li.e-pivot-parent {
                @if ($skin-name =='bootstrap5') {
                  padding-right: $field-list-spacing-5;
                }

                @if ($skin-name =='FluentUI') {
                  padding-right: $field-list-spacing-9;
                }
              }

              li:not(.e-pivot-parent):not(.e-pivot-child) {
                .e-text-content {
                  padding-right: $field-list-treeview-li-padding;
                }
              }
            }
          }

          ul li {

            /* stylelint-disable */
            .e-list-text {
              font-family: $field-list-font-family;
            }

            .e-drag {
              margin-left: $field-list-spacing-6 !important;
              margin-right: $field-list-spacing-0 !important;

              @if ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
                padding-right: $field-list-spacing-8;
              }
            }

            .e-calc-measure-icon,
            .e-calc-dimension-icon,
            .e-attributeCDB-icon,
            .e-hierarchyCDB-icon,
            .e-level-members,
            .e-namedSetCDB-icon,
            .e-measure-icon,
            .e-kpiGoal-icon,
            .e-kpiStatus-icon,
            .e-kpiTrend-icon,
            .e-kpiValue-icon {
              margin-left: $field-list-spacing-0;
              margin-right: $field-list-spacing-10;
            }

            /* stylelint-enable */
          }
        }

        .e-field-header {
          padding-left: $field-list-spacing-0;
          padding-right: $field-list-header-padding;
          text-align: right;

          @if ($field-list-skin =='bootstrap4') {
            padding-right: 12px;
          }
        }

        .e-field-header-container {
          padding-left: $field-list-header-padding;
          padding-right: $field-list-spacing-0;

          .e-sort-none,
          .e-sort-ascend,
          .e-sort-descend {
            padding: $field-list-spacing-0 $field-list-spacing-0 $field-list-spacing-0 $field-list-sort-icon-to-icon-padding;
          }
        }
      }

      .e-axis-table {

        .e-left-axis-fields,
        .e-right-axis-fields {
          padding-left: $field-list-spacing-0;
          padding-right: $field-list-default-padding-size;
        }

        .e-left-axis-fields .e-field-list-filters,
        .e-left-axis-fields .e-field-list-rows,
        .e-right-axis-fields .e-field-list-columns,
        .e-right-axis-fields .e-field-list-values {
          .e-axis-header {
            float: right;
          }
        }
      }
    }

    &.e-static {
      background-color: $field-list-default-bg-color;
      border: $field-list-border-size $field-list-border-type $field-list-default-border-color;
      max-height: $field-list-height-700;
      padding: $field-list-static-padding-size;
      position: relative;

      .e-title-content {
        color: $field-list-default-font-color;
      }

      .e-field-list-container {
        display: inline-block;
        height: $field-list-height-100p;
        width: $field-list-width-100p;

        .e-field-table {
          height: $field-list-static-field-table-height;
          width: $field-list-width-100p;

          .e-field-list-tree-outer-div {
            height: $field-list-static-field-table-outer-div-height;
          }
        }

        .e-center-div {
          display: none;
        }

        .e-center-title {
          color: $field-list-default-header-font-color;
          font-size: $field-list-header-font-size;
          height: $field-list-height-25;
          margin-top: $field-list-spacing-5;
          overflow: hidden;
          text-align: left;
          text-overflow: ellipsis;
        }

        .e-axis-table {
          width: $field-list-width-100p;

          .e-left-axis-fields {
            padding: $field-list-spacing-0;
          }

          .e-right-axis-fields {
            padding-left: $field-list-default-padding-size;
          }

          .e-left-axis-fields .e-field-list-rows,
          .e-right-axis-fields .e-field-list-values {
            margin-top: $field-list-default-padding-size;
          }
        }
      }

      &.e-rtl {
        .e-center-title {
          text-align: right;
        }

        .e-axis-table {
          .e-left-axis-fields {
            padding-left: $field-list-static-padding-size;
          }

          .e-right-axis-fields {
            padding: $field-list-spacing-0;
          }
        }
      }

      .e-layout-footer {
        .e-checkbox-layout {
          align-items: center;
          display: flex;
          margin-top: $field-list-spacing-0;
          overflow: hidden;
          width: $field-list-width-100p;

          .e-checkbox-wrapper {
            width: $field-list-width-100p;

            label {
              width: $field-list-width-100p;

              .e-label {
                overflow: hidden;
                /* stylelint-disable */
                text-overflow: ellipsis !important;
                /* stylelint-enable */
                white-space: unset;
                width: calc($field-list-width-100p - $field-list-width-20);
              }
            }
          }
        }

        .e-button-layout {
          display: flex;
          justify-content: flex-end;
        }
      }
    }

    &.e-device {
      height: $field-list-height-100p;
      /* stylelint-disable */
      max-height: $field-list-height-100p !important;
      max-width: $field-list-width-100p !important;
      /* stylelint-enable */
      min-height: $field-list-height-500;
      width: $field-list-width-100p;

      .e-dlg-header-content {
        background-color: $field-list-mobile-header-color;
        color: $field-list-mobile-header-font-color;
        font-size: $field-list-font-size-14;

        @if ($skin-name =='tailwind') {
          padding-left: $field-list-spacing-16;
          padding-right: $field-list-spacing-16;
        }
      }

      .e-adaptive-field-list-dialog,
      .e-member-editor-dialog,
      .e-value-field-settings {
        .e-dlg-header-content {
          background-color: transparent;
          color: $field-list-mobile-header-font-color;
        }

        .e-dlg-content .e-field-list-tree-outer-div {
          height: $field-list-height-210;
          overflow: auto;

          @if ($skin-name == 'fluent2') {
            height: 170px;
          }
        }
      }

      .e-title-mobile-header {
        display: flex;
        align-items: center;
      }

      .e-field-list-back-icon {
        color: $field-list-back-font-color;
        font-size: $field-list-font-icon-16;
        height: auto;
        margin-left: $field-list-spacing-0;
        margin-right: $field-list-spacing-12;
        text-align: center;
        width: $field-list-width-24;
      }

      .e-disable {
        display: none;
      }

      .e-adaptive-container {
        height: $field-list-height-100p;
        position: relative;

        .e-tab-header {
          background: $field-list-header-background-color;
        }

        .e-content {
          display: initial;

          .e-field-list-filters,
          .e-field-list-rows,
          .e-field-list-columns,
          .e-field-list-values {
            display: inline-block;
            height: $field-list-height-100p;
            min-height: $field-list-height-250;
            padding-top: $field-list-adaptive-content-padding-size;
            position: relative;
            width: $field-list-width-100p;

            .e-axis-content {
              overflow: auto;
            }

            .e-pvt-btn-div {
              display: grid;

              .e-drop-indicator {
                display: none;
              }

              .e-pivot-button {
                align-items: center;
                border: $field-list-border-size $field-list-border-type $field-list-button-border-color;
                border-left: $field-list-border-0;
                border-radius: $field-list-radius-0;
                border-right: $field-list-border-0;
                border-top: $field-list-border-0;
                border-width: $field-list-border-1 $field-list-border-0;
                box-shadow: none;
                display: flex;
                font-size: $field-list-bigger-button-font-size;
                font-weight: $field-list-font-weight-normal;
                height: $field-list-adaptive-pivot-button-height;
                line-height: $field-list-line-height-normal;
                padding: $field-list-adaptive-pivot-button-padding;
                text-transform: none;
                width: $field-list-width-100p;

                @if ($skin-name =='bootstrap5') or ($skin-name =='bootstrap5.3') {
                  background-color: $field-list-default-bg-color;
                  color: $field-list-default-font-color;
                }

                &.e-list-selected {
                  opacity: .5;
                }

                .e-pvt-btn-content {
                  flex: auto;
                  font-size: $field-list-bigger-button-font-size;
                  overflow: hidden;
                  text-align: left;
                  text-overflow: ellipsis;
                  width: $field-list-width-70p;
                }

                .e-drag {
                  display: none;
                }

                /* stylelint-disable */
                .e-sort,
                .e-pv-filter,
                .e-pv-filtered,
                .e-remove,
                .e-dropdown-icon,
                .e-edit {
                  color: $field-list-button-icon-color;
                  cursor: pointer;
                  display: inline-block;
                  font-size: $field-list-bigger-icon-size;
                  padding-left: $field-list-spacing-10;
                  width: $field-list-width-24;
                  font-size: $field-list-font-icon-14 !important;

                  @if ($field-list-skin =='bootstrap4') {
                    color: $white;
                  }

                  @if ($skin-name =='bootstrap5') {
                    color: $field-list-button-icon-color;
                    padding-left: $field-list-spacing-8;
                  }

                  &:hover {
                    color: $field-list-icon-hover-color;
                  }

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

                /* stylelint-enable */
                .e-sort {
                  height: fit-content;
                  transform: rotateX(0deg);
                  transition: transform 200ms ease-in-out;

                  &.e-descend {
                    transform: rotateX(180deg);
                  }
                }

                .e-remove {
                  display: inline-block;
                }

                &.e-rtl {
                  .e-pvt-btn-content {
                    text-align: right;
                  }

                  .e-sort,
                  .e-pv-filter,
                  .e-pv-filtered,
                  .e-remove,
                  .e-dropdown-icon,
                  .e-edit {
                    padding-left: $field-list-spacing-0;
                    padding-right: $field-list-spacing-10;

                    @if ($skin-name =='tailwind') {
                      margin-right: $field-list-spacing-8;
                      padding-right: $field-list-spacing-0;
                    }

                    @if ($skin-name =='bootstrap5') {
                      padding-right: $field-list-spacing-8;
                    }
                  }
                }
              }
            }

            .e-axis-content {
              height: $field-list-height-100p;
              width: $field-list-width-100p;
            }

            .e-draggable-prompt {
              color: $field-list-default-prompt-color;
              font-size: $field-list-drag-clone-font-size;
              height: $field-list-adaptive-drag-prompt-height;
              left: 15%;
              line-height: $field-list-line-height-16;
              pointer-events: none;
              position: absolute;
              text-align: center;
              top: 25%;
              vertical-align: middle;
              width: $field-list-width-70p;

              @if ($skin-name =='bootstrap5') or ($skin-name =='fluent2') or ($skin-name =='fluent') or ($skin-name =='bootstrap5.3') or ($skin-name =='tailwind') or ($skin-name =='tailwind3') {
                color: $field-list-default-font-color;
              }
            }
          }

          .e-pivot-calc-outer-div {
            .e-pivot-formula {
              background-color: $pivot-formula-background;
              border: $field-list-border-1 solid $pivot-formula-border;
              border-radius: $field-list-default-border-radius;
              color: $field-list-default-formula-font-color;
              height: $field-list-height-200;
              margin-left: $field-list-spacing-20;
              margin-right: $field-list-spacing-20;
              margin-top: $field-list-spacing-25;
              padding: $field-list-spacing-2 $field-list-spacing-3;
              resize: none;
              width: $field-list-width-90p;
            }

            /* stylelint-disable */
            .e-pivot-calc-input-div,
            .e-member-options,
            .e-pivot-calc-custom-format-div {
              margin-left: $field-list-spacing-20;
              margin-right: $field-list-spacing-20;
              margin-top: $field-list-spacing-20;
              width: $field-list-width-90p !important;
            }

            /* stylelint-enable */
            .e-accordion {
              margin-top: $field-list-spacing-20;
              overflow: auto;

              .e-acrdn-header {
                align-items: center;
                display: flex;

                .e-acrdn-header-icon {
                  display: table;
                  font-size: $field-list-font-icon-12;
                  min-width: $field-list-width-28;
                  padding: $field-list-spacing-0;
                  position: absolute;
                  right: 16px;

                  .e-list-icon {
                    cursor: pointer;
                    display: table-cell;
                    padding-right: $field-list-spacing-6;
                    text-align: center;
                    vertical-align: middle;

                    &.e-remove-report.e-icons {
                      padding-left: $field-list-spacing-10;
                    }
                  }
                }
              }

              .e-icons.e-frame {
                margin-right: $field-list-spacing-12;
              }

              .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-icons {
                @if (($skin-name =='bootstrap5') or ($skin-name =='fluent2') or ($skin-name =='fluent') or ($skin-name =='bootstrap5.3') or ($skin-name =='tailwind') or ($skin-name =='tailwind3') or ($skin-name =='material3')) {
                  color: $primary-text-color;
                }
              }

              &.e-rtl {
                .e-acrdn-header-icon {
                  left: 16px;
                  right: auto;
                }

                /* stylelint-disable */
                .e-icons.e-frame {
                  margin-left: $field-list-spacing-12 !important;
                  margin-right: $field-list-spacing-0 !important;
                }
                /* stylelint-enable */
              }
            }

            .e-radio-wrapper {
              margin-bottom: $field-list-spacing-24;
              margin-right: $field-list-spacing-20;

              .e-label {
                color: $field-list-default-font-color;
                font-family: $field-list-font-family;
                opacity: .87;
              }
            }

            .e-pivot-ok-button,
            .e-pivot-add-button,
            .e-pivot-cancel-button {
              float: right;
              margin-right: calc($field-list-spacing-10p - $field-list-width-20);
              margin-top: $field-list-spacing-32;
            }

            .e-pivot-ok-button {
              bottom: 0;
              position: sticky;
            }

            .e-pivot-accord {
              max-height: $field-list-height-290;
              overflow: auto;

              ul {

                .e-list-icon {
                  color: $field-list-tree-icon-color;
                }

                .e-calcfieldmember .e-list-text {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  width: $field-list-width-53p;
                }

                .e-list-header-icon {
                  display: table;
                  height: $field-list-height-30;
                  min-height: $field-list-height-30;
                  min-width: $field-list-width-24;
                  padding: $field-list-spacing-0;
                  position: absolute;
                  right: 16px;
                  top: 0;

                  .e-list-edit-icon,
                  .e-remove-report.e-icons {
                    color: $field-list-tree-icon-color;
                    display: table-cell;
                    padding: $field-list-spacing-5;
                    pointer-events: all;
                    text-align: center;
                    vertical-align: middle;
                  }
                }
              }

              &.e-rtl {
                ul {
                  .e-list-header-icon {
                    left: 16px;
                    right: auto;
                  }

                  .e-list-icon {
                    transform: rotateX(0deg) rotateY(180deg);
                  }
                }
              }
            }

            &.e-olap-calc-outer-div {
              max-height: $field-list-height-575;
              overflow: hidden;
              overflow-y: auto;
            }
          }
        }

        .e-field-list-footer {
          bottom: 20px;
          display: inline-block;
          position: absolute;
          vertical-align: bottom;
          width: $field-list-width-100p;

          .e-field-list-footer-content {
            display: inline-block;
            padding: $field-list-adaptive-footer-padding-size;
            width: $field-list-width-100p;

            .e-field-list-btn,
            .e-calculated-field-btn {
              @include wrap-style;
            }
          }
        }
      }

      .e-footer-content.e-field-list-footer {
        background-color: transparent;
        bottom: 0;
        display: inline-block;
        padding: $field-list-adaptive-footer-padding-size;
        pointer-events: none;
        position: absolute;
        vertical-align: bottom;
        width: $field-list-width-100p;

        .e-field-list-btn,
        .e-calculated-field-btn,
        .e-cancel-btn,
        .e-defer-apply-button {
          @include wrap-style;

          @if ($skin-name =='Material3') {
            border-radius: $field-list-device-footer-button-border-radius;
            box-shadow: $field-list-device-footer-button-box-shadow;
          }
        }

        .e-cancel-btn,
        .e-defer-apply-button {
          float: left;
        }

        .e-cancel-btn,
        .e-defer-apply-button,
        .e-checkbox-layout {
          max-width: $field-list-width-20p;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .e-checkbox-layout {
          max-width: $field-list-width-45p;
        }
      }

      &.e-static {
        border: $field-list-border-0;
        padding: $field-list-spacing-0;

        .e-field-list-filters,
        .e-field-list-rows,
        .e-field-list-columns,
        .e-field-list-values {
          .e-axis-content {
            max-height: $field-list-height-600;
          }
        }
      }

      &.e-rtl {
        .e-field-list-back-icon {
          margin-left: $field-list-spacing-12;
          margin-right: $field-list-spacing-0;
          transform: rotateY(180deg);
        }

        .e-field-list-footer {

          .e-field-list-btn,
          .e-calculated-field-btn {
            float: left;
          }

          .e-cancel-btn,
          .e-defer-apply-button {
            float: right;
          }
        }

        /* stylelint-disable */
        .e-pivot-calc-outer-div {

          .e-pivot-ok-button,
          .e-pivot-add-button,
          .e-pivot-cancel-button {
            float: left !important;
            margin-left: $field-list-spacing-20;
          }
        }
        /* stylelint-enable */
      }
    }
  }
}