// New Accordion Style
//========================================================

@import 'accordion-mixins';

// Dependencies
// '../button/button-chevron';

/* stylelint-disable max-nesting-depth,selector-max-compound-selectors */

.accordion {
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  font-size: 0;
  overflow-y: visible;

  &.is-disabled {
    background-color: $accordion-disabled-bg-color !important;
    border-bottom-color: $accordion-disabled-border-color;
    pointer-events: none;

    .accordion-header {
      background-color: $accordion-disabled-bg-color !important;
      color: $accordion-disabled-text-color !important;

      a {
        color: $accordion-disabled-text-color !important;
      }

      span {
        color: $accordion-disabled-text-color !important;
      }

      .icon {
        color: $accordion-disabled-text-color !important;

        &.plus-minus {
          &::before,
          &::after {
            background-color: $accordion-disabled-text-color !important;
          }
        }
      }

      &.list-item {
        &::before {
          color: $accordion-disabled-text-color !important;
        }
      }
    }

    .accordion-pane {
      background-color: $accordion-disabled-pane-bg-color !important;

      .accordion-content,
      .accordion-header {
        background-color: $accordion-disabled-pane-bg-color !important;
        border-bottom-color: $accordion-disabled-pane-bg-color !important;
      }
    }
  }

  // Reset the padding for various things when we have icons present
  &.has-icons {
    // Level 1
    > .accordion-header {
      > a {
        padding-left: 54px;
      }

      > .icon,
      > [class^='btn'] {
        + a {
          padding-left: 0;
        }
      }
    }

    .accordion-pane {
      @include left-align-cascade-styles-pane(56px, 54px, 54px);

      // Level 2
      .accordion-header {
        @include left-align-cascade-styles-header(36px, 30px, 86px, 37px);

        &.no-icon {
          > a {
            padding-inline-start: 56px;
            padding-inline-end: 40px;
          }
        }
      }

      .accordion-pane {
        @include left-align-cascade-styles-pane(54px, 73px, 74px);

        // Level 3
        .accordion-header {
          @include left-align-cascade-styles-header(56px, 49px, 76px, 56px);
        }

        .accordion-pane {
          @include left-align-cascade-styles-pane(74px, 92px, 93px);

          // Level 4
          .accordion-header {
            @include left-align-cascade-styles-header(74px, 68px, 95px, 75px);
          }

          .accordion-pane {
            @include left-align-cascade-styles-pane(93px, 111px, 112px);

            // Level 5
            .accordion-header {
              @include left-align-cascade-styles-header(93px, 87px, 114px, 94px);
            }

            .accordion-pane {
              @include left-align-cascade-styles-pane(112px, 131px, 132px);

              // Level 6
              .accordion-header {
                @include left-align-cascade-styles-header(112px, 106px, 134px, 113px);
              }

              .accordion-pane {
                .accordion-content {
                  padding-left: 132px;
                }
              }
            }
          }
        }
      }
    }
  }

  // Accordions that are styled as standalone "panels".
  &.panel {
    background-color: $accordion-bg-color;
    border-color: $accordion-panel-border-color;
    border-right-color: $accordion-panel-border-color;

    .accordion-header {
      border-bottom-color: $accordion-panel-border-color;

      &.is-focused:not(.hide-focus) {
        border-bottom-color: $accordion-selected-bg-color;
      }

      // Selected state only exists on Paneled accordions.
      &.is-selected,
      &.is-selected:hover {
        background-color: $accordion-selected-bg-color;
        color: $accordion-panel-selected-text-color;

        > a {
          color: inherit;
        }

        > .icon {
          color: inherit;

          .chevron {
            top: -1px;
          }
        }

        > [class^='btn'] {
          .icon {
            color: inherit;

            &.plus-minus {
              &::before,
              &::after {
                background-color: $accordion-selected-text-color;
              }
            }
          }

          .audible {
            color: inherit;
          }
        }

        [class^='btn']:focus {
          box-shadow: none;

          &:not(.hide-focus) {
            border: 1px solid $accordion-selected-text-color;
          }
        }

        .accordion-header {
          border-bottom-color: $accordion-selected-bg-color;
        }
      }

      &.is-selected.is-focused:not(.hide-focus) {
        border-bottom-color: $accordion-selected-bg-color;
      }

      &.filtered.has-filtered-children {
        &:not(:hover):not(.is-selected) {
          > a {
            color: $accordion-filtered-text-color;
          }

          > .icon {
            color: $accordion-filtered-text-color;
          }

          > .btn > .icon {
            &::before,
            &::after {
              background-color: $accordion-filtered-text-color;
            }
          }
        }
      }

      &.has-filtered-children {
        + .accordion-pane {
          display: block;
        }
      }

      &:last-child {
        border-bottom-color: transparent;
      }

      .btn {
        top: -1px;
      }

      .icon {
        top: -3px;

        &.chevron {
          top: 1px;

          &.active {
            top: 0;
          }
        }
      }
    }

    .accordion-pane {
      background-color: $accordion-pane-bg-color;

      // Visible accordion panes force a border to show up on the next
      // accordion header for visual separation
      &.is-expanded {
        + .accordion-header,
        + .accordion-content {
          border-top-color: $accordion-alternate-border-color;

          &.is-focused:not(.hide-focus) {
            border-top-color: $accordion-selected-bg-color;
          }

          &.is-selected {
            border-top-color: transparent;
          }
        }
      }

      &:last-child {
        .accordion-content:last-child {
          border-bottom: 0;
        }
      }
    }

    .accordion-content {
      border-bottom-color: $accordion-panel-border-color;
    }

    // Lighter-colored, "alternate" color scheme
    &.alternate {
      background-color: $accordion-alternate-bg-color;

      &.is-disabled {
        .accordion-header {
          border-bottom-color: $accordion-panel-border-color;
        }
      }

      .accordion-header {
        border-bottom-color: $accordion-alternate-border-color;

        &.is-focused:not(.hide-focus) {
          border-bottom-color: $accordion-selected-bg-color;
        }
      }

      .accordion-pane {
        background-color: $accordion-alternate-pane-bg-color;

        .accordion-header {
          border-bottom-color: $accordion-alternate-border-color;

          &:last-child {
            border-bottom-color: transparent;
          }

          &.is-focused:not(.hide-focus) {
            border-bottom-color: $accordion-focused-border-color;
            box-shadow: $focus-box-shadow;
          }

          &.is-selected,
          &.is-selected:hover,
          &.is-focused.is-selected {
            border-bottom-color: $accordion-selected-bg-color;
          }

          &.has-filtered-children,
          &.has-filtered-children.is-focused,
          &.has-filtered-children.is-selected {
            background-color: transparent;
          }
        }

        .accordion-content {
          border-bottom-color: $accordion-alternate-pane-bg-color;
          color: $accordion-text-color;
        }
      }
    }

    // Darker, "inverse" color scheme
    &.inverse {
      background-color: $accordion-inverse-bg-color;
      border-right: $accordion-inverse-border-color;

      .accordion-header {
        border-bottom-color: $accordion-inverse-border-color;
        color: $accordion-inverse-text-color;

        .icon {
          color: $accordion-inverse-text-color !important;

          &.plus-minus {
            &::before,
            &::after {
              background-color: $accordion-inverse-text-color;
            }
          }
        }

        > [class^='btn'] {
          &:focus:not(.hide-focus) {
            border-color: $accordion-inverse-focus-state-color;
            box-shadow: $focus-box-shadow;
          }
        }

        &.list-item {
          &::before {
            color: $accordion-inverse-text-color;
          }

          &.is-selected,
          &.is-selected:hover,
          &.is-focused.is-selected {
            color: $accordion-selected-text-color;
          }
        }

        &.is-focused:not(.hide-focus) {
          border-color: $accordion-selected-bg-color;
        }

        &.is-selected,
        &.is-selected:hover,
        &.is-focused.is-selected {
          border-color: $ids-color-palette-white;
          color: $accordion-selected-text-color;

          .icon {
            color: $accordion-panel-selected-text-color;

            &.plus-minus {
              &::before,
              &::after {
                background-color: $accordion-selected-text-color;
              }
            }
          }

          > [class^='btn'] {
            &:focus:not(.hide-focus) {
              border-color: $accordion-selected-text-color;
              box-shadow: $focus-box-shadow;
            }
          }
        }

        &:hover {
          color: $accordion-inverse-text-hover-color;

          .icon {
            color: $accordion-inverse-text-hover-color;

            &.plus-minus {
              &::before,
              &::after {
                background-color: $accordion-inverse-text-hover-color;
              }
            }
          }
        }
      }

      .accordion-pane {
        background-color: $accordion-inverse-pane-bg-color;

        // Visible accordion panes force a border to show up on the next accordion header for visual separation
        &.is-expanded {
          + .accordion-header,
          + .accordion-content {
            border-top-color: $accordion-inverse-border-color;
          }

          + .accordion-header {
            &.is-focused,
            &.is-selected {
              border-top-color: transparent;
            }
          }
        }

        .accordion-header {
          &:last-child {
            border-bottom-color: transparent;
          }

          &.is-focused:not(.hide-focus) {
            border-bottom-color: $accordion-selected-bg-color;
            box-shadow: $focus-box-shadow;
          }

          &.is-selected,
          &.is-selected:hover,
          &.is-focused.is-selected {
            color: $accordion-selected-text-color;

            .icon {
              color: $accordion-selected-text-color;
            }
          }
        }

        .accordion-content {
          border-bottom-color: $accordion-inverse-pane-bg-color;
          color: $accordion-inverse-text-color;

          p {
            color: inherit;
          }
        }
      }
    }

    // Some panel accordions (list/detail patterns) need no inner padding on their panes,
    // as well as separators between their list items.
    &.has-subheader-separators {
      .accordion-pane {
        &.is-expanded {
          padding: 0;
        }

        .accordion-header:not(:last-child) {
          border-bottom-color: $accordion-toplevel-border-color;
        }
      }
    }
  }
}

.accordion-content {
  font-size: $ids-size-font-base;
}

.accordion-header {
  border: 1px solid transparent;
  border-bottom-color: $accordion-border-color;
  cursor: pointer;
  font-size: 0;
  height: 45px;
  overflow: hidden;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;

  > * {
    vertical-align: middle;
  }

  // Set for accessibility
  span {
    color: inherit;

    &.audible {
      color: inherit;
    }
  }

  a {
    color: inherit;
    font-size: $ids-size-font-base;
    text-decoration: none;
    text-overflow: ellipsis;
  }

  > a {
    display: inline-block;
    overflow: hidden;
    padding: 13px 0 13px 20px;
    white-space: nowrap;
    width: calc(100% - 1px);

    > span {
      margin-top: -1px;
      display: inline-block; // to allow offsetWidth
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }
  }

  > [class^='btn'] {
    border-radius: 8px;
    width: 38px;
    height: 38px;
    margin: unset;

    @include btn-chevron-style;
  }

  > [class^='btn'],
  > .icon {
    + a {
      padding-left: 0;
    }
  }

  .icon {
    color: $accordion-icon-color;
    top: -1px;
    width: 18px;
  }

  a + .notification-badge-container {
    margin: 0 16px;

    .notification-dot {
      &.notification-dot-upper-left {
        left: -4px;
      }

      &.notification-dot-upper-right {
        right: 10px;
      }

      &.notification-dot-lower-right {
        left: 2px;
      }

      &.notification-dot-lower-left {
        left: -4px;
      }
    }
  }

  .notification-badge-container {
    margin: 0 18px;
    width: 18px;

    + a {
      width: calc(100% - 56px);
      padding: 9px 0 7px !important;
    }

    .notification-dot {
      &.notification-dot-upper-right {
        right: 3px;
        top: -26px;
        transform: scale(1) translate(50%, -50%);
        transform-origin: 100% 0%;
      }

      &.notification-dot-upper-left {
        top: -26px;
        left: 3px;
        transform: scale(1) translate(-50%, -50%);
        transform-origin: 0% 0%;
      }

      &.notification-dot-lower-right {
        top: -20px;
        left: 9px;
        transform: scale(1) translate(50%, 50%);
        transform-origin: 100% 100%;
      }

      &.notification-dot-lower-left {
        top: -20px;
        left: 3px;
        transform: scale(1) translate(-50%, 50%);
        transform-origin: 0% 100%;
      }
    }
  }

  // NOT the same as the above rule.
  > .icon {
    margin: 0 16px;

    + a {
      width: calc(100% - 56px);
    }
  }

  // Hover state
  &:hover {
    color: $accordion-hover-text-color;

    > a {
      text-decoration: $accordion-highcontrast-text-decoration;
    }

    .icon {
      color: $accordion-hover-text-color;

      &.plus-minus {
        &::before,
        &::after {
          background-color: $accordion-hover-text-color;
        }
      }
    }
  }

  // Selected color scheme
  &.is-focused:not(.hide-focus) {
    border-color: $accordion-focused-border-color;
    box-shadow: $focus-box-shadow;
  }

  &.has-chevron {
    > [class^='btn'] {
      padding: 0;
    }

    > a {
      width: calc(100% - 55px);
    }

    > .icon {
      + a {
        width: calc(100% - 104px);
      }
    }
  }

  &.is-disabled {
    background-color: $accordion-disabled-bg-color !important;
    color: $accordion-disabled-text-color !important;
    pointer-events: none;

    span.audible {
      color: $ids-color-palette-white !important;
    }

    a {
      color: $accordion-disabled-text-color !important;
    }

    .icon {
      color: $accordion-disabled-text-color !important;

      &.plus-minus {
        &::before,
        &::after {
          background-color: $accordion-disabled-text-color !important;
        }
      }
    }

    + .accordion-pane {
      background-color: $accordion-disabled-pane-bg-color !important;
      border-bottom-color: $accordion-disabled-pane-bg-color !important;

      .accordion-header {
        background-color: $accordion-disabled-pane-bg-color !important;
        border-bottom-color: $accordion-disabled-pane-bg-color !important;

        a {
          color: $accordion-disabled-text-color !important;
        }

        .icon {
          color: $accordion-disabled-text-color !important;

          &.plus-minus {
            &::before,
            &::after {
              background-color: $accordion-disabled-text-color !important;
            }
          }
        }
      }
    }
  }

  &.filtered {
    color: $accordion-filtered-text-color;

    &.icon {
      color: $accordion-filtered-text-color;
    }

    &:not(.has-filtered-children) {
      display: none;
    }
  }
}

// Level 1 Accordion Pane
.accordion-pane {
  @include transition(padding 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

  display: none;
  overflow: hidden;
  padding: 0;

  &:not(.is-expanded) {
    height: 0;
  }

  // Visible accordion panes force a border to show up on the next accordion header for visual separation
  &.is-expanded {
    display: block;
    padding: 0;

    + .accordion-header,
    + .accordion-content {
      border-top-color: $accordion-border-color;

      &.is-focused:not(.hide-focus) {
        border-top-color: $accordion-focused-border-color;
      }
    }
  }

  .accordion-content {
    color: $accordion-text-color;
    overflow-x: visible;

    p {
      font-size: $ids-size-font-base;
      -webkit-text-size-adjust: 100%;
    }

    &.filtered {
      display: none;
    }
  }

  @include left-align-cascade-styles-pane(20px, 40px, 40px);

  // These rules allow the accordion to expand
  // Level 2 Accordion Header
  .accordion-header {
    height: 34px;

    &:not(:first-child) {
      border-top-color: transparent;
    }

    &:last-child {
      border-bottom: 1px solid transparent;
    }

    > a {
      padding: 8px 0 8px 20px;
    }

    > [class^='btn'],
    > .icon {
      margin-left: 14px;

      + a {
        padding: 8px 0 8px 1px;
        width: calc(100% - 41px);
      }
    }

    > [class^='btn'] {
      height: 25px;
      width: 20px;

      .icon.plus-minus {
        &::before,
        &::after {
          left: 5px;
          top: 10px;
          width: 10px;
        }
      }
    }

    &.list-item {
      &::before {
        color: $accordion-icon-color;
        content: '\25cf';
        display: inline-block;
        font-size: $ids-size-font-sm;
        padding: 4px 10px 8px 21px;
        vertical-align: middle;
      }

      a {
        padding-left: 1px;
        vertical-align: middle;
        width: calc(100% - 41px);
      }

      &.is-disabled {
        > a {
          color: $accordion-disabled-text-color;
        }
      }
    }

    &.is-focused:not(.hide-focus) {
      border-color: $accordion-focused-border-color;

      &:last-child {
        border-bottom-color: $accordion-focused-border-color;
      }
    }

    &.is-selected,
    &.is-selected:hover {
      color: $accordion-selected-text-color;

      &.list-item {
        &::before {
          color: inherit;
        }
      }
    }

    &.is-disabled {
      background-color: $accordion-disabled-pane-bg-color;
    }

    // Subheaders can now have chevrons as of v4.23.x
    &:not(.has-chevron) {
      .icon.chevron {
        height: 16px;
        left: -8px;
        top: -1px;
        width: 16px;
      }
    }
  }

  // Level 2 Accordion Pane
  .accordion-pane {
    border-bottom-color: transparent;
    padding: 0;

    @include left-align-cascade-styles-pane(59px, 59px, 40px);

    // Level 3 Accordion Header
    .accordion-header {
      @include left-align-cascade-styles-header(40px, 34px, 59px, 41px);
    }

    // Level 3 Accordion Pane
    .accordion-pane {
      @include left-align-cascade-styles-pane(78px, 78px, 59px);

      // Level 4 Accordion Header
      .accordion-header {
        @include left-align-cascade-styles-header(59px, 53px, 78px, 60px);
      }

      // Level 4 Accordion Pane
      .accordion-pane {
        @include left-align-cascade-styles-pane(97px, 97px, 78px);

        // Level 5 Accordion Header
        .accordion-header {
          @include left-align-cascade-styles-header(78px, 72px, 97px, 79px);
        }

        // Level 5 Accordion Pane
        .accordion-pane {
          @include left-align-cascade-styles-pane(116px, 116px, 97px);

          // Level 6 Accordion Header
          .accordion-header {
            @include left-align-cascade-styles-header(97px, 92px, 117px, 99px);
          }

          // Level 6 Accordion Pane
          .accordion-pane {
            .accordion-content {
              padding-left: 116px;
            }
          }
        }
      }
    }
  }
}

.accordion-content {
  padding: 15px 0 15px 20px;
}

// Slight adjustment to padding/placement of icons on JP styles.
// JP fonts have different character spacing/padding requirements.
// See Github: infor-design/enterprise#3364
html[lang='ja-JP'] {
  .accordion-pane {
    .accordion-header.list-item {
      &::before {
        font-size: 0.8rem;
      }
    }
  }
}

// RTL Styles
html[dir='rtl'] {
  .accordion {
    > .accordion-content {
      padding-left: auto;
      padding-right: 20px;
    }

    // Level 1
    .accordion-header {
      -webkit-font-feature-settings: 'ccmp' 0;
      font-feature-settings: 'ccmp' 0;

      > a {
        padding-left: 0;
        padding-right: 20px;
      }

      > .icon,
      > [class^='btn'] {
        + a {
          padding-right: 0;
        }
      }
    }

    .accordion-pane {
      .accordion-content {
        padding-left: 0;
        padding-right: 20px;
      }

      &.has-icons {
        .accordion-header.no-icon > a {
          padding-right: 40px;
        }

        .accordion-content {
          padding-right: 40px;
        }
      }

      // Level 2
      .accordion-header {
        > a {
          padding-left: 0;
          padding-right: 20px;
        }

        > .icon,
        > [class^='btn'] {
          margin-left: 3px;
          margin-right: 14px;

          + a {
            padding-left: 0;
            padding-right: 1px;
          }
        }

        &.list-item {
          &::before {
            padding-left: 10px;
            padding-right: 21px;
          }

          a {
            padding-right: 1px;
          }
        }
      }

      .accordion-pane {
        .accordion-content {
          padding-left: 0;
          padding-right: 40px;
        }

        &.has-icons {
          .accordion-header.no-icon > a {
            padding-left: 0;
            padding-right: 59px;
          }

          .accordion-content {
            padding-left: 0;
            padding-right: 59px;
          }
        }

        // Level 3
        .accordion-header {
          > a {
            padding-left: 0;
            padding-right: 40px;
          }

          > .icon,
          > [class^='btn'] {
            margin-left: 3px;
            margin-right: 34px;

            + a {
              padding-right: 0;
            }
          }

          &.list-item {
            &::before {
              padding-left: 10px;
              padding-right: 41px;
            }

            a {
              padding-right: 1px;
            }
          }
        }

        .accordion-pane {
          .accordion-content {
            padding-left: 0;
            padding-right: 59px;
          }

          &.has-icons {
            .accordion-header.no-icon > a {
              padding-left: 0;
              padding-right: 78px;
            }

            .accordion-content {
              padding-left: 0;
              padding-right: 78px;
            }
          }

          // Level 4
          .accordion-header {
            > a {
              padding-left: 0;
              padding-right: 59px;
            }

            > .icon,
            > [class^='btn'] {
              margin-left: 3px;
              margin-right: 53px;

              + a {
                padding-right: 0;
              }
            }

            &.list-item {
              &::before {
                padding-left: 10px;
                padding-right: 60px;
              }

              a {
                padding-right: 1px;
              }
            }
          }

          .accordion-pane {
            .accordion-content {
              padding-left: 0;
              padding-right: 78px;
            }

            &.has-icons {
              .accordion-header.no-icon > a {
                padding-left: 0;
                padding-right: 97px;
              }

              .accordion-content {
                padding-left: 0;
                padding-right: 97px;
              }
            }

            // Level 5
            .accordion-header {
              > a {
                padding-left: 0;
                padding-right: 78px;
              }

              > .icon,
              > [class^='btn'] {
                margin-left: 3px;
                margin-right: 72px;

                + a {
                  padding-right: 0;
                }
              }

              &.list-item {
                &::before {
                  padding-left: 10px;
                  padding-right: 79px;
                }

                a {
                  padding-right: 1px;
                }
              }
            }

            .accordion-pane {
              .accordion-content {
                padding-left: 0;
                padding-right: 78px;
              }

              &.has-icons {
                .accordion-header.no-icon > a {
                  padding-left: 0;
                  padding-right: 116px;
                }

                .accordion-content {
                  padding-left: 0;
                  padding-right: 116px;
                }
              }

              // Level 6
              .accordion-header {
                > a {
                  padding-left: 0;
                  padding-right: 97px;
                }

                > .icon,
                > [class^='btn'] {
                  margin-left: 3px;
                  margin-right: 92px;

                  + a {
                    padding-right: 0;
                  }
                }

                &.list-item {
                  &::before {
                    padding-left: 10px;
                    padding-right: 99px;
                  }

                  a {
                    padding-right: 1px;
                  }
                }
              }

              .accordion-pane {
                .accordion-content {
                  padding-left: 0;
                  padding-right: 116px;
                }
              }
            }
          }
        }
      }
    }

    // Change padding/margin for headers based on icon existence
    &.has-icons {
      .accordion-header {
        > a {
          padding-right: 55px;
        }

        > .icon,
        > [class^='btn'] {
          + a {
            padding-right: 0;
          }
        }
      }

      .accordion-pane {
        .accordion-content {
          padding-right: 54px;
        }

        &.has-icons {
          .accordion-header.no-icon > a {
            padding-right: 55px;
          }

          .accordion-content {
            padding-right: 55px;
          }
        }

        // Level 2
        .accordion-header {
          > a {
            padding-right: 36px;
          }

          &.no-icon {
            > a {
              padding-inline-start: 56px;
              padding-inline-end: 40px;
            }
          }

          > .icon,
          > [class^='btn'] {
            margin-left: 3px;
            margin-right: 30px;

            + a {
              padding-left: 0;
              padding-right: 1px;
            }
          }

          &.list-item {
            &::before {
              padding-left: 10px;
              padding-right: 37px;
            }

            a {
              padding-right: 0;
            }
          }
        }

        .accordion-pane {
          .accordion-content {
            padding-right: 54px;
          }

          &.has-icons {
            .accordion-header.no-icon > a {
              padding-right: 74px;
            }

            .accordion-content {
              padding-right: 74px;
            }
          }

          // Level 3
          .accordion-header {
            > a {
              padding-right: 54px;
            }

            > .icon,
            > [class^='btn'] {
              margin-left: 3px;
              margin-right: 49px;

              + a {
                padding-left: 0;
                padding-right: 0;
              }
            }

            &.list-item {
              &::before {
                padding-left: 10px;
                padding-right: 56px;
              }

              a {
                padding-right: 0;
              }
            }
          }

          .accordion-pane {
            .accordion-content {
              padding-right: 74px;
            }

            &.has-icons {
              .accordion-header.no-icon > a {
                padding-right: 93px;
              }

              .accordion-content {
                padding-right: 93px;
              }
            }

            // Level 4
            .accordion-header {
              > a {
                padding-right: 74px;
              }

              > .icon,
              > [class^='btn'] {
                margin-left: 3px;
                margin-right: 68px;

                + a {
                  padding-left: 0;
                  padding-right: 0;
                }
              }

              &.list-item {
                &::before {
                  padding-left: 10px;
                  padding-right: 75px;
                }

                a {
                  padding-right: 0;
                }
              }
            }

            .accordion-pane {
              .accordion-content {
                padding-right: 93px;
              }

              &.has-icons {
                .accordion-header.no-icon > a {
                  padding-right: 112px;
                }

                .accordion-content {
                  padding-right: 112px;
                }
              }

              // Level 5
              .accordion-header {
                > a {
                  padding-right: 93px;
                }

                > .icon,
                > [class^='btn'] {
                  margin-left: 3px;
                  margin-right: 87px;

                  + a {
                    padding-left: 0;
                    padding-right: 0;
                  }
                }

                &.list-item {
                  &::before {
                    padding-left: 10px;
                    padding-right: 94px;
                  }

                  a {
                    padding-right: 0;
                  }
                }
              }

              .accordion-pane {
                .accordion-content {
                  padding-right: 112px;
                }

                &.has-icons {
                  .accordion-header.no-icon > a {
                    padding-right: 132px;
                  }

                  .accordion-content {
                    padding-right: 132px;
                  }
                }

                // Level 6
                .accordion-header {
                  > a {
                    padding-right: 112px;
                  }

                  > .icon,
                  > [class^='btn'] {
                    margin-left: 3px;
                    margin-right: 106px;

                    + a {
                      padding-left: 0;
                      padding-right: 0;
                    }
                  }

                  &.list-item {
                    &::before {
                      padding-left: 10px;
                      padding-right: 113px;
                    }

                    a {
                      padding-right: 0;
                    }
                  }
                }

                .accordion-pane {
                  .accordion-content {
                    padding-right: 132px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
/* stylelint-enable max-nesting-depth,selector-max-compound-selectors */

// Dirty Hack because Firefox never lines things up right
// These rules vertically "center" the plus-minus icon in
.is-firefox {
  .accordion-header {
    > [class^='btn'] {
      .icon.plus-minus {
        &::before,
        &::after {
          top: 15px;
        }
      }
    }
  }

  .accordion-pane {
    .accordion-header {
      > [class^='btn'] {
        .icon.plus-minus {
          &::before,
          &::after {
            top: 9px;
          }
        }
      }
    }
  }
}

html {
  &.is-safari,
  &.ios {
    .accordion-header {
      .btn {
        top: -2px;
      }
    }
  }
}

// Fix size of the bullet icon on Android devices
html.android {
  .accordion-pane {
    .accordion-header.list-item {
      &::before {
        font-size: 0.7rem;
      }
    }
  }
}

// Windows-style popup for truncated text elements
.tooltip {
  &.tooltip-accordion-style {
    background-color: $ids-color-palette-white;
    color: $ids-color-palette-black;

    .arrow {
      display: none;
    }

    .tooltip-content {
      padding: 5px;

      p {
        color: $ids-color-palette-black;
      }
    }
  }
}