/*
 * Copyright 2018 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

@scope to (devtools-widget > *) {
  :scope {
    display: inline;
  }

  .node-link {
    cursor: pointer;
    display: inline;
    pointer-events: auto;
    outline-offset: 2px;

    /* If the element has lots of classes, don't let the label get too wide */
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: min(100%, 550px);

    &:focus-visible {
      outline-width: unset;
    }

    &.dynamic-link:hover {
      text-decoration: underline;
    }
  }

  .node-link.disabled {
    .node-label-name,
    .node-label-class,
    .node-label-pseudo,
    .node-label-name .dynamic-link,
    .node-label-id {
      color: var(--sys-color-state-disabled);
    }
  }

  .node-label-name {
    color: var(--sys-color-token-tag);

    .dynamic-link & {
      color: var(--text-link);
    }
  }

  .node-label-class,
  .node-label-pseudo {
    color: var(--sys-color-token-attribute);
  }
}