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

/**
 * Applies proper shadows to the <h3> + <div class="crm-block"> (and others) pairs.
 *
 * @NOTE
 * If you apply shadows to these elements directly (not via :before pseudoclass),
 * then the shadows will overlap. The method makes it visually look like there is
 * just a single shadow underneath the pair.
 */

@mixin block-shadows-for-pair () {
  position: relative;

  // Discard direct shadows
  &,
  > .selector {
    box-shadow: none !important;
  }

  &::before {
    bottom: 0;
    box-shadow: $box-shadow;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    // This is needed to place the shadows underneath so they do not overlap
    z-index: -1;
  }
}

// We need this mixin because we want to apply these styles to the
// h3+.crm-block pairs that not only are deep children of .crm-container,
// but are also *direct* children of that div. The `.crm-container` is added
// by Gulp, so we cannot use `&` operator because there is no actual parent
// in SCSS, hence we have to use this mixin to use it for both cases:
// .crm-container >h3:not(.crm-severity-info)
// .crm-container *:not(.crm-form-block)>h3:not(.crm-severity-info)
@mixin block-shadows-for-h3-crm-form-block-pair () {
  > h3:not(.crm-severity-info) {
    &,
    + div,
    + script + div {
      @include block-shadows-for-pair();
    }

    // Discard unneeded paddings and borders
    + .form-item {
      padding-bottom: 0;

      > .selector tbody tr:last-child {
        border-bottom: 0 !important;
      }
    }
  }
}

*:not(.crm-accordion-wrapper) > .crm-accordion-header {
  &,
  + .crm-accordion-body {
    @include block-shadows-for-pair();
  }
}

// Need that otherwise shadows will be cropped on the top and the bottom
#crm-main-content-wrapper,
#crm-container {
  position: relative;
  z-index: 1;
}

@include block-shadows-for-h3-crm-form-block-pair();

*:not(.crm-form-block) {
  @include block-shadows-for-h3-crm-form-block-pair();
}

h3::before {
  border-radius: #{$border-radius-base} #{$border-radius-base} 0 0 !important;
}

h3 {
  + div,
  + script + div {
    &,
    &::before {
      border-radius: 0 0 #{$border-radius-base} #{$border-radius-base} !important;
    }

    .crm-submit-buttons {
      // Need to discard the background otherwise this block will have sharp edges
      background-color: transparent !important;
    }

    .dataTables_wrapper {
      box-shadow: none;
    }
  }
}