@use 'ej2-base/styles/common/mixin' as *;
@include export-module('accordion-layout') {
  .e-accordion {
    display: block;
    position: relative;

    .e-acrdn-item {

      &.e-select.e-selected:first-child {
        border-top: $acrdn-item-selected-first-child-border-top;
      }

      &.e-select.e-selected:last-child {
        border-bottom: $acrdn-item-selected-last-child-border-bottom;
      }
      border-radius: $acrdn-item-border-radius;
      margin-top: $acrdn-item-margin-top;

      &:first-child {
        margin-top: $acrdn-margin-none;
      }
      
      &:not(.e-select) + .e-acrdn-item:not(.e-select) {
        margin-bottom: $acrdn-margin-none;
        margin-top: $acrdn-margin-none;
      }

      .e-acrdn-panel.e-nested .e-acrdn-item.e-select {
        margin: $acrdn-item-nested-panel-item-select-margin;
      }

      > .e-acrdn-header .e-acrdn-header-content {
        font-weight: $acrdn-header-font-weight;
      }

      &.e-selected {
        padding-top: $acrdn-padding-none;

        > .e-acrdn-header .e-acrdn-header-content {
          font-weight: $acrdn-slct-header-font-weight;
        }
      }

      &.e-overlay {
        height: $acrdn-auto-height;
      }
    }

    .e-acrdn-item {
      overflow: $acrdn-item-overflow;
      padding-top: $acrdn-item-padding-size;
      position: relative;

      &.e-hide {
        display: none;
      }

      .e-acrdn-header {

        .e-acrdn-header-content {
          font-size: $acrdn-header-font-size;
        }
      }

      &.e-select {

        > .e-acrdn-header {
          cursor: pointer;

          &:hover,
          &:focus {
            .e-acrdn-header-content {
              text-decoration: $acrdn-item-hover-focus-hdr-con-text-decoration;
            }
          }
        }
      }

      .e-acrdn-header {
        border-radius: $acrdn-item-hdr-border-radius;
        line-height: $acrdn-nrml-header-lineheight;
        min-height: $acrdn-nrml-header-minheight;
        overflow: hidden;
        padding: $acrdn-nrml-header-padding;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;

        > * {
          display: inline-block;
        }

        .e-acrdn-header-content {
          line-height: $acrdn-item-hdr-con-lineheight;
        }

        .e-toggle-icon {
          display: $acrdn-item-tgl-icon-display;
          font-size: $acrdn-icon-font-size;
          height: $acrdn-nrml-header-height;
          min-height: $acrdn-nrml-header-minheight;
          min-width: $acrdn-nrml-icn-minwidth;
          position: absolute;
          right: $acrdn-nrml-header-paddingpix;
          top: 0;

          .e-tgl-collapse-icon.e-icons {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
          }
        }

        .e-toggle-animation {
          transition: .5s ease 0s;
        }

        .e-acrdn-header-icon {
          display: inline-block;
          padding: $acrdn-padding-none $acrdn-nrml-header-icon-padding $acrdn-padding-none $acrdn-padding-none;

          .e-acrdn-icons.e-icons {
            font-size: $acrdn-item-arrow-icon-font-size;
          }
        }
      }

      .e-acrdn-panel {
        font-size: $acrdn-content-font-size;
        overflow-y: hidden;
        text-decoration: none;
        width: 100%;

        &.e-nested {

          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
            padding: $acrdn-nest-nrml-content-padding;
          }

          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
            padding: $acrdn-nest-nrml-header-padding;

            &:focus {
              box-shadow: $acrdn-nested-item-header-focus-box-shadow;
            }
          }

          > .e-acrdn-content {
            padding: $acrdn-padding-none;

            .e-acrdn-panel.e-nested > .e-acrdn-content {
              padding: $acrdn-padding-none;
            }

            > .e-accordion {
              border: $acrdn-border-none;
            }

            .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
              padding: $acrdn-nest-second-nrml-header-padding;
            }

            .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
              padding: $acrdn-nest-second-nrml-content-padding;
            }
          }

          .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
            font-weight: $acrdn-nest-header-content-font-weight;
          }

          .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
            font-weight: $acrdn-nested-header-content-font-weight;
          }
        }

        .e-acrdn-content {
          line-height: $acrdn-content-line-height;
          overflow: hidden;
          padding: $acrdn-nrml-content-padding;
          text-overflow: ellipsis;

          > * {
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .e-acrdn-header-content {
          font-size: $acrdn-nest-header-content-font-size;
        }
      }

      .e-content-hide {
        display: none;
      }
    }

    &.e-rtl {

      .e-acrdn-item {

        .e-acrdn-panel.e-nested {

          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
            padding: $acrdn-rtl-nest-nrml-content-padding;
          }

          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
            padding: $acrdn-rtl-nest-nrml-header-padding;
          }

          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
            padding: $acrdn-rtl-nest-second-nrml-header-padding;
          }

          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
            padding: $acrdn-rtl-nest-second-nrml-content-padding;
          }
        }

        .e-acrdn-header {
          padding: $acrdn-rtl-nrml-header-padding;

          .e-toggle-icon {
            left: $acrdn-nrml-header-paddingpix;
            right: auto;
          }

          .e-acrdn-header-icon {
            padding: $acrdn-padding-none $acrdn-padding-none $acrdn-padding-none $acrdn-nrml-header-icon-padding;
          }
        }
      }
    }
  }
}