@mixin latency-problem-gradient($direction) {
    background: rgba(205,50,120,1);
    background: -moz-linear-gradient($direction, rgba(205,50,120,0) 0%, rgba(205,50,120,1) 92%);
    background: -webkit-linear-gradient($direction, rgba(205,50,120,0) 0%, rgba(205,50,120,1) 92%);
    background: -o-linear-gradient($direction, rgba(205,50,120,0) 0%, rgba(205,50,120,1) 92%);
    background: -ms-linear-gradient($direction, rgba(205,50,120,0) 0%, rgba(205,50,120,1) 92%);
    $to_direction: left;
    @if $direction == right {
        $to_direction: left;
    } @else {
        $to_direction: right;
    }
    background: linear-gradient(to $to_direction, rgba(205,50,120,0) 0%, rgba(205,50,120,1) 92%);
}

@mixin latency-ok-gradient($direction) {
    background: rgba(50,205,54,1);
    background: -moz-linear-gradient($direction, rgba(50,205,54,0) 0%, rgba(50,205,54,1) 92%);
    background: -webkit-linear-gradient($direction, rgba(50,205,54,0) 0%, rgba(50,205,54,1) 92%);
    background: -o-linear-gradient($direction, rgba(50,205,54,0) 0%, rgba(50,205,54,1) 92%);
    background: -ms-linear-gradient($direction, rgba(50,205,54,0) 0%, rgba(50,205,54,1) 92%);
    $to_direction: left;
    @if $direction == right {
        $to_direction: left;
    } @else {
        $to_direction: right;
    }
    background: linear-gradient(to $to_direction, rgba(50,205,54,0) 0%, rgba(50,205,54,1) 92%);
}

.dmt-latency-wrapper {
    width: 200px;
    padding: 37px 0;

    &:hover {
        .dmt-latency-bar-wrapper {
            .dmt-latency-bar {
                .dmt-expected-range {
                    .dmt-range-label {
                        display: block;
                    }
                }

                .dmt-value-arrow {
                    .dmt-ping-label {
                        display: block;
                    }
                }
            }
        }
    }

    .dmt-latency-bar-wrapper {
        width: 100%;

        .dmt-latency-bar {
            @include helvetica-neue-regular();
            position: relative;
            border: 1px solid #d3dbe1;
            border-bottom-width: 0;
            width: 100%;
            height: 1px;

            &.dmt-out-range {
                .dmt-value-arrow {
                    color: $offline;

                    > span {
                        &.dmt-ping-value {
                            color: $offline;
                        }
                    }
                }
            }

            .dmt-expected-range {
                position: relative;
                height: 5px;
                width: 100%;
                top: -3px;

                &.dmt-out-expected {
                    .dmt-left-range {
                        @include latency-problem-gradient(left);

                    }

                    .dmt-right-range {
                        @include latency-problem-gradient(right);
                    }

                    .dmt-range-label {
                        .dmt-range-values {
                            color: $offline;
                        }
                    }
                }

                .dmt-left-range,
                .dmt-right-range {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                }

                .dmt-left-range {
                    @include latency-ok-gradient(left);
                }
                .dmt-right-range {
                    @include latency-ok-gradient(right);
                }

                .dmt-range-label {
                    display: none;
                    color: $dark-gray;
                    font-size: 11px;
                    line-height: 12px;
                    position: absolute;
                    top: 8px;
                    width: 100px;
                    text-align: center;
                    margin-left: -50px;

                    > span {
                        display: block;
                    }

                    .dmt-range-values {
                        color: $dark-blue;
                    }
                }
            }

            .dmt-value-arrow {
                color: $online;
                position: absolute;
                top: -21px;
                margin-left: -25px;
                width: 50px;
                text-align: center;

                &.dmt-value-unavailable {
                    left: 0 !important;
                    color: #d3dbe1;

                    > span {
                        &.dmt-ping-value {
                            color: #d3dbe1;
                        }

                        &.dmt-ping-label {
                            color: #d3dbe1;
                        }
                    }
                }

                > span {
                    display: block;
                    font-size: 11px;
                    line-height: 6px;
                    white-space: nowrap;
                    text-align: center;

                    &.dmt-ping-value {
                        color: $dark-blue;
                    }

                    &.dmt-ping-label {
                        color: $dark-gray;
                    }
                }

                > .icon {
                    font-size: 24px;
                }

                .dmt-ping-label {
                    display: none;
                    position: absolute;
                    width: 150px;
                    text-align: center;
                    margin-left: -75px;
                    left: 25px;
                    top: -12px;
                }
            }
        }
    }
}