/*
 * Copyright (c) 2017 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.computed-style-property {
    overflow: hidden;
    flex: auto;
    text-overflow: ellipsis;
}

.computed-style-property .property-name {
    width: 16em;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 52%;
    display: inline-block;
    vertical-align: text-top;
}

.computed-style-property .property-value {
    margin-left: 2em;
    position: relative;
}

.computed-style-property .property-value-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-outline li:hover .goto-source-icon {
    display: block;
    margin-top: -2px;
}

.goto-source-icon {
    background-color: #5a5a5a;
    display: none;
    position: absolute;
    left: -16px;
    top: 0;
}

.goto-source-icon:hover {
    background-color: #333;
}

.computed-style-property-inherited {
    opacity: 0.5;
}

.trace-link {
    user-select: none;
    float: right;
    padding-left: 1em;
    position: relative;
    z-index: 1;
}

.property-trace {
    text-overflow: ellipsis;
    overflow: hidden;
    flex-grow: 1;
}

.property-trace-selector {
    color: gray;
    padding-left: 2em;
}

.property-trace-value {
    position: relative;
    display: inline-block;
    margin-left: 16px;
}

.property-trace-inactive .property-trace-value::before {
    position: absolute;
    content: ".";
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
    top: 0;
    bottom: 5px;
    left: 0;
    right: 0;
}

.tree-outline li.odd-row {
    position: relative;
    background-color: #F5F5F5;
}

.tree-outline, .tree-outline ol {
    padding-left: 0;
}

.tree-outline li:hover {
    background-color: rgb(235, 242, 252);
    cursor: pointer;
}

.tree-outline li::before {
    margin-left: 4px;
}

.delimeter {
    color: transparent;
}

.delimeter::selection {
    color: transparent;
}

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

.computed-narrow .computed-style-property {
    padding: 2px 0;
    display: block;
    white-space: normal;
}

.computed-narrow.tree-outline li::before {
    margin-top: -14px;
}

@media (forced-colors: active) {
    .computed-style-property-inherited {
        opacity: 1;
    }
    :host-context(.monospace.computed-properties) .tree-outline li:hover {
        forced-color-adjust: none;
        background-color: Highlight;
    }
    :host-context(.monospace.computed-properties) .tree-outline:not(.hide-selection-when-blurred) li.parent:hover.selected::before,
    :host-context(.monospace.computed-properties) .tree-outline-disclosure li.parent:hover::before,
    :host-context(.monospace.computed-properties) .tree-outline li:hover .goto-source-icon {
        background-color: HighlightText;
    }
    :host-context(.monospace.computed-properties) .tree-outline li:hover * {
        color: HighlightText;
    }
    .property-trace-inactive .property-trace-value::before {
        content: "";
        border-bottom-color: HighlightText !important;
    }
}