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

:host {
  position: relative;
  overflow: hidden;
  flex: auto;
  text-overflow: ellipsis;
}

.computed-style-property {
  --goto-size: 16px;

  font-family: var(--monospace-font-family);
  font-size: var(--monospace-font-size);
  min-height: 16px;
  box-sizing: border-box;
  padding-top: 2px;
  white-space: nowrap;
  user-select: text;
}

.computed-style-property:hover {
  background-color: var(--sys-color-state-hover-on-subtle);
  cursor: text;
}

.computed-style-property.inherited {
  opacity: 75%;
  font-style: italic;
}

.property-name,
.property-value {
  display: contents;
  overflow: hidden;
  text-overflow: ellipsis;
}

.property-name {
  width: 16em;
  max-width: 52%;
  margin-right: calc(var(--goto-size) / 2);
  display: inline-block;
  vertical-align: text-top;
  color: var(--webkit-css-property-color, var(--sys-color-token-property-special)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
}

.property-value {
  margin-left: 2em;
}

.goto {
  display: none;
  cursor: pointer;
  position: absolute;
  width: var(--goto-size);
  height: var(--goto-size);
  margin: -1px 0 0 calc(-1 * var(--goto-size));
  mask: var(--image-file-goto-filled) center / contain no-repeat;
  background-color: var(--sys-color-primary-bright);
}

.computed-style-property:hover .goto {
  display: inline-block;
}

.hidden {
  display: none;
}
/* narrowed styles */
:host-context(.computed-narrow) .computed-style-property {
  white-space: normal;

  & .goto {
    display: none;
    margin-left: 0;
  }
}

:host-context(.computed-narrow) .property-name,
:host-context(.computed-narrow) .property-value {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  white-space: nowrap;
}

:host-context(.computed-narrow) .computed-style-property:not(.inherited):hover {
  & .property-value {
    margin-left: var(--goto-size);
  }

  & .goto {
    display: inline-block;
  }
}
/* high-contrast styles */
@media (forced-colors: active) {
  .computed-style-property.inherited {
    opacity: 100%;
  }

  .computed-style-property:hover {
    forced-color-adjust: none;
    background-color: Highlight;
  }

  .computed-style-property:hover * {
    color: HighlightText;
  }

  .goto {
    background-color: HighlightText;
  }
}