@include export-module('listview-theme') {
  .e-listview {
    border-color: $listview-line-color;
    font-family: $listview-font-family;
    font-size: $listview-font-size;
    @at-root {
      & .e-list-header {
        background-color: $listview-header-bg;
        border-color: $listview-header-border;
        color: $listview-header-text-color;
        font-size: $listview-header-font-size;
      }

      & .e-icons {
        color: $listview-icon-color;

        @if ($skin-name == 'tailwind') {
          &.e-back-button:hover,
          &.e-icon-collapsible:hover {
            color: $icon-color-hover;
          }
        }
        @if ($skin-name == 'bootstrap5') {
          &.e-back-button:hover {
            color: $icon-color-hover;
          }

          &.e-back-button:active {
            color: $icon-color-pressed;
          }
        }
      }

      & .e-list-item {
        background-color: $listview-background;
        border-bottom: $listview-border-bottom solid $listview-border-bottom-color;
        border-left: $listview-border-left solid $listview-border-left-color;
        border-right: $listview-border-right solid $listview-border-right-color;
        border-top: $listview-border-top solid $listview-border-top-color;
        color: $listview-text-color;
      }

      & .e-list-item.e-hover,
      & .e-list-item.e-hover.e-active.e-checklist {
        background-color: $listview-item-hover-bg;
        border-color: $listview-hover-border-color;
        color: $listview-text-hover-color;
      }

      & .e-list-item.e-active {
        background-color: $listview-item-active-bg;
        color: $listview-text-active-color;
      }

      & .e-list-item.e-active.e-checklist {
        background-color: $listview-background;
        color: $listview-text-color;
      }

      & .e-list-item.e-focused,
      & .e-list-item.e-focused.e-active.e-checklist {
        background-color: $listview-item-active-bg;
        color: $listview-text-active-color;
      }

      & .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
      & .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
        @if ($skin-name != 'tailwind') {
          background-color: $checkmark-bgcolor;
          border-color: $checkmark-border-color;
          color: $checkmark-color;
        }
      }

      & .e-list-group-item {
        background-color: $listview-groupheader-bg;
        border-color: $listview-header-border;
        color: $listview-groupheader-text-color;
        font-size: $listview-groupheader-font-size;
      }

      @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
        & .e-list-item.e-focused .e-icon-wrapper .e-icon-collapsible {
          color: $listview-focused-collapsible-color;
        }
      }
    }

    &.e-list-template {
      .e-list-wrapper {
        height: inherit;
        position: relative;

        &:not(.e-list-multi-line) {
          padding: $listview-template-padding;

          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
            &.e-list-badge:not(.e-list-avatar) {
              padding: 0 8px 0 12px;
            }
          }
          @if ($skin-name == 'FluentUI') {
            &.e-list-badge:not(.e-list-avatar) {
              padding: 2px 10px 2px 16px;
            }
          }
        }

        &.e-list-multi-line {
          padding: $listview-template-multiline-padding;

          .e-list-item-header {
            color: $listview-template-multiline-header-color;
            display: block;
            font-size: $listview-template-multiline-header-font-size;
            @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5') {
              font-weight: $font-weight-normal;
              line-height: 22px;
            }
            @else {
              font-weight: 500;
            }
            margin: 0;
            overflow: hidden;
            padding: $listview-template-multiline-header-padding;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .e-list-content {
            color: $listview-template-multiline-content-color;
            display: block;
            font-size: $listview-template-multiline-content-font-size;
            @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5') {
              font-weight: $font-weight-normal;
              @if ($skin-name == 'FluentUI') {
                line-height: 18px;
              }
              @else {
                line-height: 22px;
              }
            }
            margin: 0;
            padding: $listview-template-multiline-content-padding;
            word-wrap: break-word;
          }

          .e-list-content:not(.e-text-overflow) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        &.e-list-avatar {
          .e-avatar {
            height: $listview-template-avatar-size;
            left: $listview-template-avatar-left;
            position: absolute;
            top: $listview-template-avatar-top;
            width: $listview-template-avatar-size;
            @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5') {
              margin: $listview-template-avatar-margin;
            }
          }
        }

        &.e-list-avatar:not(.e-list-badge) {
          padding-left: $listview-template-avatar-padding-left;
          padding-right: $listview-template-avatar-padding-right;
        }

        &.e-list-avatar-right:not(.e-list-badge) {
          padding-left: $listview-template-avatar-rightposition-padding-left;
          padding-right: $listview-template-avatar-rightposition-padding-right;

          .e-avatar {
            height: $listview-template-avatar-size;
            position: absolute;
            right: $listview-template-avatar-rightposition-right;
            top: $listview-template-avatar-top;
            width: $listview-template-avatar-size;
          }
        }

        &.e-list-multi-line.e-list-avatar {
          .e-avatar {
            top: $listview-template-multiline-avatar-top;
          }
        }

        &.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) {
          .e-avatar {
            top: $listview-template-multiline-avatar-top;
          }
        }

        &.e-list-badge {
          .e-badge {
            font-size: $listview-template-badge-font-size;
            height: $listview-template-badge-height;
            line-height: $listview-template-badge-line-height;
            padding: 0;
            position: absolute;
            right: $listview-template-badge-right;
            top: 50%;
            transform: translateY(-50%);
            width: $listview-template-badge-width;
            @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5') {
              border-radius: 10px;
            }
          }
        }

        &.e-list-badge.e-list-avatar {
          padding-left: $listview-template-avatar-badge-padding-left;
          padding-right: $listview-template-avatar-badge-padding-right;
        }

        &.e-list-badge:not(.e-list-avatar) {
          padding-left: $listview-template-badgewithoutavatar-padding-left;
          padding-right: $listview-template-badgewithoutavatar-padding-right;
        }

        &:not(.e-list-multi-line) {
          .e-list-content {
            display: block;
            margin: 0;
            overflow: hidden;
            padding: $listview-template-item-padding;
            text-overflow: ellipsis;
            white-space: nowrap;
            @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
              font-size: $listview-font-size;
              line-height: $listview-item-line-height;
            }
          }
        }
      }

      .e-list-item {
        &.e-focused {
          .e-list-wrapper.e-list-multi-line {
            .e-list-item-header {
              @if ($skin-name == 'bootstrap5') {
                color: $content-text-color-selected;
              }
            }

            .e-list-content {
              @if ($skin-name == 'bootstrap5') {
                color: $content-text-color-selected;
              }
            }
          }
        }

        &.e-hover .e-list-item-header {
          color: $listview-text-hover-color;
        }

        &.e-hover .e-list-content {
          color: $listview-text-hover-color;
        }

        &.e-active .e-list-item-header {
          color: $listview-text-active-color;
        }

        &.e-active .e-list-content {
          color: $listview-text-active-color;
        }
      }
    }

    &.e-rtl {
      &.e-list-template .e-list-wrapper {
        &.e-list-avatar {
          .e-avatar {
            left: inherit;
            @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
              margin: 7px 12px 7px 16px;
            }
            right: $listview-template-avatar-left;
          }
        }

        &.e-list-avatar:not(.e-list-badge) {
          padding-left: $listview-template-avatar-padding-right;
          padding-right: $listview-template-avatar-padding-left;
        }

        &.e-list-avatar-right:not(.e-list-badge) {
          padding-left: $listview-template-avatar-rightposition-padding-right;
          padding-right: $listview-template-avatar-rightposition-padding-left;

          .e-avatar {
            left: $listview-template-avatar-rightposition-right;
            right: inherit;
          }
        }

        &.e-list-badge {
          .e-badge {
            left: $listview-template-badge-right;
            right: inherit;
          }
        }

        &.e-list-badge.e-list-avatar {
          padding-left: $listview-template-avatar-badge-padding-right;
          padding-right: $listview-template-avatar-badge-padding-left;
        }

        &.e-list-badge:not(.e-list-avatar) {
          padding-left: $listview-template-badgewithoutavatar-padding-right;
          padding-right: $listview-template-badgewithoutavatar-padding-left;
        }
      }
    }
  }
}