@use '../../../../../../styles/typography';
@use '../../../../../shared/object-tree-explorer/prop-action-btn';

:host {
  ng-docs-ref-button {
    margin-left: 0.125rem;
  }

  .services {
    margin: 0.5rem;
    border-radius: 0.375rem;
    background: color-mix(in srgb, var(--senary-contrast) 50%, var(--color-background) 50%);
    overflow: hidden;
  }

  .mat-accordion-content {
    &:not(:empty) {
      border-top: 1px solid var(--color-separator);
    }

    ng-object-tree-explorer {
      --ote-row-indent: 0.25rem;

      .show-signal {
        mat-icon {
          width: 14px;
          height: 14px;
          font-size: 14px;
        }
      }
    }
  }

  /* FRAGILE */
  ::ng-deep {
    mat-expansion-panel {
      border-radius: unset !important;
    }

    .mat-expansion-panel-body {
      padding: 0;
    }

    .mat-expansion-panel-spacing {
      margin: 0;
    }

    .mat-expansion-panel-header {
      padding: 0 15px;

      .documentation {
        display: flex;
        align-self: center;
        text-decoration: none;
      }

      .docs-link {
        height: inherit;
        width: fit-content;
        font-size: initial;
        padding-left: 0.1rem;

        &:active {
          color: var(--blue-02);
        }
      }
    }

    .mat-expansion-panel-header-title {
      @extend %body-medium-01;
    }

    .mat-expansion-indicator {
      &::after {
        padding: 2.5px;
        margin-bottom: 4.5px;
      }
    }
  }
}
