AlexAegis/loreplotter

:host {
    position: absolute;
    cursor: pointer;
    width: 4px;
    margin-left: -2px;
    height: 20%;
    z-index: 10;
    overflow: visible;
    display: inline-table;

    > div {
        padding: 0.8rem;
        z-index: 10;
        border-radius: 1.5rem;
        position: fixed;
        margin-top: -1rem;
        transform: perspective(1px) translateX(-50%) translateY(-100%);
        text-align: center;
    }

    > div::after {
        margin-left: 2px;
        z-index: -9;
        position: fixed;
        transform: perspective(1px) translateX(-600%) translateY(135%) rotate(45deg);
        clip-path: polygon(0 100%, 100% 100%, 100% 0);
        width: 1rem;
        height: 1rem;
        content: '';
    }

    ::ng-deep .smallMatInput {
        padding: 0;

        .mat-form-field-wrapper {
            padding: 0;
        }

        .mat-form-field-infix {
            border-top: 0;
            padding: 0;
        }

        .mat-form-field {
            padding: 0;
        }

        .mat-input-element {
            text-align: center;
        }

        .mat-input-underline {
            display: none;
        }
    }

    ::ng-deep .mat-form-field-underline {
        display: none;
    }
}

:host::after {
    z-index: -300;
    pointer-events: none;
    position: relative;

    width: 2px;
    left: 1px;
    height: 500%;
    content: '';
    display: inline-table;
}