@import 'common.less';

.ast {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    scroll-behavior: smooth;
    display: flex;

    margin-left: 4px;
    margin-top: 2px;

    @button-width: 20px;

    ol {
        margin: 0;
        padding-left: 20px;
    }

    > ol {
        padding: 0;
    }

    li {
        cursor: pointer;
        padding-right: 6px;

        &.selected {
            background-color: var(--highlight-color);
        }
    }

    button {
        display: inline-block;
        outline: none;
        border: none;
        border-radius: 0;
        padding: 0;
        width: @button-width;
        height: @button-width;
        // TODO: Dynamically embed SVG values during the build
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 0.5 20 20'%3E%3Cpath d='M6 10h8' stroke='%23000' fill='none'/%3E%3C/svg%3E");
    }

    .collapsed > .ast-item-wrap > button {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 0.5 20 20'%3E%3Cpath d='M6 10h8-4V6v8' stroke='%23000' fill='none'/%3E%3C/svg%3E");
    }

    .collapsed > ol {
        display: none;
    }

    .leaf {
        padding-left: @button-width;
        cursor: default;
    }
}

.ast-item-wrap {
    display: flex;
    align-items: center;
    padding-top: 2px;
    padding-bottom: 2px;
}

.ast-item-property {
    margin-right: 5px;
}

.ast-item-type {
    display: block;
    width:  20px;
    height: 20px;
    margin-right: 5px;

    .ast-item-node & {
        // TODO: Dynamically embed SVG values during the build
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 0.5 20 20'%3E%3Cpath fill='%234684ee' stroke='%23f6f6f6' d='M4 4h12v4H4zm0 4h12v4H4zm0 4h12v4H4z'/%3E%3C/svg%3E");
    }

    .ast-item-token & {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 0.5 20 20'%3E%3Cpath fill='%23eeb046' stroke='%23f6f6f6' d='M4 8h12v4H4z'/%3E%3C/svg%3E");
    }

    .ast-item-trivia & {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 0.5 20 20'%3E%3Cpath d='M5.5 7.1V11h9V7.1' stroke='%23f6f6f6' stroke-width='4' fill='none'/%3E%3Cpath d='M5.5 8v3h9V8' stroke='%23666' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    }

    .ast-item-value & {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 0.5 20 20'%3E%3Cpath fill='%23eeb046' stroke='%23f6f6f6' d='M8 8h4v4H8z'/%3E%3C/svg%3E");
    }

    .ast-item-operation & {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 0.5 20 20'%3E%3Ccircle cx='10' cy='10' r='4.23' stroke='%23f6f6f6' stroke-width='4.5' fill='none'/%3E%3Ccircle cx='10' cy='10' r='4.23' stroke='%23888' stroke-width='2.5' fill='none'/%3E%3C/svg%3E");
    }

    .ast-item-property-only & {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 0.5 20 20'%3E%3Ccircle cx='10' cy='10' r='2' fill='%23888' stroke='%23f6f6f6' stroke-width='1.1'/%3E%3C/svg%3E");
    }
}

.ast-inline-value {
    .ast-item-trivia & {
        display: inline-block;
        min-width: 5em;
    }

    & + .ast-item-kind {
        display: inline-block;
        color: #888;
        font-style: italic;
        margin-left: 5px;
    }
}

.ast-item-operation {
    font-style: italic;
}