@use 'ej2-base/styles/common/mixin' as *;
@mixin visibility($value) {
  .e-checkbox-wrapper {
    visibility: $value;
    @if $fm-skin-name == 'fluent2' {
      padding: $fe-padding-none;
    }
  }
}

@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin size($height, $width) {
  height: $height;
  width: $width;
}

@mixin checkbox($value) {
  .e-checkbox-wrapper .e-frame {
    border-width: $fe-checkbox-wrapper-border-width;
    line-height: $value;
    @if $fm-skin-name == 'fluent2' {
      @include size(16px, 16px);
      font-size: 10px;
      margin: $fe-margin-none;
    }
    @if $fm-skin-name == 'tailwind3' {
      line-height: $fe-checkbox-wrapper-line-height;
      @include size($fe-bigger-checkbox-wrapper-height, $fe-bigger-checkbox-wrapper-width);
    }
  }
}

@mixin icon-style($height, $width, $margin) {
  height: $height;
  margin: $margin;
  width: $width;
}

@mixin toolbar-height($height, $min-height) {
  height: $height;
  min-height: $min-height;
}

@mixin margin-padding($margin, $padding) {
  margin: $margin;
  padding: $padding;
}

@mixin empty-style($empty-min-width, $empty-content-font-size, $empty-content-margin, $empty-content-padding, $empty-content-text-align, $empty-icon-height, $empty-icon-width, $empty-icon-margin, $empty-inner-content-font-size, $empty-inner-content-margin, $empty-inner-content-padding, $empty-inner-content-text-align) {
  .e-empty {
    min-width: $empty-min-width;
  }

  .e-empty-content {
    @include empty-content($empty-content-font-size, $empty-content-margin, $empty-content-padding, $empty-content-text-align);
  }

  .e-empty-icon {
    @include icon-style($empty-icon-height, $empty-icon-width, $empty-icon-margin);
  }

  .e-empty-inner-content {
    @include empty-content($empty-inner-content-font-size, $empty-inner-content-margin, $empty-inner-content-padding, $empty-inner-content-text-align);
  }
}

@include export-module('FileManager-bigger') {
  .e-filemanager,
  .e-bigger .e-filemanager,
  .e-filemanager.e-bigger {
  
    &.e-fe-mobile {
      
      .e-toolbar {
        @if ($fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2') {
          @include toolbar-height($fe-mobile-tb-height, $fe-mobile-tb-height);
        }
      }

      .e-toolbar .e-popup-up-icon.e-icons,
      .e-toolbar .e-popup-down-icon.e-icons,
      .e-toolbar-items .e-toolbar-item .e-btn-icon.e-icons {
        font-size: $fe-mobile-icon-font-size;
      }

      .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {

        @if $fm-skin-name == 'Material3' {
          padding: $fe-mobile-tb-icon-padding;
          font-size: $fe-mobile-tb-icon-font-size;
          line-height: $fe-mobile-tb-icon-font-size;
        }
        @else {
          &.e-fe-newfolder {
            padding-top: $fe-mobile-newfolder-padding-top;
          }
          &.e-fe-upload {
            padding-left: $fe-mobile-upload-padding-left;
          }
          &.e-fe-sort {
            padding-top: $fe-mobile-sort-padding-top;
          }
          &.e-fe-refresh {
            padding-top: $fe-mobile-refresh-padding-top;
          }
          &.e-fe-select  {
            padding-top: $fe-mobile-select-padding-top;
          }
          &.e-fe-large {
            padding: $fe-mobile-large-padding;
          }
          &.e-fe-grid {
            @if $fm-skin-name != 'Material3' and $fm-skin-name != 'material' and $fm-skin-name != 'fluent2' and $fm-skin-name != 'FluentUI' {
              padding: $fe-mobile-gridview-icon-padding;
            }
            @else {
              padding: $fe-mobile-grid-padding;
            }
          }
          &.e-fe-details {
            padding-top: $fe-mobile-details-padding-top;
          }
          &.e-fe-delete {
            padding-left: $fe-mobile-delete-padding-left;
          }
          &.e-fe-rename {
            padding-left: $fe-mobile-rename-padding-left;
            padding-top: $fe-mobile-rename-padding-top;
          }
          &.e-fe-download {
            padding-left: $fe-mobile-download-padding-left;
          }
          &.e-fe-cut {
            padding-left: $fe-mobile-cut-padding-left;
            padding-top: $fe-mobile-cut-padding-top;
          }
          &.e-fe-copy {
            padding-left: $fe-mobile-copy-padding-left;
          }
        }
      }
      &:not(.e-rtl) {
        .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt.e-icon-btn .e-icons.e-btn-icon.e-fe-grid {
          padding: $fe-tb-btn-icon-padding;
        }
      }

      .e-toolbar-left {
        .e-icons.e-fe-sort {
          display: inline-block;
          margin: $fe-margin-none;
          width: 14px;
        }

        .e-tbar-ddb-text,
        .e-toolbar-item .e-tbar-btn-text {
          display: none;
        }
      }

      .e-splitter .e-split-bar {
        display: none;
      }

      .e-address {
        height: $fe-mobile-search-height;

        .e-addressbar-ul {
          height: $fe-mobile-search-height;
          @if $fm-skin-name == 'material-dark' {
            padding: $fe-big-bc-padding;
          }
          @if $fm-skin-name == 'tailwind3' {
            padding: $fe-mobile-addressbar-ul-padding;
          }
        }

        .e-address-list-item .e-icons {
          font-size: $fe-big-bc-icon-font-size;
        }

        .e-list-text {
          font-size: $fe-big-bc-font-size;
          @if $fm-skin-name == 'tailwind3' {
            line-height: $fe-bigger-list-text-line-height;
          }
        }

        .e-search-wrap {
          min-width: 47px;
          width: auto;

          .e-input-group {
            display: none;
            @include size($fe-mobile-search-height, 100%);

            .e-clear-icon {
              margin: $fe-mobile-clear-icon-margin;
            }

            .e-input {
              margin: $fe-search-input-margin;
            }
          }
        }

        .e-fe-search {
          font-size: $fe-mobile-icon-font-size;
          @if $fm-skin-name !='Material3' {
            margin: $fe-mobile-address-search-margin;
          }
          right: 13px;
        }
      }

      @if ($fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2') {
        .e-fe-splitter {
          height: calc(100% - #{$fe-mobile-tb-height + 1px});
        }
      }

      .e-view-container .e-fe-grid-container {
        height: calc($fe-full-height - $fe-mobile-search-height);
      }

      .e-grid {

        .e-fe-grid-icon .e-fe-icon {
          @include size($fe-mobile-grid-icon-height, $fe-mobile-grid-icon-size);
          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
            margin: $fe-mobile-grid-icon-margin;
          }
        }

        .e-gridheader {
          display: none;
        }

        .e-content {
          .e-rowcell {
            border-bottom: $fe-mobile-grid-rowcell-border-bottom solid;
            border-bottom-color: $fe-border-color;
            @if $fm-skin-name == 'tailwind3' {
              padding: $fe-mobile-grid-content-padding;
            }
            &.e-fe-checkbox {
              padding: $fe-checkbox-padding;
            }
          }
        }

        .e-gridcontent .e-fe-grid-icon {
          @if $fm-skin-name == 'fabric-dark' {
            padding-left: $fe-mobile-grid-icon-padding;
            padding-right: $fe-mobile-grid-icon-padding;
          }
          @else if $fm-skin-name == 'tailwind3' {
            padding-left: $fe-mobile-grid-icon-padding;
            padding-right: $fe-mobile-grid-icon-padding;
          }
          @else {
            padding-left: $fe-mobile-grid-icon-padding;
            padding-right: $fe-mobile-grid-icon-padding;
          }
        }

        .e-fe-text {
          @include ellipsis;
        }

        @if $fm-skin-name == 'tailwind3' {
          .e-fe-text {
            font-size: $fe-bigger-grid-text-font-size;
            line-height: $fe-bigger-grid-text-line-height;
          }
        }

        @if $fm-skin-name == 'fluent2' {
          .e-fe-text {
            font-size: $text-base;
            line-height: 22px;
          }
          .e-fe-date,
          .e-fe-size {
            color: $content-text-color-alt2;
          }
        }
      }

      .e-large-icons {
        height: calc($fe-full-height - $fe-mobile-search-height);
      }

      .e-large-icons .e-list-parent {
        padding: $fe-padding-none;
        @if ($fm-skin-name == 'tailwind3') {
          padding: $fe-mobile-large-icon-parent-list-padding;
        }

        .e-list-item {
          display: inline-table;
          @include icon-style($fe-mobile-lg-item-height, $fe-mobile-lg-item-width, $fe-mobile-lg-item-margin);

          &.e-hover,
          &:hover {
            @include visibility(hidden);
          }

          &.e-active {
            @include visibility(visible);
          }

          .e-checkbox-wrapper {
            z-index: 999;
          }

          .e-list-text {
            margin: $fe-margin-none $fe-margin-auto;
            width: $fe-mobile-lg-item-inner-width;
            @if $fm-skin-name == 'tailwind3' {
              font-size: $fe-big-lg-text-font-size;
              line-height: $fe-bigger-list-text-line-height;
            }
            @if $fm-skin-name == 'Material3' {
              font-size: $fe-big-lg-text-font-size;
              padding: $fe-big-lg-text-padding;
            }
          }

          .e-list-img {
            margin: $fe-mobile-list-img-margin $fe-margin-auto;
            max-height: $fe-mobile-lg-img-height;
            max-width: $fe-mobile-lg-item-inner-width;
          }

          .e-list-icon {
            @include icon-style($fe-mobile-lg-icon-height, $fe-mobile-lg-icon-width, $fe-mobile-lg-icon-margin);
          }
        }
      }
    }
  
    &.e-fe-m-select {
      .e-large-icons .e-list-item.e-large-icon,
      .e-grid .e-content .e-row .e-rowcell {
        @include visibility(visible);
      }
    }
  
    &.e-fe-m-filter {

      .e-address {

        .e-search-wrap {
          @include margin-padding($fe-margin-none, $fe-padding-none);
          position: absolute;
          width: 100%;

          .e-input-group {
            display: inline-flex;
          }

          .e-input-group .e-input {
            height: $fe-auto-height;
            margin-left: $fe-big-search-wrap-input-margin-left;
          }

          .e-fe-search {
            left: 0;
            margin-left: $fe-big-search-wrap-margin-left;
            @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
              margin-top: $fe-big-search-wrap-margin-top;
            }
            @else if ($fm-skin-name == 'tailwind3') {
              margin-top: $fe-big-search-wrap-margin-top;
            }
            @else {
              margin-top: $fe-big-search-wrap-margin-top;
            }
            width: 30px;
          }
        }

        .e-addressbar-ul {
          visibility: hidden;
        }
      }
    }
  
    &.e-fe-m-filter.e-rtl {
      .e-address {
        .e-search-wrap {
          .e-input-group .e-input {
            margin-right: $fe-big-rtl-search-wrap-input-margin-right;
          }
          .e-fe-search {
            transform: rotate(180deg);
          }
        }
      }
    }
  
    &.e-rtl .e-grid {
      .e-gridheader,
      .e-gridcontent {
        .e-fe-grid-icon {
          padding-right: $fe-big-rtl-grid-icon-padding-right;
        }
      }
    }
  }
  
  .e-fe-popup.e-bigger,
  .e-bigger .e-fe-popup {
  
    .e-fe-error {
      @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
        font-size: $text-sm;
        line-height: 22px;
      }
    }
  
    &.e-dialog {
      .e-dlg-header-content {
        padding: $fe-big-dg-header-font-size;
      }
      td {
        @include ellipsis;
        font-size: $fe-big-dg-td-font-size;
        max-width: 205px;
        min-width: 45px;
        padding: $fe-big-dg-td-padding;
      }
    }
  }
  
  .e-bigger .e-filemanager,
  .e-filemanager.e-bigger {

    .e-toolbar {

      @if ($fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2') {
        @include toolbar-height($fe-big-tb-height, $fe-big-tb-height);
        .e-toolbar-item:not(.e-separator) {
          min-height: $fe-big-tb-height;
          padding: 4px;
        }
      }

      .e-popup-up-icon.e-icons,
      .e-popup-down-icon.e-icons,
      .e-toolbar-items .e-toolbar-item .e-btn-icon.e-icons {
        font-size: $fe-mobile-icon-font-size;
      }

      .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn {
        &.e-tbar-btn {
          padding: $fe-big-tb-ddb-btn-padding;

          &.e-active,
          &:hover,
          &:focus {
            padding: $fe-big-tb-ddb-btn-hvr-padding;
          }
        }

        &.e-tbar-btn .e-btn-icon.e-icons.e-caret {
          @if $fm-skin-name == 'tailwind' {
            font-size: 22px;
            @include icon-style(22px, 22px, 4px 4px 0);
            padding: $fe-big-tb-caret-icon-padding;
          }
          @else {
            padding: $fe-big-tb-caret-icon-padding;
          }
        }
      }

      .e-toolbar-pop .e-toolbar-item .e-dropdown-btn .e-btn-icon.e-icons.e-caret {
        padding: $fe-big-tb-popup-caret-icon-padding;
      }
    }
    @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
      .e-fe-clone {
        .e-fe-content {
          .e-fe-name {
            font-size: $text-base;
            line-height: 24px;
            margin: 7px 12px 7px 0;
          }

          .e-fe-icon {
            @include icon-style(24px, 24px, 7px 12px);
          }
        }

        .e-fe-count {
          font-size: $text-sm;
          @include size(24px, 24px);
          line-height: 22px;
        }
      }
    }

    .e-treeview {

      & > .e-ul {
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
          padding-left: $fe-big-treeview-ul-padding-left;
        }
      }

      @if $fm-skin-name == 'tailwind3' {
        .e-list-icon {
          height: $fe-bigger-treeview-list-icon-height;
          width: $fe-bigger-treeview-list-icon-width;
        }
      }

      .e-list-parent .e-list-item {
        .e-fullrow {
          height: $fe-big-tv-fullrow-height;
        }
        .e-list-text {
          height: $fe-big-tv-node-height;
          line-height: $fe-big-tv-node-lheight;
        }
      }

      .e-text-content {
        @if ($fm-skin-name == 'tailwind3') {
          height: $fe-big-tv-fullrow-height;
        }
      }
    }

    .e-address {
      height: $fe-big-address-height;

      .e-breadcrumb-menu .e-breadcrumb-submenu {
        height: $fe-big-bc-submenu-height;
        @if $fm-skin-name == 'material-dark' {
          margin-top: -3px;
        }
      }

      .e-address-list-item {
        @if ($fm-skin-name != 'Material3') {
          height: $fe-big-bc-li-item-height;
        }
        .e-icons {
          font-size: $fe-big-bc-icon-font-size;
          @if ($fm-skin-name == 'tailwind3') {
            margin: $fe-big-bc-icon-margin;
          }
        }
      }

      .e-addressbar-ul {
        padding: $fe-big-bc-padding;
      }

      .e-list-text {
        font-size: $fe-big-bc-font-size;
        line-height: $fe-big-bc-text-size;
        padding: $fe-big-bc-text-padding;
      }

      .e-search-wrap {
        min-width: 51px;
        padding: $fe-big-search-padding;

        .e-input-group {
          height: $fe-big-search-height;

          .e-input:focus {
            padding: $fe-padding-none;
          }

          .e-input {
            @if ($fm-skin-name == 'material' or $fm-skin-name == 'material-dark') {
              height: 39px;
            }
            @else if ($fm-skin-name == 'FluentUI') {
              height: 30px;
            }
            @else if ($fm-skin-name == 'Material3') {
              margin: $fe-big-search-input-margin;
              height: $fe-big-search-input-height;
            }
          }

          .e-clear-icon::before {
            @if ($fm-skin-name == 'bootstrap5') {
              margin: $fe-margin-none;
            }
          }
        }
      }

      .e-fe-search {
        @if $fm-skin-name == 'tailwind' {
          font-size: 16px;
          margin: 7px 4px;
        }
        @else if $fm-skin-name == 'bootstrap5' {
          font-size: 16px;
          margin: 4px;
        }
        @else if $fm-skin-name == 'FluentUI' {
          font-size: 18px;
          margin: 3px;
        }
        @else if $fm-skin-name == 'Material3' {
          @include margin-padding($fe-search-icon-margin, $fe-big-search-input-padding);
        }
        @else if ($fm-skin-name == 'tailwind3') {
          font-size: $fe-bigger-search-font-size;
          line-height: $fe-bigger-search-line-height;
          margin: $fe-big-address-search-margin;
          padding: $fe-big-address-search-padding;
        }
        @else {
          margin: 7px 0;
        }
      }
    }

    .e-fe-splitter {
      height: calc(#{$fe-full-height} - #{if($fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2', $fe-big-tb-height + 1px, $fe-big-tb-height)});
    }

    .e-view-container .e-fe-grid-container {
      height: calc($fe-full-height - $fe-big-address-height);
    }

    .e-grid {
      @include checkbox($fe-big-cb-line-height);
      @if $fm-skin-name == 'tailwind3' {
        .e-checkbox-wrapper .e-frame {
          margin: $fe-margin-none;
        }
      }
      .e-gridheader {
        .e-headercell {
          height: $fe-big-grid-header-height;
          @if $fm-skin-name == 'fluent2' {
            .e-headercelldiv.e-headerchkcelldiv {
              margin-left: -6px;
            }
          }
        }
        .e-headertext {
          font-size: $fe-big-grid-header-font-size;
        }
      }

      .e-gridheader,
      .e-gridcontent {

        .e-rowcell {
          font-size: $fe-big-grid-content-font-size;

          @if $fm-skin-name == 'Material3' {
            padding: 14px 12px;
            line-height: 20px;
  
            .e-fe-text {
              font-size: $fe-grid-content-name-font-size;
              line-height: 20px;
            }
          }
          .e-fe-text {
            font-size: $fe-big-grid-content-name-font-size;
          }
        }

        .e-fe-checkbox {
          padding-left: $fe-big-grid-content-checkbox-padding-left;
        }

        .e-fe-grid-icon {
          @if $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'tailwind' {
            padding-left: $fe-big-grid-icon-padding-left;
          }
          @else {
            padding-left: $fe-big-grid-icon-padding-left;
          }
        }
      }

      .e-content {
        tr.e-row.e-fe-drop-folder .e-rowcell {
          @if $fm-skin-name == 'tailwind' {
            padding-bottom: 11px;
            padding-top: 11px;
          }
        }
      }

      .e-fe-icon {
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'tailwind3' {
          @include size($fe-mobile-grid-icon-height, 24px);
        }
        @else {
          margin: $fe-big-grid-icon-margin;
        }
      }

      @include empty-style($fe-big-grid-empty-min-width, $fe-big-grid-empty-content-font-size, $fe-big-grid-empty-content-margin, $fe-big-grid-empty-content-padding, $fe-big-grid-empty-content-text-align, $fe-big-grid-empty-icon-height, $fe-big-grid-empty-icon-width, $fe-big-grid-empty-icon-margin, $fe-big-grid-empty-inner-content-font-size, $fe-big-grid-empty-inner-content-margin, $fe-big-grid-empty-inner-content-padding, $fe-big-grid-empty-inner-content-text-align);

      .e-empty-inner-content {
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'tailwind3' and $fm-skin-name != 'bootstrap5' {
          opacity: $fe-big-grid-empty-inner-content-opacity;
        }
      }

      &.e-rtl .e-checkbox-wrapper .e-frame {
        @if $fm-skin-name == 'FluentUI' {
          margin-right: $fe-big-rtl-grid-checkbox-wrapper-margin-right;
        }
        @else{
          margin-right: $fe-big-rtl-grid-checkbox-wrapper-margin-right;
        }
      }
    }

    .e-large-icons {
      @include checkbox($fe-big-cb-line-height);
      height: calc($fe-full-height - $fe-big-address-height);

      .e-list-parent {
        padding: $fe-big-lg-padding;
      }

      .e-list-item {
        @include icon-style($fe-big-lg-item-height, $fe-big-lg-item-width, $fe-big-lg-item-margin);
      }

      .e-text-content {
        height: $fe-big-lg-item-inner-height;
      }

      .e-list-text {
        @if ($fm-skin-name == 'tailwind3') {
          line-height: $fe-bigger-list-text-line-height;
        }
        font-size: $fe-big-lg-text-font-size;
        padding: $fe-big-lg-text-padding;
        width: $fe-big-lg-text-inner-width;
      }

      .e-list-img {
        max-height: $fe-big-lg-img-height;
        max-width: $fe-big-lg-item-inner-width;
      }

      .e-list-icon {
        @include icon-style($fe-big-lg-icon-height, $fe-big-lg-icon-width, $fe-big-lg-icon-margin);
      }

      @include empty-style($fe-big-lg-icon-empty-min-width, $fe-big-lg-icon-empty-content-font-size, $fe-big-lg-icon-empty-content-margin, $fe-big-lg-icon-empty-content-padding, $fe-big-lg-icon-empty-content-text-align, $fe-big-lg-icon-empty-icon-height, $fe-big-lg-icon-empty-icon-width, $fe-big-lg-icon-empty-icon-margin, $fe-big-lg-icon-empty-inner-content-font-size, $fe-big-lg-icon-empty-inner-content-margin, $fe-big-lg-icon-empty-inner-content-padding, $fe-big-lg-icon-empty-inner-content-text-align);

      .e-empty-inner-content {
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'tailwind3' {
          opacity: $fe-big-lg-icon-empty-inner-content-opacity;
        }
      }
    }

    &.e-rtl {

      .e-treeview > .e-ul {
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
          padding: $fe-big-rtl-grid-treeview-ul-padding;
        }
      }

      @if $fm-skin-name =='Material3' {
        .e-address {
          .e-search-wrap .e-input-group .e-input {
            margin: $fe-big-rtl-search-input-margin;
          }

          .e-fe-search {
            padding: $fe-big-rtl-search-input-padding;
          }
        }
      }

      @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
        .e-fe-clone .e-fe-name {
          margin: 7px 0 7px 12px;
        }
      }

      .e-grid {

        .e-gridheader,
        .e-gridcontent {

          .e-fe-checkbox {
            padding-right: $fe-big-rtl-grid-checkbox-padding-right;
          }
        }
      }
    }

    .e-fe-overlay {
      height: $fe-big-overlay-height;
      @if $fm-skin-name == 'fluent2' {
        height: calc(100% - 88px);
      }
    }
  }

  .e-filemanager.e-fe-no-toolbar.e-fe-mobile,
  .e-bigger .e-filemanager.e-fe-no-toolbar {
    .e-fe-splitter {
      height: $fe-bigger-splitter-height;
    }
  }
  
  @media (max-width: 469px) {
    .e-bigger .e-filemanager,
    .e-filemanager.e-bigger {
      &.e-fe-mobile .e-large-icons .e-list-parent .e-list-item {
        min-width: $fe-mobile-lg-item-minwidth;
        width: $fe-mobile-lg-item-width-two;
      }
    }
  }

  @media (min-width: 470px) and (max-width: 625px) {
    .e-bigger .e-filemanager,
    .e-filemanager.e-bigger {
      &.e-fe-mobile .e-large-icons .e-list-parent .e-list-item {
        min-width: $fe-mobile-lg-item-minwidth;
        width: $fe-mobile-lg-item-width-three;
      }
    }
  }

  @media (min-width: 360px) and (max-width: 500px) {
    @if $skin-name == 'FluentUI' {
      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
        position: relative;
        right: 1px;
      }
    }
  }
}