@use '../../../../../styles/typography';
@use '../../../../../styles/theme' as th;

:host {
  display: block;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--senary-contrast) 80%, transparent 20%);
  backdrop-filter: blur(5px);
  padding: 0.75rem;
  max-height: calc(100% - 4rem);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--quaternary-contrast) transparent;

  .header {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--quinary-contrast);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;

    .action-btn {
      display: flex;
      align-items: center;
      gap: 0.25rem;

      mat-icon {
        width: 16px;
        height: 16px;
        font-size: 16px;
      }
    }

    .close-btn {
      mat-icon {
        width: 14px;
        height: 14px;
        font-size: 14px;
        color: var(--secondary-contrast);
      }
    }
  }

  dl {
    display: grid;
    grid-template-columns: 2.75rem auto;
    column-gap: 0.25rem;
    row-gap: 0.5rem;
    margin: 0;
    margin-top: 0.75rem;

    .node-name {
      font-weight: 500;
    }

    dd {
      margin-left: 0;

      .type {
        padding: 0.075rem 0.375rem;
        border-radius: 0.5rem;
        color: white;

        &.type-signal {
          background-color: var(--blue-02);
        }

        &.type-computed {
          background-color: var(--green-01);
        }

        &.type-effect {
          background-color: var(--purple-02);
        }

        &.type-template {
          background-color: var(--gray-500);
        }

        &.type-linked-signal {
          background-color: var(--red-03);
        }
      }
    }
  }

  .value,
  ng-signals-value-tree {
    border-radius: 0.25rem;
    margin-top: 0.75rem;
    background: var(--nonary-contrast);
    padding-block: 0.25rem;
  }

  ng-signals-value-tree {
    scrollbar-width: thin;
    scrollbar-color: var(--quaternary-contrast) transparent;
  }

  .value {
    @extend %monospaced;
    padding-inline: 0.5rem;
  }
}

@include th.dark-theme {
  :host {
    background: color-mix(in srgb, var(--octonary-contrast) 80%, transparent 20%);
  }
}
