@import '../../base/tailwind-dark.scss';
@import '../../popups/spinner/tailwind-dark.scss';
@import '../../buttons/button/tailwind-dark.scss';
// uploader bootstrap theme
$zero-value: 0 !default;
$upload-root-font-family: $font-family !default;
$upload-element-opacity: $zero-value !default;
$upload-element-width: $zero-value !default;
$select-file-margin: $zero-value !default;
$select-file-padding: $zero-value !default;
$list-items-font-size: $text-sm !default;
$list-item-height: 35px !default;
$list-item-margin-right: 90px !default;
$list-item-name-width: 75% !default;
$progress-bar-wrapper-height: 4px !default;
$progress-bar-height: 90% !default;
$delete-icon-opacity: 1 !default;
$float-right: right !default;
$float-left: left !default;
$right: 100% !default;
$file-status-rtl-top-margin: 7% !default;
$remove-icon-height: 20px !default;
$remove-icon-width: 20px !default;
$remove-bigger-icon-height: 24px !default;
$remove-bigger-icon-width: 24px !default;
$remove-icon-before: 4px !default;
$file-size-top: $zero-value !default;
$action-buttons-margin: 10px !default;
$file-status-rtl: 30px !default;
$progress-inner-wrap-height: 4px !default;
$progress-inner-wrap-top: 3px !default;
$progress-bar-wrap-top: 34px !default;
$file-status-top-bigger: 35px !default;
$file-drop-rtl-smaller: -10px !default;
$file-drop-rtl-bigger: -10px !default;
$footer-height: 50px !default;
$footer-height-smaller: 30px !default;
$footer-buttons-height: 46px !default;
$footer-buttons-height-bigger: 62px !default;
$file-name-top: $zero-value !default;
$file-container-top-bigger: $zero-value !default;
$remove-icon-rtl: 20px !default;
$reload-btn-right: 36px !default;
$icons-small-ie-padding: 18px 13px 18px 23px !default;
$icons-bigger-ie-padding: 20px 17px 20px 26px !default;

// Smaller values
$list-items-font-size-smaller: $text-sm !default;
$list-items-height-smaller: 60px !default;
$list-item-status-margin-smaller: 8px !default;
$progress-bar-top-smaller: $zero-value !default;
$progress-bar-wrapper-height-smaller: 10px !default;
$file-status-top-smaller: 19px !default;
$list-item-status-top-smaller: 10px !default;
$file-size-top-smaller: 10px !default;
$file-size-left-smaller: 10px !default;
$file-type-top-smaller: $zero-value !default;
$file-size-rtl-right: 10px !default;
$list-item-size-top: 30px !default;
$file-container-height: 100% !default;
$progress-bar-paddding: 6px 6px !default;
$remove-icon-before-bigger: 15px !default;

// Smaller RTL values
$file-status-rtl-smaller: 21px !default;
$progress-bar-wrap-top-smaller: 23px !default;
$rtl-progress-left-smaller: -23px !default;
$remove-icon-top-bigger: 10px !default;
$file-container-top: $zero-value !default;

// themes files
$progress-bar-transition: width 2s !default;
$progress-text-rtl-smaller: 0 !default;
$pause-play-button-right-value: 36px !default;
$pause-play-button-right-value-bigger: 45px !default;
$pause-play-button-right-value-bigger-rtl: 41px !default;
$file-container-left: 60px !default;
$ie-icons-position-value: 10px !default;
$ie-abort-icon-position-value: 12px !default;

$upload-font-family: inherit !default;
$drop-area-font-size-smaller: $text-sm !default;
$drop-area-font-size: $text-base !default;
$drop-zone-margin: 3px !default;
$header-padding: 12px 0 12px 12px !default;
$drop-area-padding-left: 16px !default;
$drop-area-padding-left-smaller: 12px !default;
$file-name-font-size-smaller: $text-sm !default;
$file-name-font-size: $text-base !default;
$list-item-status-font-size-smaller: $text-sm !default;
$list-item-status-font-size: $text-base !default;
$list-item-file-size-font-size-smaller: $text-xs !default;
$list-item-file-size-font-size: $text-sm !default;
$list-item-status-bigger-font-size: $text-sm !default;
$list-item-margin-left-smaller: 12px !default;
$list-item-margin-left: 12px !default;
$list-line-height: 24px !default;
$list-line-height-smaller: 22px !default;
$remove-icon-margin: 16px !default;
$remove-icon-margin-smaller: 12px !default;
$action-buttons-margin-smaller: 8px !default;
$footer-buttons-margin: 12px !default;
$delete-icon-padding-smaller: 15px !default;
$delete-icon-padding: 24px !default;
$remove-icon-right: $zero-value !default;
$remove-icon-top-smaller: 50% !default;
$remove-icon-before-left: 9px !default;
$remove-icon-before-top: 9px !default;
$remove-icon-margin-top: -24px !default;
$file-name-padding-top-smaller: 8px !default;
$file-name-padding-top: 12px !default;
$file-size-padding: 2px $zero-value !default;
$file-size-padding-smaller: 2px $zero-value !default;
$progress-bar-wrapper-width: 95% !default;
$progress-bar-top-paddding: 6px !default;
$progress-bar-bottom-paddding: 11px !default;
$progress-bar-text-right-smaller: $zero-value !default;
$progress-bar-text-top-smaller: -33px !default;
$li-min-height: 82px !default;
$inner-wrap-radius: 4px !default;
$progress-bar-radius: 4px !default;
$progress-inner-wrap-height-smaller: 4px !default;
$progress-bar-height-smaller: 4px !default;
$remove-icon-before-left-bigger: 12px !default;
$remove-icon-before-top-bigger: 12px !default;
$list-items-height: 96px !default;
$progress-bar-text-right: 16px !default;
$progress-bar-text-top: -36px !default;
$progress-bar-wrapper-width-bigger: 95% !default;
$header-padding-rtl-bigger: 20px 15px 20px $zero-value !default;
$header-padding-bigger: 16px 0 16px 16px !default;
$margin-rtl-header: $zero-value !default;
$margin-rtl: 15px !default;
$remove-icon-rtl-bigger: $zero-value !default;
$progress-bar-width-rtl: 86% !default;
$header-padding-rtl-smaller: 16px 12px 16px $zero-value !default;
$margin-rtl-header-smaller: $zero-value !default;
$margin-rtl-smaller: 11px !default;
$left: $zero-value !default;
$rtl-progress-top: -32px !default;
$remove-icon-rtl-top-smaller: 50% !default;
$file-name-font-family: inherit !default;
$remove-icon-top: 50% !default;
$remove-icon-font-size-smaller: $font-icon-18 !default;
$remove-icon-font-size: $font-icon-22 !default;
$delete-icon-font-size: $font-icon-22 !default;
$abort-icon-font-size: $font-icon-22 !default;
$delete-icon-font-size-smaller: $font-icon-18 !default;
$abort-icon-font-size-smaller: $font-icon-18 !default;
$upload-border-radius: 6px !default;
$remove-icon-padding-smaller: 10px !default;
$remove-icon-margin-top-smaller: -9px !default;
$uploader-icons-hover-radius: 50% !default;

// mouse small
$header-padding-small: 12px 0 12px 12px !default;
$drop-area-small-font-size: $text-xs !default;
$file-small-name-font-size: $text-xs !default;
$file-small-name-padding-top: 12px !default;
$list-small-item-status-font-size: $text-xs !default;
$file-small-size-padding: 6px 0 !default;
$remove-small-icon-font-size: $font-icon-10 !default;
$remove-small-icon-height: 24px !default;
$delete-small-icon-padding: 12px !default;
$remove-small-icon-width: 24px !default;
$progress-bar-bottom-paddding-small: 2px !default;
$drop-small-area-padding-left: 10px !default;
$li-min-height-small: 79px !default;
$header-padding-rtl-small: 12px 12px 12px 0 !default;

// form upload
$form-upload-file-name-line-height: 1.5 !default;
$form-upload-file-list-height: $list-item-height !default;
$form-upload-file-list-padding-top: $file-name-padding-top - 4 !default;
$form-upload-file-list-padding-bottom: $file-name-padding-top !default;
$form-upload-file-name-padding: 4px !default;
$form-upload-file-status-font-size: $list-item-status-font-size-smaller !default;
$form-upload-remove-icon-top: 42px !default;
$form-upload-bigger-remove-icon-top: 38px !default;
$form-upload-small-remove-icon-top: 42px !default;

// form upload - bigger
$form-upload-bigger-file-name-line-height: 1.5 !default;
$form-upload-bigger-file-list-height: $list-item-height !default;
$form-upload-bigger-file-list-padding-top: $file-name-padding-top - 4 !default;
$form-upload-bigger-file-list-padding-bottom: $file-name-padding-top !default;
$form-upload-bigger-file-name-padding: 4px !default;
$form-upload-bigger-file-status-font-size: $list-item-status-font-size !default;

// form upload - small
$form-upload-small-file-name-line-height: 1.5 !default;
$form-upload-small-file-list-height: $list-item-height !default;
$form-upload-small-file-list-padding-top: $file-small-name-padding-top - 4 !default;
$form-upload-small-file-list-padding-bottom: $file-small-name-padding-top !default;
$form-upload-small-file-name-padding: 4px !default;
$form-upload-small-file-status-font-size: $list-item-status-font-size-smaller !default;

// color

$remove-icon-color: $icon-color !default;
$upload-hover-icon-color: $icon-color-hover !default;
$disabled-state: $icon-color-disabled !default;
$remove-icon-disabled-color:  $zero-value !default;
$drop-text-color: $content-text-color !default;
$file-drop-text-color: $content-text-color-alt2 !default;
$file-status-color: $content-text-color-alt2 !default;
$progress-text-color: $content-text-color-alt3 !default;
$file-size-color: $content-text-color-alt3 !default;
$upload-success-color: $success !default;
$upload-failure-color: $danger !default;
$upload-in-progress-color: $primary !default;
$progress-background-color: $content-bg-color-alt3 !default;
$progress-text-color: $content-text-color-alt2 !default;
$clear-icon-focus-color: rgba($black, .12) !default;
$list-bottom-border: 1px solid $border-light !default;
$upload-border: 1px dashed $border-dark !default;
$drag-hover-border: 2px dashed $primary !default;

// Upload flat button custom styling
$upload-btn-tap-highlight: transparent !default;
$upload-flat-btn-bgcolor: $secondary-bg-color !default;
$upload-flat-btn-border-color: $secondary-border-color !default;
$upload-flat-btn-box-shadow: $shadow-sm !default;
$upload-flat-btn-color: $secondary-text-color !default;

// Upload primary button custom styling
$upload-btn-primary-bgcolor: $primary-bg-color !default;
$upload-btn-primary-border-color: $primary-border-color !default;
$upload-btn-primary-color: $primary-text-color !default;

// uploader layout styles
@include export-module('uploader-layout') {
  // For bigger class UI
  

  // For Desktop view

  .e-upload {
    width: 100%;

    #{if(&, '&', '*')}.e-control-wrapper {
      font-family: $upload-root-font-family;
    }

    .e-hidden-file-input {
      border: 0;
      height: 0;
      margin: 0;
      outline: none;
      padding: 0;
      text-indent: 0;
      visibility: hidden;
      width: 0;
    }

    .e-file-select-wrap {
      padding: $header-padding;

      .e-file-select,
      .e-file-select .e-uploader {
        display: inline-block;
        width: $upload-element-width;
      }

      .e-file-select .e-uploader {
        opacity: $upload-element-opacity;
      }

      #{if(&, '&', '*')} .e-file-drop {
        font-family: $upload-font-family;
        font-size: $drop-area-font-size-smaller;
        margin-left: $drop-area-padding-left-smaller;
      }
    }

    #{if(&, '&', '*')}.e-form-upload .e-upload-files {
      #{if(&, '&', '*')} .e-upload-file-list {
        min-height: $form-upload-file-list-height;
        padding-bottom: $form-upload-file-list-padding-bottom;
        padding-top: $form-upload-file-list-padding-top;

        #{if(&, '&', '*')} .e-file-container {
          top: 0;

          #{if(&, '&', '*')} .e-hidden-input {
            display: none;
          }

          #{if(&, '&', '*')} .e-file-name,
          #{if(&, '&', '*')} .e-file-type {
            line-height: $form-upload-file-name-line-height;
            padding-top: $form-upload-file-name-padding;
          }

          #{if(&, '&', '*')} .e-file-name.e-error,
          #{if(&, '&', '*')} .e-file-type.e-error,
          #{if(&, '&', '*')} .e-file-status.e-error {
            color: $upload-failure-color;
          }

          #{if(&, '&', '*')} .e-file-status,
          #{if(&, '&', '*')} .e-file-information {
            color: $file-size-color;
            display: block;
            font-size: $form-upload-file-status-font-size;
            line-height: $form-upload-file-name-line-height;
            padding-bottom: 0;
            padding-top: $form-upload-file-name-padding;
            position: relative;
          }
        }

        #{if(&, '&', '*')}.e-file-invalid {
          color: $upload-failure-color;

          #{if(&, '&', '*')} .e-file-name,
          #{if(&, '&', '*')} .e-file-type,
          #{if(&, '&', '*')} .e-file-status {
            color: $upload-failure-color;
          }
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
        box-sizing: border-box;
        top: $form-upload-remove-icon-top;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
        color: $disabled-state;
        cursor: not-allowed;
        opacity: .4;
        pointer-events: none;
      }
    }

    #{if(&, '&', '*')} .e-upload-files {
      list-style-type: none;
      margin: $select-file-margin;
      padding: $select-file-padding;

      .e-icons:focus {
        @if ($skin-name == 'material' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
          outline: none;
        }
      }

      .e-upload-file-list {
        font-family: $upload-font-family;
        font-size: $list-items-font-size-smaller;
        height: 100%;
        line-height: $list-line-height;
        @if $skin-name == 'tailwind' {
          line-height: $list-line-height-smaller;
        }
        min-height: $li-min-height;
        position: relative;

        .e-file-container {
          display: block;
          height: 100%;
          margin-left: $list-item-margin-left-smaller;
          margin-right: $list-item-margin-right;
          min-height: $list-item-height;
          position: relative;
          top: $file-container-top;

          .e-file-name {
            float: left;
            font-family: $file-name-font-family;
            font-size: $file-name-font-size-smaller;
            max-width: $list-item-name-width;
            overflow: hidden;
            padding-top: $file-name-padding-top-smaller;
            position: relative;
            text-overflow: ellipsis;
            top: $file-name-top;
            white-space: nowrap;
          }

          .e-file-name::before {
            content: attr(data-tail);
            float: right;
          }

          #{if(&, '&', '*')} .e-file-type {
            display: block;
            font-family: $file-name-font-family;
            font-size: $file-name-font-size-smaller;
            padding-top: $file-name-padding-top-smaller;
          }

          #{if(&, '&', '*')} .e-file-type.e-hidden {
            visibility: hidden;
          }

          #{if(&, '&', '*')} .e-file-size {
            display: block;
            font-size: $list-item-status-font-size-smaller;
            padding: $file-size-padding-smaller;
            @if $skin-name == 'tailwind' {
              font-size: $list-item-file-size-font-size-smaller;
              line-height: 18px;
            }
          }

          #{if(&, '&', '*')} .e-file-status,
          #{if(&, '&', '*')} .e-file-information {
            display: block;
            font-family: $upload-font-family;
            font-size: $list-item-status-font-size-smaller;
            padding-bottom: $file-name-padding-top-smaller;

            #{if(&, '&', '*')}.e-upload-progress {
              display: none;
            }
          }

          #{if(&, '&', '*')} .e-upload-progress-wrap {
            display: block;
            height: $progress-bar-wrapper-height-smaller;
            padding-bottom: $progress-bar-bottom-paddding;
            padding-top: $progress-bar-top-paddding;
            position: absolute;
            width: $progress-bar-wrapper-width;

            #{if(&, '&', '*')} .e-progress-inner-wrap {
              border-radius: $inner-wrap-radius;
              display: block;
              height: $progress-inner-wrap-height-smaller;
              width: 100%;

              #{if(&, '&', '*')} .e-upload-progress-bar {
                border-radius: $progress-bar-radius;
                display: inherit;
                height: $progress-bar-height-smaller;
              }
            }

            #{if(&, '&', '*')} .e-progress-bar-text {
              float: right;
              font-family: $upload-font-family;
              font-size: $list-item-status-font-size-smaller;
              position: relative;
              right: $progress-bar-text-right-smaller;
              top: $progress-bar-text-top-smaller;
            }
          }
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons {
        align-items: center;
        box-sizing: border-box;
        cursor: pointer;
        display: inline-flex;
        font-size: $remove-icon-font-size-smaller;
        height: $remove-icon-height;
        justify-content: center;
        margin: $remove-icon-margin-smaller;
        margin-top: $remove-icon-margin-top-smaller;
        padding: $remove-icon-padding-smaller;
        position: absolute;
        right: $remove-icon-right;
        top: $remove-icon-top-smaller;
        vertical-align: middle;
        width: $remove-icon-width;

        #{if(&, '&', '*')}.e-upload-progress {
          cursor: default;
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
        color: $disabled-state;
        cursor: not-allowed;
        opacity: .4;
        pointer-events: none;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-msie.e-icons {
        padding: $icons-small-ie-padding;
      }

      #{if(&, '&', '*')} .e-file-pause-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons {
        right: $pause-play-button-right-value;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons:hover,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons:not(.e-disabled):hover,
      #{if(&, '&', '*')} .e-clear-icon-focus {
        @if $skin-name == 'Material3' {
          background: $clear-icon-focus-color;
        }
        @if $skin-name == 'fluent2' {
          color: $primary;
        }
        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
          background-color: $clear-icon-focus-color;
        }
        border-color: transparent;
        border-radius: $uploader-icons-hover-radius;
        box-shadow: 0 0 0 transparent;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons:focus,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons:not(.e-disabled):focus,
      #{if(&, '&', '*')} .e-clear-icon-focus {
        border-radius: $uploader-icons-hover-radius;
      }

      #{if(&, '&', '*')} .e-file-delete-btn.e-icons {
        font-size: $delete-icon-font-size-smaller;
        opacity: $delete-icon-opacity;
      }

      #{if(&, '&', '*')} .e-file-abort-btn.e-icons {
        font-size: $abort-icon-font-size-smaller;
        opacity: $delete-icon-opacity;
      }
    }

    #{if(&, '&', '*')} .e-file-select-wrap .e-btn,
    #{if(&, '&', '*')} .e-upload-actions .e-btn {
      font-family: $upload-font-family;
      @if $skin-name == 'tailwind3' {
        font-weight: 600;
      }
    }

    #{if(&, '&', '*')} .e-upload-actions {
      position: relative;
      text-align: right;

      .e-file-upload-btn {
        @if ($skin-name == 'bootstrap4' or $skin-name == 'FluentUI') {
          margin: $action-upload-buttons-margin-smaller;
        }
        @else if ($skin-name != 'bootstrap4' and $skin-name != 'FluentUI') {
          margin: $action-buttons-margin-smaller;
        }
      }

      .e-file-clear-btn {
        @if ($skin-name == 'bootstrap4' or $skin-name == 'FluentUI') {
          margin: $action-clear-buttons-margin-smaller;
        }
        @else if ($skin-name != 'bootstrap4' and $skin-name != 'FluentUI') {
          margin: $action-buttons-margin-smaller;
        }
      }
    }

    #{if(&, '&', '*')}.e-rtl {
      #{if(&, '&', '*')} .e-file-select-wrap {
        padding: $header-padding-rtl-smaller;

        #{if(&, '&', '*')} .e-control {
          #{if(&, '&', '*')}.e-btn {
            margin-right: $margin-rtl-header-smaller;
          }
        }

        #{if(&, '&', '*')} .e-file-drop {
          margin-left: $file-container-left;
          margin-right: $drop-area-padding-left-smaller;
          position: relative;
        }
      }

      #{if(&, '&', '*')} .e-upload-actions {
        text-align: $float-left;

        .e-file-upload-btn {
          @if $skin-name == 'FluentUI' {
            margin: $action-upload-buttons-margin-smaller-rtl;
          }
        }

        .e-file-clear-btn {
          @if $skin-name == 'FluentUI' {
            margin: $action-clear-buttons-margin-smaller-rtl;
          }
        }
      }

      #{if(&, '&', '*')} .e-upload-files {
        #{if(&, '&', '*')} .e-upload-file-list {
          #{if(&, '&', '*')} .e-file-container {
            height: $file-container-height;
            margin-left: $file-container-left;
            margin-right: $margin-rtl-smaller;
            position: relative;

            #{if(&, '&', '*')} .e-rtl-container {
              direction: ltr;
              float: $float-right;
              width: $file-container-height;
            }

            #{if(&, '&', '*')} .e-file-type {
              float: $float-right;
            }

            #{if(&, '&', '*')} .e-file-name {
              float: $float-right;
            }

            #{if(&, '&', '*')} .e-file-size {
              direction: ltr;
              float: $float-right;
              position: relative;
              text-align: right;
              width: $file-container-height;
            }

            #{if(&, '&', '*')} .e-upload-progress-wrap {
              float: $float-right;
              position: initial;
              top: $progress-bar-wrap-top-smaller;
              width: $progress-bar-width-rtl;

              #{if(&, '&', '*')} .e-progress-bar-text {
                float: $float-left;
                right: $progress-text-rtl-smaller;
                top: $rtl-progress-top;
              }
            }
          }

          #{if(&, '&', '*')} .e-file-remove-btn,
          #{if(&, '&', '*')} .e-file-delete-btn,
          #{if(&, '&', '*')} .e-file-abort-btn,
          #{if(&, '&', '*')} .e-file-reload-btn,
          #{if(&, '&', '*')} .e-file-pause-btn,
          #{if(&, '&', '*')} .e-file-play-btn {
            #{if(&, '&', '*')}.e-icons {
              left: $left;
              margin-left: $margin-rtl-smaller;
              margin-right: $margin-rtl-smaller;
              right: auto;
              top: $remove-icon-rtl-top-smaller;
              @if $skin-name == 'FluentUI' {
                margin-left: $margin-icon-rtl-smaller;
                margin-right: $margin-icon-rtl-smaller;
              }
            }
          }

          #{if(&, '&', '*')} .e-file-reload-btn {
            #{if(&, '&', '*')}.e-icons {
              left: $reload-btn-right;
              right: auto;
            }
          }

          #{if(&, '&', '*')} .e-file-play-btn,
          #{if(&, '&', '*')} .e-file-reload-btn,
          #{if(&, '&', '*')} .e-file-pause-btn {
            #{if(&, '&', '*')}.e-icons {
              left: $pause-play-button-right-value;
            }
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-disabled {
      #{if(&, '&', '*')} .e-file-drop {
        color: $disabled-state;
      }

      #{if(&, '&', '*')} .e-upload-files {
        .e-upload-file-list {
          #{if(&, '&', '*')} .e-file-container .e-file-name,
          #{if(&, '&', '*')} .e-file-container .e-file-type,
          #{if(&, '&', '*')} .e-file-container .e-file-size,
          #{if(&, '&', '*')} .e-file-container .e-file-status,
          #{if(&, '&', '*')} .e-file-container .e-file-information {
            color: $disabled-state;
          }
        }
      }
    }

    .e-content-placeholder.e-upload.e-placeholder-upload {
      background-size: 400px 65px;
      min-height: 65px;
    }
  }

  .e-small {
    .e-upload {
      .e-file-select-wrap {
        padding: $header-padding-small;

        #{if(&, '&', '*')} .e-file-drop {
          font-size: $drop-area-small-font-size;
          margin-left: $drop-small-area-padding-left;
        }
      }

      #{if(&, '&', '*')} .e-upload-files {
        .e-upload-file-list {
          min-height: $li-min-height-small;

          .e-file-container .e-file-name {
            font-size: $file-small-name-font-size;
            padding-top: $file-small-name-padding-top;
          }

          .e-file-container .e-file-size {
            font-size: $list-small-item-status-font-size;
            padding: $file-small-size-padding;
          }

          .e-file-container .e-file-type {
            font-size: $file-small-name-font-size;
            padding-top: $file-small-name-padding-top;
          }

          .e-file-container .e-file-status,
          .e-file-container .e-file-information {
            padding-bottom: $file-small-name-padding-top;
          }

          .e-file-container .e-upload-progress-wrap {
            padding-bottom: $progress-bar-bottom-paddding-small;
            padding-top: $progress-bar-bottom-paddding-small;
          }

          .e-file-container {
            @if $skin-name == 'FluentUI' {
              margin-left: $list-item-margin-left-small;
            }
          }
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
        #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
        #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
        #{if(&, '&', '*')} .e-file-play-btn.e-icons,
        #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
          font-size: $remove-small-icon-font-size;
          height: $remove-small-icon-height;
          padding: $delete-small-icon-padding;
          width: $remove-small-icon-width;
          @if $skin-name == 'FluentUI' {
            margin: $remove-icon-margin-small;
          }
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
          color: $disabled-state;
          cursor: not-allowed;
          opacity: .4;
          pointer-events: none;
        }
      }

      #{if(&, '&', '*')} .e-upload-actions {
        .e-file-upload-btn {
          @if $skin-name == 'FluentUI' {
            margin: $footer-upload-buttons-margin-small;
          }
        }

        .e-file-clear-btn {
          @if $skin-name == 'FluentUI' {
            margin: $footer-clear-buttons-margin-samll;
          }
        }
      }

      #{if(&, '&', '*')}.e-rtl {
        #{if(&, '&', '*')} .e-file-select-wrap {
          padding: $header-padding-rtl-small;
        }

        #{if(&, '&', '*')} .e-upload-actions {
          .e-file-upload-btn {
            @if $skin-name == 'FluentUI' {
              margin: $footer-upload-buttons-margin-rtl-small;
            }
          }

          .e-file-clear-btn {
            @if $skin-name == 'FluentUI' {
              margin: $footer-clear-buttons-margin-rtl-small;
            }
          }
        }

        #{if(&, '&', '*')} .e-upload-files {
          #{if(&, '&', '*')} .e-upload-file-list {
            #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
            #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
            #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
            #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
            #{if(&, '&', '*')} .e-file-play-btn.e-icons,
            #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
              @if $skin-name == 'FluentUI' {
                margin-left: $margin-icon-rtl-small;
                margin-right: $margin-icon-rtl-small;
              }
            }
          }
        }
      }

      #{if(&, '&', '*')}.e-form-upload .e-upload-files {
        #{if(&, '&', '*')} .e-upload-file-list {
          min-height: $form-upload-small-file-list-height;
          padding-bottom: $form-upload-small-file-list-padding-bottom;
          padding-top: $form-upload-small-file-list-padding-top;

          #{if(&, '&', '*')} .e-file-container {
            top: 0;

            #{if(&, '&', '*')} .e-hidden-input {
              display: none;
            }

            #{if(&, '&', '*')} .e-file-name,
            #{if(&, '&', '*')} .e-file-type {
              line-height: $form-upload-small-file-name-line-height;
              padding-top: $form-upload-small-file-name-padding;
            }

            #{if(&, '&', '*')} .e-file-name.e-error,
            #{if(&, '&', '*')} .e-file-type.e-error,
            #{if(&, '&', '*')} .e-file-status.e-error {
              color: $upload-failure-color;
            }

            #{if(&, '&', '*')} .e-file-status,
            #{if(&, '&', '*')} .e-file-information {
              color: $file-size-color;
              display: block;
              font-size: $form-upload-small-file-status-font-size;
              line-height: $form-upload-small-file-name-line-height;
              padding-bottom: 0;
              padding-top: $form-upload-small-file-name-padding;
              position: relative;
            }
          }

          #{if(&, '&', '*')}.e-file-invalid {
            color: $upload-failure-color;

            #{if(&, '&', '*')} .e-file-name,
            #{if(&, '&', '*')} .e-file-type,
            #{if(&, '&', '*')} .e-file-status {
              color: $upload-failure-color;
            }
          }
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
        #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
        #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
        #{if(&, '&', '*')} .e-file-play-btn.e-icons,
        #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
          box-sizing: border-box;
          top: $form-upload-small-remove-icon-top;
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
          color: $disabled-state;
          cursor: not-allowed;
          opacity: .4;
          pointer-events: none;
        }
      }
    }
  }
}


// uploader theme file
// uploader layout styles
@include export-module('uploader-theme') {

  .e-upload {
    border: $upload-border;
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
      border-radius: $upload-border-radius;
    }

    #{if(&, '&', '*')} .e-file-drop {
      color: $file-drop-text-color;
      vertical-align: middle;
    }

    #{if(&, '&', '*')} .e-upload-files {
      border-top: $list-bottom-border;

      .e-upload-file-list {
        border-bottom: $list-bottom-border;

        .e-file-container {

          .e-file-name {
            color: $drop-text-color;
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          .e-file-type {
            color: $drop-text-color;
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          .e-file-size {
            color: $file-size-color;
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          .e-file-status,
          .e-file-information {
            color: $drop-text-color;
            @if $skin-name == 'FluentUI' or $skin-name == 'tailwind' {
              color: $file-status-color;
            }
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          .e-file-status.e-upload-success {
            color: $upload-success-color;
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          .e-file-status.e-upload-fails {
            color: $upload-failure-color;
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          .e-file-status.e-validation-fails {
            color: $upload-failure-color;
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          #{if(&, '&', '*')} .e-progress-inner-wrap {
            @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
              background-color: $progress-background-color;
            }
            @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
              background: $progress-background-color;
            }

            #{if(&, '&', '*')} .e-upload-progress-bar {

              #{if(&, '&', '*')}.e-upload-progress {
                background: $upload-in-progress-color;
              }

              #{if(&, '&', '*')}.e-upload-success {
                background: $upload-success-color;
              }

              #{if(&, '&', '*')}.e-upload-failed {
                background: $upload-failure-color;
              }
            }
          }

          #{if(&, '&', '*')} .e-progress-bar-text {
            color: $drop-text-color;
            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              color: $progress-text-color;
            }
          }
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons {
        color: $remove-icon-color;

        #{if(&, '&', '*')}:hover {
          color: $upload-hover-icon-color;
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons:focus,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons:not(.e-disabled):focus,
      #{if(&, '&', '*')} .e-clear-icon-focus {
        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
          background-color: $clear-icon-focus-color;
        }
        @if $skin-name == 'Material3' {
          background: $clear-icon-focus-color;
        }
        @if $skin-name == 'fluent2' {
          color: $primary;
        }
        border-color: transparent;
        box-shadow: 0 0 0 transparent;
      }
    }
  }

  .e-upload-drag-hover {
    @if $skin-name == 'FluentUI' or $skin-name == 'tailwind' {
      border-color: transparent;
    }
  }

  .e-upload .e-upload-actions .e-file-clear-btn.e-flat:not(:hover) {
    @if $skin-name == 'tailwind' {
      /* stylelint-disable property-no-vendor-prefix */
      -webkit-tap-highlight-color: $upload-btn-tap-highlight;
      background-color: $upload-flat-btn-bgcolor;
      border-color: $upload-flat-btn-border-color;
      box-shadow: $upload-flat-btn-box-shadow;
      color: $upload-flat-btn-color;
    }
  }

  .e-upload .e-upload-actions .e-file-upload-btn.e-flat.e-primary:not(:hover) {
    @if $skin-name == 'tailwind' {
      -webkit-tap-highlight-color: $upload-btn-tap-highlight;
      background-color: $upload-btn-primary-bgcolor;
      border-color: $upload-btn-primary-border-color;
      color: $upload-btn-primary-color;
    }
  }
}


@include export-module('uploader-bootstrap4-icons') {
  .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
    content: '\e7e7';
  }

  .e-upload .e-upload-files .e-icons.e-file-pause-btn::before {
    content: '\e77b';
  }

  .e-upload .e-upload-files .e-icons.e-file-reload-btn::before {
    content: '\e706';
  }

  .e-upload .e-upload-files .e-icons.e-file-play-btn::before {
    content: '\e70c';
  }

  .e-upload .e-upload-files .e-file-delete-btn.e-icons::before {
    content: '\e820';
  }

  .e-upload .e-upload-files .e-file-abort-btn.e-icons::before {
    content: '\e81b';
  }

  .e-upload .e-upload-files .e-icons.e-msie::before {
    position: relative;
    right: $ie-icons-position-value;
  }

  .e-upload .e-upload-files .e-icons.e-file-abort-icon.e-msie::before {
    right: $ie-abort-icon-position-value;
  }
}

@include export-module('uploader-bigger') {

  .e-bigger {
    .e-upload {
      width: 100%;
      @if $skin-name == 'FluentUI' {
        border-radius: $upload-border-radius-bigger;
      }

      .e-file-select-wrap {
        padding: $header-padding-bigger;

        #{if(&, '&', '*')} .e-file-drop {
          font-size: $drop-area-font-size;
          margin-left: $drop-area-padding-left;
        }
      }

      #{if(&, '&', '*')} .e-upload-files {

        .e-upload-file-list {
          font-size: $list-items-font-size;
          line-height: $list-line-height;
          min-height: $list-items-height;

          .e-file-container {
            margin-left: $list-item-margin-left;
            top: $file-container-top-bigger;
          }

          .e-file-container .e-file-name {
            font-size: $file-name-font-size;
            padding-top: $file-name-padding-top;
          }

          .e-file-container .e-file-size {
            font-size: $list-item-status-font-size;
            @if $skin-name == 'tailwind' {
              font-size: $list-item-file-size-font-size;
              line-height: 22px;
            }
            padding: $file-size-padding;
          }

          .e-file-container .e-file-type {
            font-size: $file-name-font-size;
            padding-top: $file-name-padding-top;
            top: initial;
          }

          .e-file-container .e-file-status,
          .e-file-container .e-file-information {
            font-size: $list-item-status-font-size;
            padding-bottom: $file-name-padding-top;
          }

          .e-file-container .e-upload-progress-wrap {
            height: $progress-bar-wrapper-height;

            #{if(&, '&', '*')} .e-progress-inner-wrap {
              height: $progress-inner-wrap-height;
              width: $progress-bar-wrapper-width;

              #{if(&, '&', '*')} .e-upload-progress-bar {
                height: $progress-bar-height;
              }
            }

            #{if(&, '&', '*')} .e-progress-bar-text {
              font-size: $list-item-status-font-size-smaller;
              right: $progress-bar-text-right;
              top: $progress-bar-text-top;
            }
          }
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
        #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
        #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
        #{if(&, '&', '*')} .e-file-play-btn.e-icons,
        #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
          box-sizing: border-box;
          font-size: $remove-icon-font-size;
          height: $remove-bigger-icon-height;
          margin: $remove-icon-margin;
          margin-top: $remove-icon-margin-top;
          padding: $delete-icon-padding;
          top: $remove-icon-top-smaller;
          width: $remove-bigger-icon-width;
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
          color: $disabled-state;
          cursor: not-allowed;
          opacity: .4;
          pointer-events: none;
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-msie.e-icons,
        #{if(&, '&', '*')} .e-file-delete-btn.e-msie.e-icons,
        #{if(&, '&', '*')} .e-file-abort-btn.e-msie.e-icons,
        #{if(&, '&', '*')} .e-file-reload-btn.e-msie.e-icons,
        #{if(&, '&', '*')} .e-file-play-btn.e-msie.e-icons,
        #{if(&, '&', '*')} .e-file-pause-btn.e-msie.e-icons {
          padding: $icons-bigger-ie-padding;
        }

        #{if(&, '&', '*')} .e-file-play-btn.e-icons,
        #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
        #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
          right: $pause-play-button-right-value-bigger;
        }

        #{if(&, '&', '*')} .e-file-delete-btn.e-icons {
          font-size: $delete-icon-font-size;
        }

        #{if(&, '&', '*')} .e-file-abort-btn.e-icons {
          font-size: $abort-icon-font-size;
        }
      }

      #{if(&, '&', '*')} .e-upload-actions .e-btn {
        margin-left: $list-item-margin-left;
      }

      #{if(&, '&', '*')} .e-upload-actions {

        .e-file-upload-btn {
          @if ($skin-name == 'bootstrap4' or $skin-name == 'FluentUI') {
            margin: $footer-upload-buttons-margin;
          }
          @else if ($skin-name != 'bootstrap4' and $skin-name != 'FluentUI') {
            margin: $footer-buttons-margin;
          }
        }

        .e-file-clear-btn {
          @if ($skin-name == 'bootstrap4' or $skin-name == 'FluentUI') {
            margin: $footer-clear-buttons-margin;
          }
          @else if ($skin-name != 'bootstrap4' and $skin-name != 'FluentUI') {
            margin: $footer-buttons-margin;
          }
        }
      }

      #{if(&, '&', '*')}.e-rtl {
        #{if(&, '&', '*')} .e-file-select-wrap {
          padding: $header-padding-rtl-bigger;

          #{if(&, '&', '*')} .e-control {
            #{if(&, '&', '*')}.e-btn {
              margin-right: $margin-rtl-header;
            }
          }

          #{if(&, '&', '*')} .e-file-drop {
            margin-right: $drop-area-padding-left;
          }
        }

        #{if(&, '&', '*')} .e-upload-actions {

          .e-file-upload-btn {
            @if $skin-name == 'FluentUI' {
              margin: $footer-upload-buttons-margin-rtl;
            }
          }

          .e-file-clear-btn {
            @if $skin-name == 'FluentUI' {
              margin: $footer-clear-buttons-margin-rtl;
            }
          }
        }

        #{if(&, '&', '*')} .e-upload-files {
          #{if(&, '&', '*')} .e-upload-file-list {
            #{if(&, '&', '*')} .e-file-container {
              margin-left: $file-container-left;
              margin-right: $margin-rtl;

              #{if(&, '&', '*')} .e-file-status,
              #{if(&, '&', '*')} .e-file-information {
                top: $file-status-rtl;
              }

              #{if(&, '&', '*')} .e-upload-progress-wrap {

                #{if(&, '&', '*')} .e-progress-bar-text {
                  left: $progress-bar-text-right;
                  right: initial;
                }
              }
            }

            #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
            #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
            #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
            #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
            #{if(&, '&', '*')} .e-file-play-btn.e-icons,
            #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
              box-sizing: border-box;
              left: $remove-icon-rtl-bigger;
              margin-left: $margin-rtl;
              margin-right: $margin-rtl;
              padding: $delete-icon-padding;
              top: $remove-icon-top;
              @if $skin-name == 'FluentUI' {
                margin-left: $margin-icon-rtl;
                margin-right: $margin-icon-rtl;
              }
            }

            #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
            #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
              color: $disabled-state;
              cursor: not-allowed;
              opacity: .4;
              pointer-events: none;
            }

            #{if(&, '&', '*')} .e-file-remove-btn.e-msie.e-icons,
            #{if(&, '&', '*')} .e-file-delete-btn.e-msie.e-icons,
            #{if(&, '&', '*')} .e-file-abort-btn.e-msie.e-icons,
            #{if(&, '&', '*')} .e-file-reload-btn.e-msie.e-icons,
            #{if(&, '&', '*')} .e-file-play-btn.e-msie.e-icons,
            #{if(&, '&', '*')} .e-file-pause-btn.e-msie.e-icons {
              padding: $icons-bigger-ie-padding;
            }

            #{if(&, '&', '*')} .e-file-play-btn,
            #{if(&, '&', '*')} .e-file-reload-btn,
            #{if(&, '&', '*')} .e-file-pause-btn {
              #{if(&, '&', '*')}.e-icons {
                left: $pause-play-button-right-value-bigger-rtl;
              }
            }
          }
        }
      }
    
      #{if(&, '&', '*')}.e-form-upload .e-upload-files {
        #{if(&, '&', '*')} .e-upload-file-list {
          min-height: $form-upload-bigger-file-list-height;
          padding-bottom: $form-upload-bigger-file-list-padding-bottom;
          padding-top: $form-upload-bigger-file-list-padding-top;

          #{if(&, '&', '*')} .e-file-container {
            top: 0;

            #{if(&, '&', '*')} .e-hidden-input {
              display: none;
            }

            #{if(&, '&', '*')} .e-file-name,
            #{if(&, '&', '*')} .e-file-type {
              line-height: $form-upload-bigger-file-name-line-height;
              padding-top: $form-upload-bigger-file-name-padding;
            }

            #{if(&, '&', '*')} .e-file-name.e-error,
            #{if(&, '&', '*')} .e-file-type.e-error,
            #{if(&, '&', '*')} .e-file-status.e-error {
              color: $upload-failure-color;
            }

            #{if(&, '&', '*')} .e-file-status,
            #{if(&, '&', '*')} .e-file-information {
              color: $file-size-color;
              display: block;
              font-size: $form-upload-bigger-file-status-font-size;
              line-height: $form-upload-bigger-file-name-line-height;
              padding-bottom: 0;
              padding-top: $form-upload-bigger-file-name-padding;
              position: relative;
            }
          }

          #{if(&, '&', '*')}.e-file-invalid {
            color: $upload-failure-color;

            #{if(&, '&', '*')} .e-file-name,
            #{if(&, '&', '*')} .e-file-type,
            #{if(&, '&', '*')} .e-file-status {
              color: $upload-failure-color;
            }
          }
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
        #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
        #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
        #{if(&, '&', '*')} .e-file-play-btn.e-icons,
        #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
          box-sizing: border-box;
          top: $form-upload-bigger-remove-icon-top;
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
          color: $disabled-state;
          cursor: not-allowed;
          opacity: .4;
          pointer-events: none;
        }
      }
    }
  }

  .e-bigger.e-small .e-upload {
    width: 100%;

    #{if(&, '&', '*')}.e-control-wrapper {
      font-family: $upload-root-font-family;
    }

    .e-hidden-file-input {
      border: 0;
      height: 0;
      margin: 0;
      outline: none;
      padding: 0;
      text-indent: 0;
      visibility: hidden;
      width: 0;
    }

    .e-file-select-wrap {
      padding: $header-padding;

      .e-file-select,
      .e-file-select .e-uploader {
        display: inline-block;
        width: $upload-element-width;
      }

      .e-file-select .e-uploader {
        opacity: $upload-element-opacity;
      }

      #{if(&, '&', '*')} .e-file-drop {
        font-family: $upload-font-family;
        font-size: $drop-area-font-size-smaller;
        margin-left: $drop-area-padding-left-smaller;
      }
    }

    #{if(&, '&', '*')}.e-form-upload .e-upload-files {
      #{if(&, '&', '*')} .e-upload-file-list {
        min-height: $form-upload-file-list-height;
        padding-bottom: $form-upload-file-list-padding-bottom;
        padding-top: $form-upload-file-list-padding-top;

        #{if(&, '&', '*')} .e-file-container {
          top: 0;

          #{if(&, '&', '*')} .e-hidden-input {
            display: none;
          }

          #{if(&, '&', '*')} .e-file-name,
          #{if(&, '&', '*')} .e-file-type {
            line-height: $form-upload-file-name-line-height;
            padding-top: $form-upload-file-name-padding;
          }

          #{if(&, '&', '*')} .e-file-name.e-error,
          #{if(&, '&', '*')} .e-file-type.e-error,
          #{if(&, '&', '*')} .e-file-status.e-error {
            color: $upload-failure-color;
          }

          #{if(&, '&', '*')} .e-file-status,
          #{if(&, '&', '*')} .e-file-information {
            color: $file-size-color;
            display: block;
            font-size: $form-upload-file-status-font-size;
            line-height: $form-upload-file-name-line-height;
            padding-bottom: 0;
            padding-top: $form-upload-file-name-padding;
            position: relative;
          }
        }

        #{if(&, '&', '*')}.e-file-invalid {
          color: $upload-failure-color;

          #{if(&, '&', '*')} .e-file-name,
          #{if(&, '&', '*')} .e-file-type,
          #{if(&, '&', '*')} .e-file-status {
            color: $upload-failure-color;
          }
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
        box-sizing: border-box;
        top: $form-upload-remove-icon-top;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
        color: $disabled-state;
        cursor: not-allowed;
        opacity: .4;
        pointer-events: none;
      }
    }

    #{if(&, '&', '*')} .e-upload-files {
      list-style-type: none;
      margin: $select-file-margin;
      padding: $select-file-padding;

      .e-icons:focus {
        @if ($skin-name == 'material' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
          outline: none;
        }
      }

      .e-upload-file-list {
        font-family: $upload-font-family;
        font-size: $list-items-font-size-smaller;
        height: 100%;
        line-height: $list-line-height;
        @if $skin-name == 'tailwind' {
          line-height: $list-line-height-smaller;
        }
        min-height: $li-min-height;
        position: relative;

        .e-file-container {
          display: block;
          height: 100%;
          margin-left: $list-item-margin-left-smaller;
          margin-right: $list-item-margin-right;
          min-height: $list-item-height;
          position: relative;
          top: $file-container-top;

          .e-file-name {
            float: left;
            font-family: $file-name-font-family;
            font-size: $file-name-font-size-smaller;
            max-width: $list-item-name-width;
            overflow: hidden;
            padding-top: $file-name-padding-top-smaller;
            position: relative;
            text-overflow: ellipsis;
            top: $file-name-top;
            white-space: nowrap;
          }

          .e-file-name::before {
            content: attr(data-tail);
            float: right;
          }

          #{if(&, '&', '*')} .e-file-type {
            display: block;
            font-family: $file-name-font-family;
            font-size: $file-name-font-size-smaller;
            padding-top: $file-name-padding-top-smaller;
          }

          #{if(&, '&', '*')} .e-file-type.e-hidden {
            visibility: hidden;
          }

          #{if(&, '&', '*')} .e-file-size {
            display: block;
            font-size: $list-item-status-font-size-smaller;
            padding: $file-size-padding-smaller;
            @if $skin-name == 'tailwind' {
              font-size: $list-item-file-size-font-size-smaller;
              line-height: 18px;
            }
          }

          #{if(&, '&', '*')} .e-file-status,
          #{if(&, '&', '*')} .e-file-information {
            display: block;
            font-family: $upload-font-family;
            font-size: $list-item-status-font-size-smaller;
            padding-bottom: $file-name-padding-top-smaller;

            #{if(&, '&', '*')}.e-upload-progress {
              display: none;
            }
          }

          #{if(&, '&', '*')} .e-upload-progress-wrap {
            display: block;
            height: $progress-bar-wrapper-height-smaller;
            padding-bottom: $progress-bar-bottom-paddding;
            padding-top: $progress-bar-top-paddding;
            position: absolute;
            width: $progress-bar-wrapper-width;

            #{if(&, '&', '*')} .e-progress-inner-wrap {
              border-radius: $inner-wrap-radius;
              display: block;
              height: $progress-inner-wrap-height-smaller;
              width: 100%;

              #{if(&, '&', '*')} .e-upload-progress-bar {
                border-radius: $progress-bar-radius;
                display: inherit;
                height: $progress-bar-height-smaller;
              }
            }

            #{if(&, '&', '*')} .e-progress-bar-text {
              float: right;
              font-family: $upload-font-family;
              font-size: $list-item-status-font-size-smaller;
              position: relative;
              right: $progress-bar-text-right-smaller;
              top: $progress-bar-text-top-smaller;
            }
          }
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons {
        align-items: center;
        box-sizing: border-box;
        cursor: pointer;
        display: inline-flex;
        font-size: $remove-icon-font-size-smaller;
        height: $remove-icon-height;
        justify-content: center;
        margin: $remove-icon-margin-smaller;
        margin-top: $remove-icon-margin-top-smaller;
        padding: $remove-icon-padding-smaller;
        position: absolute;
        right: $remove-icon-right;
        top: $remove-icon-top-smaller;
        vertical-align: middle;
        width: $remove-icon-width;

        #{if(&, '&', '*')}.e-upload-progress {
          cursor: default;
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
        color: $disabled-state;
        cursor: not-allowed;
        opacity: .4;
        pointer-events: none;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-msie.e-icons {
        padding: $icons-small-ie-padding;
      }

      #{if(&, '&', '*')} .e-file-pause-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons {
        right: $pause-play-button-right-value;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons:hover,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons:not(.e-disabled):hover,
      #{if(&, '&', '*')} .e-clear-icon-focus {
        @if $skin-name == 'Material3' {
          background: $clear-icon-focus-color;
        }
        @if $skin-name == 'fluent2' {
          color: $primary;
        }
        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
          background-color: $clear-icon-focus-color;
        }
        border-color: transparent;
        border-radius: $uploader-icons-hover-radius;
        box-shadow: 0 0 0 transparent;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons:focus,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons:not(.e-disabled):focus,
      #{if(&, '&', '*')} .e-clear-icon-focus {
        border-radius: $uploader-icons-hover-radius;
      }

      #{if(&, '&', '*')} .e-file-delete-btn.e-icons {
        @if $skin-name == 'tailwind3' {
          font-size: $delete-icon-font-size-bigger-smaller;
        }
        font-size: $delete-icon-font-size-smaller;
        opacity: $delete-icon-opacity;
      }

      #{if(&, '&', '*')} .e-file-abort-btn.e-icons {
        font-size: $abort-icon-font-size-smaller;
        opacity: $delete-icon-opacity;
      }
    }

    #{if(&, '&', '*')} .e-file-select-wrap .e-btn,
    #{if(&, '&', '*')} .e-upload-actions .e-btn {
      font-family: $upload-font-family;
    }

    #{if(&, '&', '*')} .e-upload-actions {
      position: relative;
      text-align: right;

      .e-file-upload-btn {
        @if ($skin-name == 'bootstrap4' or $skin-name == 'FluentUI') {
          margin: $action-upload-buttons-margin-smaller;
        }
        @else if ($skin-name != 'bootstrap4' and $skin-name != 'FluentUI') {
          margin: $action-buttons-margin-smaller;
        }
      }

      .e-file-clear-btn {
        @if ($skin-name == 'bootstrap4' or $skin-name == 'FluentUI') {
          margin: $action-clear-buttons-margin-smaller;
        }
        @else if ($skin-name != 'bootstrap4' and $skin-name != 'FluentUI') {
          margin: $action-buttons-margin-smaller;
        }
      }
    }

    #{if(&, '&', '*')}.e-rtl {
      #{if(&, '&', '*')} .e-file-select-wrap {
        padding: $header-padding-rtl-smaller;

        #{if(&, '&', '*')} .e-control {
          #{if(&, '&', '*')}.e-btn {
            margin-right: $margin-rtl-header-smaller;
          }
        }

        #{if(&, '&', '*')} .e-file-drop {
          margin-left: $file-container-left;
          margin-right: $drop-area-padding-left-smaller;
          position: relative;
        }
      }

      #{if(&, '&', '*')} .e-upload-actions {
        text-align: $float-left;

        .e-file-upload-btn {
          @if $skin-name == 'FluentUI' {
            margin: $action-upload-buttons-margin-smaller-rtl;
          }
        }

        .e-file-clear-btn {
          @if $skin-name == 'FluentUI' {
            margin: $action-clear-buttons-margin-smaller-rtl;
          }
        }
      }

      #{if(&, '&', '*')} .e-upload-files {
        #{if(&, '&', '*')} .e-upload-file-list {
          #{if(&, '&', '*')} .e-file-container {
            height: $file-container-height;
            margin-left: $file-container-left;
            margin-right: $margin-rtl-smaller;
            position: relative;

            #{if(&, '&', '*')} .e-rtl-container {
              direction: ltr;
              float: $float-right;
              width: $file-container-height;
            }

            #{if(&, '&', '*')} .e-file-type {
              float: $float-right;
            }

            #{if(&, '&', '*')} .e-file-name {
              float: $float-right;
            }

            #{if(&, '&', '*')} .e-file-size {
              direction: ltr;
              float: $float-right;
              position: relative;
              text-align: right;
              width: $file-container-height;
            }

            #{if(&, '&', '*')} .e-upload-progress-wrap {
              float: $float-right;
              position: initial;
              top: $progress-bar-wrap-top-smaller;
              width: $progress-bar-width-rtl;

              #{if(&, '&', '*')} .e-progress-bar-text {
                float: $float-left;
                right: $progress-text-rtl-smaller;
                top: $rtl-progress-top;
              }
            }
          }

          #{if(&, '&', '*')} .e-file-remove-btn,
          #{if(&, '&', '*')} .e-file-delete-btn,
          #{if(&, '&', '*')} .e-file-abort-btn,
          #{if(&, '&', '*')} .e-file-reload-btn,
          #{if(&, '&', '*')} .e-file-pause-btn,
          #{if(&, '&', '*')} .e-file-play-btn {
            #{if(&, '&', '*')}.e-icons {
              left: $left;
              margin-left: $margin-rtl-smaller;
              margin-right: $margin-rtl-smaller;
              right: auto;
              top: $remove-icon-rtl-top-smaller;
              @if $skin-name == 'FluentUI' {
                margin-left: $margin-icon-rtl-smaller;
                margin-right: $margin-icon-rtl-smaller;
              }
            }
          }

          #{if(&, '&', '*')} .e-file-reload-btn {
            #{if(&, '&', '*')}.e-icons {
              left: $reload-btn-right;
              right: auto;
            }
          }

          #{if(&, '&', '*')} .e-file-play-btn,
          #{if(&, '&', '*')} .e-file-reload-btn,
          #{if(&, '&', '*')} .e-file-pause-btn {
            #{if(&, '&', '*')}.e-icons {
              left: $pause-play-button-right-value;
            }
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-disabled {
      #{if(&, '&', '*')} .e-file-drop {
        color: $disabled-state;
      }

      #{if(&, '&', '*')} .e-upload-files {
        .e-upload-file-list {
          #{if(&, '&', '*')} .e-file-container .e-file-name,
          #{if(&, '&', '*')} .e-file-container .e-file-type,
          #{if(&, '&', '*')} .e-file-container .e-file-size,
          #{if(&, '&', '*')} .e-file-container .e-file-status,
          #{if(&, '&', '*')} .e-file-container .e-file-information {
            color: $disabled-state;
          }
        }
      }
    }

    .e-content-placeholder.e-upload.e-placeholder-upload {
      background-size: 400px 65px;
      min-height: 65px;
    }

    .e-bigger .e-content-placeholder.e-upload.e-placeholder-upload,
    .e-bigger.e-content-placeholder.e-upload.e-placeholder-upload {
      background-size: 400px 80px;
      min-height: 80px;
    }
  }

  .e-upload .e-upload-actions,
  .e-bigger.e-small .e-upload .e-upload-actions {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2' or $skin-name == 'tailwind' {
      background-color: $content-bg-color-alt1;
      border-radius: 0 0 6px 6px;
    }
    @if $skin-name == 'FluentUI' {
      background-color: $transparent;
      border-radius: 0 0 6px 6px;
    }
  }
}