/**
 * For the full copyright and license information, please view the
 * docs/licenses/LICENSE.txt file that was distributed with this source code.
 */
$component: panel;

.#{$component} {
  padding: 0;
  box-shadow: none;

  &-heading,
  > h3 {
    display: flex;
    gap: map-get($map: $cdk-size, $key: "size-16");
    align-items: center;
    width: 100%;
    padding: map-get($map: $cdk-size, $key: "size-16");
    margin: map-get($map: $cdk-size, $key: "size-0");
    font-size: map-get($map: $cdk-size, $key: "size-18");
    font-weight: 600;

    > i {
      font-size: map-get($map: $cdk-size, $key: "size-18");
    }
  }

  &-title {
    font-size: map-get($map: $cdk-size, $key: "size-18");
    font-weight: 600;
  }

  &-heading-action {
    display: flex;
    gap: map-get($map: $cdk-size, $key: "size-12");
    align-items: center;
    margin: 0 0 0 auto;

    .list-toolbar-btn {
      color: map-get($map: $cdk-primary, $key: "primary-500");

      &:hover {
        color: map-get($map: $cdk-primary, $key: "primary-800");
        text-decoration: none;
      }

      [class^="process-icon-"] {
        color: var(--#{$cdk}primary-800);
      }
    }
  }

  &-footer {
    @extend .clearfix;
    padding-inline: var(--#{$cdk}size-20) !important;
    margin-top: var(--#{$cdk}size-16);

    .btn {
      margin-inline: var(--#{$cdk}size-4);
    }
  }

  &:not(
  .#{$component}-default,
  .#{$component}-primary,
  .#{$component}-success,
  .#{$component}-info,
  .#{$component}-warning,
  .#{$component}-danger
) {
    @extend .#{$component}-default;

    .#{$component}-heading {
      border-bottom: none;
    }

    &:not(:has(.#{$component}-heading, .#{$component}-body, .#{$component}-footer)) {
      padding: map-get($map: $cdk-size, $key: "size-16");
    }
  }

  &:has(.#{$component}-footer) {
    padding: 0;

    > *:not(.#{$component}-heading, .#{$component}-body, .alert) {
      padding-inline: map-get($map: $cdk-size, $key: "size-24");

      *:is(.panel) {
        &:not(:has(.#{$component}-footer)) {
          padding: map-get($map: $cdk-size, $key: "size-16");
        }
      }
    }

    > .alert {
      margin-inline: map-get($map: $cdk-size, $key: "size-24");
    }
  }

  &:has(.#{$component}-heading, > h3) {
    &:not(:has(.#{$component}-footer, .#{$component}-body)) {
      padding: map-get($map: $cdk-size, $key: "size-16");

      .#{$component}-heading,
      .#{$component} > h3
      .#{$component}-body {
        padding: map-get($map: $cdk-size, $key: "size-0");
      }

      .#{$component}-heading,
      .#{$component} > h3 {
        padding-bottom: map-get($map: $cdk-size, $key: "size-16");
      }
    }
  }

  &:not(:has(> *)) {
    padding: map-get($map: $cdk-size, $key: "size-16");
  }
}