@import "dxHelpers/reset";
@import "dxHelpers/commonTreeItem";

:host {
    display: block;

    --base-indentation: calc(var(--dx-g-icon-size-xs) + var(--dx-g-spacing-xs));
}

.flex {
    display: flex;
}

[aria-expanded] {
    transition: var(--dx-g-transition-transform-2x);
}

[aria-expanded="true"] {
    transform: rotate(90deg);
}

.tile {
    --tile-height: 20px;

    font-family: var(--dx-g-font-sans);
    font-size: 14px;
    line-height: var(--tile-height);
    font-weight: var(--dx-g-font-normal);
}

.tile-root {
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-sm);
    font-weight: var(--dx-g-font-bold);
    color: var(--dx-g-blue-vibrant-20);
    display: block;
}

.tile-icon {
    align-items: center;
    height: var(--tile-height);
    padding: calc(var(--dx-g-spacing-sm) + var(--dx-g-spacing-2xs))
        calc(var(--dx-g-spacing-xs) + 2px)
        calc(var(--dx-g-spacing-sm) + var(--dx-g-spacing-2xs)) 0;
}

.tile-label {
    flex: 1;
}

.tile-root .tile-expand-icon {
    margin-left: auto;
}

.tile-external-link-icon {
    display: inline-flex;
    align-items: center;
    margin-left: var(--dx-g-spacing-xs);
}

.tile-forward-arrow {
    margin-left: auto;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.tile-with-children .tile-label {
    order: 2;
}

.tile-with-children .tile-expand-icon {
    order: 1;
}

.indentation {
    padding-left: calc(var(--indentation) + var(--dx-g-spacing-2xs));
}

.tile-with-children .indentation {
    padding-left: calc(var(--indentation) - var(--base-indentation));
}

.tile-root-with-child .indentation {
    padding-left: 0;
}

[aria-level="2"] {
    --indentation: var(--dx-g-spacing-md);
}

[aria-level="3"] {
    --indentation: calc(2 * var(--base-indentation));
}

[aria-level="4"] {
    --indentation: calc(3 * var(--base-indentation));
}

[aria-level="5"] {
    --indentation: calc(4 * var(--base-indentation));
}

[aria-level="6"] {
    --indentation: calc(5 * var(--base-indentation));
}

[aria-level="7"] {
    --indentation: calc(6 * var(--base-indentation));
}

[aria-level="8"] {
    --indentation: calc(7 * var(--base-indentation));
}

[aria-level="9"] {
    --indentation: calc(8 * var(--base-indentation));
}

[aria-level="10"] {
    --indentation: calc(9 * var(--base-indentation));
}

[aria-level="11"] {
    --indentation: calc(10 * var(--base-indentation));
}

[aria-level="12"] {
    --indentation: calc(11 * var(--base-indentation));
}

[aria-level="13"] {
    --indentation: calc(12 * var(--base-indentation));
}

[aria-level="14"] {
    --indentation: calc(13 * var(--base-indentation));
}

[aria-level="15"] {
    --indentation: calc(14 * var(--base-indentation));
}

[aria-level="16"] {
    --indentation: calc(15 * var(--base-indentation));
}

[aria-level="17"] {
    --indentation: calc(16 * var(--base-indentation));
}

[aria-level="18"] {
    --indentation: calc(17 * var(--base-indentation));
}

[aria-level="19"] {
    --indentation: calc(18 * var(--base-indentation));
}

[aria-level="20"] {
    --indentation: calc(19 * var(--base-indentation));
}

[aria-level="21"] {
    --indentation: calc(20 * var(--base-indentation));
}

[aria-level="22"] {
    --indentation: calc(21 * var(--base-indentation));
}

dx-metadata-badge {
    --dx-c-metadata-badge-text-width: 21px;
}

dx-metadata-badge.get {
    --dx-c-metadata-badge-color: var(--dx-g-blue-vibrant-50);
    --dx-c-metadata-badge-background: var(--dx-g-blue-vibrant-90);
}

dx-metadata-badge.put {
    --dx-c-metadata-badge-color: var(--dx-g-yellow-vibrant-40);
    --dx-c-metadata-badge-background: var(--dx-g-yellow-vibrant-90);
}

dx-metadata-badge.post {
    --dx-c-metadata-badge-color: var(--dx-g-green-vibrant-40);
    --dx-c-metadata-badge-background: var(--dx-g-green-vibrant-90);
}

dx-metadata-badge.patch {
    --dx-c-metadata-badge-color: var(--dx-g-teal-vibrant-40);
    --dx-c-metadata-badge-background: var(--dx-g-teal-vibrant-90);
}

dx-metadata-badge.delete {
    --dx-c-metadata-badge-color: var(--dx-g-red-vibrant-40);
    --dx-c-metadata-badge-background: var(--dx-g-hot-orange-vibrant-90);
}

a {
    display: block;
    text-decoration: none;
}

a:link,
a:visited {
    color: var(--dx-g-blue-vibrant-20);
}

a:visited.tile-root,
a:link.tile-root {
    color: var(--dx-g-blue-vibrant-20);
}