@import url('./action-button.css');
@import url('./details-popup.css');

.view-signature {
    position: relative;
    margin: 1px 0;
    padding: 7px 32px 7px 8px;
    overflow: auto;
    font-family: var(--discovery-monospace-font-family);
    font-size: var(--discovery-monospace-font-size, 12px);
    line-height: var(--discovery-monospace-line-height, 1.5); /* 18px */
    background: rgba(205, 205, 205, 0.1);
    color: var(--discovery-fmt-color);
    white-space: pre;
}
.discovery-view-popup .view-signature {
    background: none;
}

.view-signature .expand {
    padding: 2px;
    margin: 0 -2px;
}
.view-signature .expand:hover {
    color: var(--discovery-fmt-hover-color);
    background-color: rgba(187, 187, 187, 0.25);
    border-radius: 4px;
    cursor: pointer;
}

.view-signature .count {
    display: inline-block;
    vertical-align: middle;
    padding-left: 6px;
    padding-bottom: 2px;
    color: rgba(153, 153, 153, 0.5);
    font-size: .916em; /* 11px */
    line-height: 1;
}
.view-signature .count::before {
    content: attr(data-value);
}
.view-signature .count:hover {
    color: inherit;
}

.view-signature .object-entries {
    background-image: linear-gradient(to bottom, rgba(187, 187, 187, 0.15), rgba(187, 187, 187, 0.15));
    background-size: 1px calc(100% - 3px);
    background-position: calc(3px + 1.15ex * var(--object-entries-offset, 0)) 1px;
    background-repeat: no-repeat;
    background-attachment: local;
    background-origin: content-box;
}

.view-signature .property {
    padding: 2px;
    margin: 0 -2px;
    color: var(--discovery-fmt-property-color);
    cursor: pointer;
}
.view-signature .property.discovery-view-popup-active,
.view-signature .property:hover {
    background-color: rgba(170, 170, 170, 0.2);
}
.view-signature .optional {
    color: var(--discovery-fmt-flag-color);
    padding-left: 2px;
}

.view-signature .type {
    padding: 2px;
    margin: 0 -2px 0 -2px;
    color: var(--discovery-fmt-type-color);
    cursor: pointer;
}
.view-signature .type.discovery-view-popup-active,
.view-signature .type:hover {
    background-color: rgba(170, 170, 170, 0.2);
}
.view-signature .type.discovery-view-popup-active {
    position: relative;
    z-index: 1;
}