@import "/UI/Styles/Theme.scss";

Crosshair
{
    position: absolute;

    .element
    {
        transform: translateX( -50% ) translateY( -50% );
        background-color: rgba( white, 0.75 );
        position: absolute;
        box-shadow: 1px 1px 1px rgba( black, 1 );
        opacity: 0;
    }

    .cross
    {
        opacity: 0;
    }


    &.visible
    {
        .element, .cross, .dot
        {
            opacity: 1;
        }
    }

    i
    {
        position: absolute;
        transform: translateX( -50% ) translateY( -50% );
        font-size: 20px;
        color: $counter-terror-color;
    }

    .guide
    {
        transform: translateX( -50% ) translateY( -50% );
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: red;
        display: none;
    }

    .dot
    {
        width: 5px;
        height: 5px;
    }

    .left, .right
    {
        width: 20px;
        height: 2px;
    }

    .top, .bottom
    {
        width: 2px;
        height: 20px;
    }

    &.friendly
    {
        .left, .right, .top, .bottom, .dot
        {
            background-color: rgba( white, 0.15 );
        }
    }

    &.enemy
    {
        .left, .right, .top, .bottom
        {
            background-color: rgb( 219, 83, 83 );
        }
    }

    .hitmarker
    {
        transform: translateX( -50% ) translateY( -50% );
        position: absolute;
        background-image: url( ui/hit/hit_marker.png );
        width: 48px;
        height: 48px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 0;

        &.is-visible
        {
            opacity: 1;
        }

        &.is-kill
        {
            background-image: url( ui/hit/kill_marker_headshot.png );
        }

        &.is-headshot
        {
            background-image: url( ui/hit/kill_marker.png );
        }
    }
}