@use 'ej2-base/styles/common/mixin' as *;
@mixin active-icon {
  .e-fe-dot,
  .e-fe-tick {
    color: $fe-ddl-icon-color;
  }
}

@mixin active-icon-color {
  .e-btn-icon,
  .e-tbar-btn-text {
    @if $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'bootstrap5' {
      color: $fe-tb-active-color;
    }

    @if $fm-skin-name == 'highcontrast' {
      color: $fe-active-font-color;
    }
  }
}

@mixin hover-icon-border-color {
  @if $fm-skin-name == 'bootstrap-dark' {
    border: 1px solid $fe-tb-hover-border-color;
  }
}

@mixin bg-border($bg-color, $border-color) {
  background: $bg-color;
  border-color: $border-color;
}

@include export-module('FileManager-theme') {
  .e-filemanager {
    @include bg-border($fe-background, $fe-border-color);

    .e-toolbar {
      border-bottom-color: $fe-border-color;
      @if $fm-skin-name != 'Material3' {
        .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn {
          &.e-active {
            @include hover-icon-border-color;
            @include active-icon-color;
            @include bg-border($fe-tb-focus-bg, $fe-tb-focus-border-color);
            @if $fm-skin-name == 'highcontrast' {
              background: $fe-active-bg-color;
            }

            &:hover {
              @if $fm-skin-name == 'highcontrast' {
                background: $fe-active-bg-color;
              }
            }
          }

          &:hover {
            @include hover-icon-border-color;
            @include bg-border($fe-tb-focus-bg, $fe-tb-hover-border-color);
          }

          &:focus {
            @include hover-icon-border-color;
            @include active-icon-color;
            @include bg-border($fe-tb-focus-bg, $fe-tb-hover-border-color);
            @if $fm-skin-name == 'highcontrast' {
              background: $fe-active-bg-color;
            }
          }
        }
      }
    }

    @if $fm-skin-name == 'tailwind' {
      .e-navigation.e-pane {
        background-color: $content-bg-color-alt1;
      }
    }

    .e-address {
      border-bottom-color: $fe-border-color;

      .e-breadcrumb-menu .e-breadcrumb-submenu {
        &:active,
        &:focus,
        &:hover {
          @include active-icon-color;
        }
      }

      .e-icons {
        color: $fe-icon-color;
      }

      .e-list-text {
        color: $fe-bc-link-color;
      }

      .e-address-list-item {
        color: $fe-bc-link-color;

        &:focus .e-list-text {
          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' {
            background: $fe-bc-hover-bg-color;
          }
          color: $fe-bc-hover-font-color;
        }

        &:last-child {
          .e-list-text {
            color: $fe-bc-color;
          }
        }

        &:not(:last-child) {
          .e-list-text {
            @if ($fm-skin-name == 'bootstrap5.3') {
              &:hover {
                background-color: $content-bg-color-hover;
                color: $primary-bg-color-hover;
                text-decoration: underline $primary-bg-color-hover;
              }
              &:active {
                color: $primary-bg-color-hover;
                border: 1px solid $primary-bg-color-hover;
                text-decoration: underline $primary-bg-color-hover;
              }
            }
            @else {
              &:hover,
              &:active,
              &:focus {
                @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
                  background: $fe-bc-hover-bg-color;
                }
                color: $fe-bc-hover-font-color;
              }
            }
            @if $fm-skin-name == 'fluent2' {
              &:active {
                background: $fe-bc-active-bg-color;
              }
            }
          }
        }
      }

      .e-address-list-item:focus .e-list-text {
        @if ($fm-skin-name == 'bootstrap5.3') {
          color: $primary-bg-color-hover;
          border: 1px solid $primary-bg-color-hover;
          text-decoration: underline $primary-bg-color-hover;
        }
        @else {
          color: $fe-bc-hover-font-color;
        }
      }

      .e-search-wrap {
        .e-input-group.e-control-wrapper:not(.e-success) {
          @if $fm-skin-name != 'fluent2' {
            @include bg-border($fe-search-bg-color, $fe-border-color);
          }

          @if $theme-name == 'fluentui-dark' {
            border-color: $fe-search-border-color;
          }
          @if ($fm-skin-name == 'Material3') {
            border: none;
            border-bottom: 1px solid $outline;
            border-radius: $fe-address-input-group-border-radius;
          }
        }
      }
    }

    .e-treeview {
      .e-list-item.e-active {
        & > .e-fullrow {
          border: $fe-ah-border-color;
        }

        &.e-hover > .e-fullrow {
          @if $fm-skin-name == 'material-dark' {
            background-color: $fe-ah-bg-color;
          }
        }
      }

      .e-list-parent .e-list-item.e-fe-drop-folder.e-hover > .e-fullrow {
        border-color: $fe-drop-folder-bg-color;
      }
    }

    .e-grid {

      .e-gridheader {
        @if $fm-skin-name != 'FluentUI' {
          tr:first-child th {
            background: $fe-grid-header-bg-color;
          }
        }

        .e-headercell {

          &:not(.e-fe-grid-icon):hover,
          &.e-fe-grid-icon .e-headercelldiv:hover {
            background: $fe-hover-bg-color;
          }
          &.e-fe-checkbox:hover {
            @if $fm-skin-name == 'FluentUI' {
              background: $content-bg-color;
            }
            @else {
              background: $fe-grid-header-bg-color;
            }
          }
        }
      }

      .e-empty-inner-content {
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name =='Material3' {
          color: $fe-grid-empty-inner-content-color;
        }
      }

      .e-rowcell {
        @if $fm-skin-name == 'material-dark' or $fm-skin-name == 'bootstrap-dark' {
          color: $fe-grid-type-color;

          .e-fe-text {
            color: $fe-grid-text-color;
          }
        }
      }

      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap4' {
        td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
          color: $fe-active-font-color;
        }
      }

      td.e-active {
        background-color: $fe-active-bg-color;
        @if $fm-skin-name != 'material-dark' {
          color: $fe-active-font-color;
        }
      }

      tr:hover td.e-active {
        @if $fm-skin-name == 'material-dark' {
          background-color: $fe-ah-bg-color;
        }
      }

      .e-checkbox-wrapper {
        .e-icons.e-check {
          @if $fm-skin-name == 'highcontrast' or $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'bootstrap-dark' or $fm-skin-name == 'bootstrap5' {
            background-color: $fe-checkbox-bg-color;
            color: $fe-checkbox-color;
          }
        }

        .e-icons.e-stop {
          @if $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'bootstrap5' {
            background-color: $fe-checkbox-bg-color;
            color: $fe-checkbox-color;
          }
        }
      }

      &.e-gridhover .e-row:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
        @if $fm-skin-name == 'material-dark' or $fm-skin-name == 'bootstrap-dark' {
          background-color: $fe-hover-bg-color;
          color: $fe-grid-type-color;
        }
      }

      &.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
        background-color: transparent;
      }
    }

    .e-large-icons {

      .e-list-img {
        border-color: $fe-img-border-color;
      }

      .e-active {
        color: $fe-active-font-color;
      }

      .e-empty-inner-content {
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'tailwind3' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'Material3' {
          color: $fe-grid-empty-inner-content-color;
        }
      }

      .e-large-icon {
        border-color: transparent;

        &.e-active {
          @include bg-border($fe-active-bg-color, $fe-active-border-color);
        }

        &.e-hover,
        &:hover {
          @include bg-border($fe-hover-bg-color, $fe-hover-border-color);
          @if ($fm-skin-name == 'fluent2') {
            color: $fe-lg-hover-font-color;
          }
        }

        &.e-active.e-hover,
        &.e-active:hover {
          @include bg-border($fe-ah-bg-color, $fe-ah-border-color);
          @if ($fm-skin-name == 'fluent2') {
            color: $fe-lg-active-font-color;
          }
        }

        &.e-focus {
          border-color: $fe-focus-border-color;
          @if $fm-skin-name == 'tailwind3' {
            background-color: $content-bg-color-focus;
          }
        }

        &.e-hover.e-fe-drop-folder,
        &:hover.e-fe-drop-folder {
          border-color: $fe-drop-folder-bg-color;
        }
      }

      .e-checkbox-wrapper {
        .e-icons.e-check {
          background-color: $fe-checkbox-bg-color;
          color: $fe-checkbox-color;
        }
      }
    }

    .e-fe-clone {

      .e-fe-content {
        background-color: $fe-clone-bg-color;
        @if $fm-skin-name == 'highcontrast-light' or $fm-skin-name == 'fabric-dark' or $fm-skin-name == 'bootstrap-dark' {
          border-color: $fe-clone-border-color;
        }
        color: $fe-bc-color;

        @if $fm-skin-name == 'highcontrast' {
          color: $fe-active-font-color;
        }
      }

      .e-fe-count {
        background-color: $fe-clone-count-bg-color;
        border-color: $fe-clone-count-border-color;
        color: $fe-clone-count-font-color;
      }
    }

    &.e-fe-mobile {
      .e-large-icons {
        .e-large-icon {

          &.e-hover,
          &:hover {
            @include bg-border(transparent, transparent);
          }
          &.e-focus {
            border-color: transparent;
          }
          &.e-active {
            @include bg-border($fe-active-bg-color, $fe-active-border-color);
          }
        }
      }
      @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
        .e-address .e-icons {
          color: $icon-color;
          &:hover {
            color: $icon-color-hover;
          }
        }
      }
    }
  }

  .e-fe-popup {

    &.e-dropdown-popup ul .e-item,
    &.e-contextmenu-wrapper ul .e-menu-item,
    &.e-contextmenu-container ul .e-menu-item {
      @include active-icon;

      &.e-separator {
        @if $fm-skin-name == 'bootstrap4' {
          border-bottom-color: $fe-tb-db-sep-color;
        }
      }
    }

    &.e-dialog {
      td {
        color: $fe-text-color;
        &:first-child {
          color: $fe-label-color;
        }
      }
    }

    .e-fe-error {
      color: $fe-error-color;
    }

    .e-upload .e-upload-actions {
      border-bottom-color: $fe-up-list-border-color;
    }
  }
  .e-filemanager .e-grid.sf-grid :is(.e-headercontent th.e-headercell:not(.e-menu-item):not(.e-editedbatchcell).e-fe-checkbox, .e-content td.e-rowcell:not(.e-menu-item):not(.e-editedbatchcell).e-fe-checkbox):is(:focus, :focus-visible) {
    box-shadow: none;
  }
}