// Variables

$gauge-diameter: 400px;
$dial-width: 3px;

$hand-length: 100px;
$hand-width: 12px;
$hand-center-radius: 10px;

$base-dial-color: black;
$warning-dial-color: orange;
$danger-dial-color: red;
$hand-color: blue;
$captions-color: $base-dial-color;


.redline {
    display: block;
    position: relative;

    width: $gauge-diameter;
    height: $gauge-diameter;
    
    font-family: Arial, Sans-Serif;
    font-size: 20px;
    line-height: 1em;

    * {
        box-sizing: border-box;
    }
}

.redline-dial {
    display: block;
    position: absolute;

    width: 100%;
    height: 100%;

    .redline-dial-segment {
        display: block;
        position: absolute;

        width: 100%;
        height: 100%;

        overflow: visible;

        transform-origin: center;

        
    
        .redline-dial-segment-wrap {
            position: absolute;
            
            width: 50%;
            height: 100%;
            
            top: 0;
            right: 0;
            
            overflow: hidden;

            transform-origin: left center;

            transition: transform .5s ease;

            .redline-dial-segment-wrap-wrap {
                position: absolute;

                width: 100%;
                height: 100%;

                top: 0;
                right: 100%;

                overflow: hidden;

                transform-origin: right center;

                transition: transform .5s ease;

                .redline-dial-segment-line {
                    position: absolute;
        
                    width: 200%;
                    height: 100%;

                    border-radius: 100%;

                    border: $dial-width solid $base-dial-color;
                }
            }
        }

        &.redline-dial-segment-warning {
            .redline-dial-segment-line {
                border-color: $warning-dial-color !important;
            }
        }

        &.redline-dial-segment-danger {
            .redline-dial-segment-line {
                border-color: $danger-dial-color !important;
            }
        }

        .redline-dial-segment-mark {
            display: block;
            position: absolute;

            width: 1em;
            height: 1em;

            top: 100%;
            left: 0;
            right: 0;

            margin: auto;

            .redline.redline-inner-marks & {
                top: auto;
                bottom: $dial-width;

                .redline-dial-segment-mark-wrap {
                    top: auto;
                    bottom: 100%;

                    &.redline-dial-segment-mark-left-fit {
                        span {
                            right: auto;
                            left: 0;
                        }
                    }
                    &.redline-dial-segment-mark-right-fit {
                        span {
                            left: auto;
                            right: 0;
                        }
                    }
                }
            }

            .redline-dial-segment-mark-wrap {
                display: block;
                position: absolute;

                width: 100%;
                height: 100%;

                top: 100%;

                text-align: center;

                transform-origin: center;

                transform: rotate(-40deg);


                &.redline-dial-segment-mark-left-fit {
                    span {
                        position: absolute;
                        right: 0;
                    }
                }
                &.redline-dial-segment-mark-right-fit {
                    span {
                        position: absolute;
                        left: 0;
                    }
                }
            }

            &:before {
                display: block;
                position: absolute;
                content: "";

                width: 2px;
                height: 50%;

                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;

                background: $captions-color;

            }
        }

    }        
}

.redline-hand {
    position: absolute;

    width: 100%;
    height: 100%;

    overflow: hidden;

    .redline-hand-wrap {
        position: absolute;

        width: 100%;
        height: 100%;

        transition: all .5s ease;

        transform: rotate(180deg);

        .redline-hand-arrow {
            position: absolute;

            top: 50%;
            left: 50%;

            margin-left: -$hand-width/2;

            width: 0; 
            height: 0;

            border-left: $hand-width/2 solid transparent;
            border-right: $hand-width/2 solid transparent;
            
            border-top: $hand-length solid $hand-color;

        }

        .redline-hand-center {
            position: absolute;

            top: 50%;
            left: 50%;

            margin-left: -$hand-center-radius;
            margin-top: -$hand-center-radius;

            width: $hand-center-radius*2;
            height: $hand-center-radius*2;

            background: $hand-color;

            border-radius: 100%;
        }
    }
}