/* stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-no-qualifying-type, selector-max-id */

%no-border-radius {
  border-radius: 0 !important;
}

.crm-accordion-header {
  @include accordion-header;

  &:not(.crm-master-accordion-header) {
    border-bottom: 1px solid $crm-grayblue-dark;
    font-size: $font-size-base !important;
    font-weight: $crm-font-weight-h3;
  }

  &.crm-master-accordion-header {
    background: $brand-primary !important;
    border-radius: $border-radius-base $border-radius-base 0 0 !important;
    color: $crm-white !important;
    font-size: $font-size-h2;
    font-weight: $crm-font-weight-h3 !important;
    
    &::before {
      color: $crm-white;
    }
  }

  .crm-close-accordion {
    margin-top: 5px;
    position: absolute;
    right: 7px;
    top: 7px;
  }

  .helpicon {
    color: $brand-primary;
    opacity: 1;
    padding-left: 15px;

    &:hover {
      opacity: 0.8;
    }
  }
}

.crm-accordion-wrapper {
  border-radius: 0;
  margin-bottom: 0;

  &:not(.collapsed) {
    .crm-accordion-header {
      &::before {
        content: '\f107';
      }
    }
  }

  &.collapsed {
    .crm-accordion-header {
      &::before {
        content: '\f105';
      }
    }

    .crm-master-accordion-header {
      border-radius: $border-radius-base !important;
    }
  }
}

.crm-master-accordion-header + .crm-accordion-body {
  border-radius: 0 0 $border-radius-base $border-radius-base !important;
}

.crm-accordion-header:not(.crm-master-accordion-header) + .crm-accordion-body {
  box-shadow: $crm-box-shadow-inset;
  padding: 15px !important;

  td {
    &.label {
      color: $gray-darker;
      font-weight: $crm-font-weight-h3;
      padding-left: 0;

      label {
        padding: 0;
      }
    }

    label {
      position: relative;
    }
  }
}

.crm-accordion-body {
  @extend %no-border-radius;
  background: $crm-white;
  border: 0;
  color: $gray-darker;
  font-family: $font-family-base;
  font-size: $font-size-base;

  .form-item,
  .form-item > table {
    margin: 0;
  }

  td {
    border-right-width: 0;
  }

  > table {
    &,
    td,
    th,
    tr {
      background: none !important;
    }
  }

  .helpicon {
    color: $brand-primary;
    font-size: $font-size-base;
    opacity: 1;
  }

  span,
  div {
    &.description {
      display: block;
      line-height: 1.5em;
    }
  }
}