@import 'scss/styles.scss';

.gps-progress-bar {
    width: 100%;
    max-width: 326px;

    .gps-progress-holder {
        height: 26px;
        padding: 2px;

        .gps-progress-text {
            height: 26px;
            padding: 0 2px 0 6px;

            .mileage-gps {
                height: 12px;

                &:last-child {
                    align-items: center;
                }

                .stop-marker {
                    position: absolute;
                    top: 50%;
                    left: calc(var(--position) * 1% - 4px);
                }
            }
        }

        .gps_info_hold {
            height: 26px;
            padding: 0 10px 0 8px;
        }
    }
}

.main_dropdown_holder {
    background-color: $black-2;
    border-radius: 3px;
    overflow: hidden;

    .gps_all_hold {
        padding: 4px;

        .gps_header {
            margin-bottom: 4px;
            padding: 2px;
            border-radius: 2px;

            &:hover {
                background-color: $black-9;
            }

            .gps_info_hold {
                padding: 0 10px 0 8px;
            }
        }

        .gps_info_border {
            height: 1px;
            width: 100%;

            background-color: $black;
            border-radius: 1px;
        }

        .gps_progress_hold {
            padding: 6px 0px;

            .gps_progress_hold_inner {
                position: relative;
                overflow-y: auto;

                .progress_line {
                    position: absolute;
                    left: 12px;

                    height: calc(100% - 50px);
                    width: 2px;

                    background-color: $grey-7;

                    .progress_inner_line {
                        width: 2px;
                        height: 0px;
                        transform: translateY(5px);

                        background-color: $grey-4;
                    }

                    .progress_moving_dot {
                        position: absolute;
                        left: -4px;
                        top: 0px;
                        width: 10px;
                        height: 10px;
                        transform: translateY(50%);

                        background-color: $blue-8;
                        border-radius: 100%;

                        z-index: 3;

                        .moving_dot_inner {
                            width: 4px;
                            height: 4px;

                            background-color: $white;
                            border-radius: 100%;
                        }
                    }
                }

                .progress_inner {
                    width: 100%;
                    height: 50px;
                    padding: 0px 6px 2px 6px;
                    border-radius: 1px;

                    &:last-child {
                        background: $black-2;
                        z-index: 2;
                    }

                    .progress_header {
                        .progress_header_inside {
                            .progress_icon {
                                height: 18px;
                                width: 14px;
                                min-width: 14px;

                                background-color: $black-2;
                                z-index: 2;

                                svg-icon {
                                    svg {
                                        display: flex;
                                    }
                                }

                                .progress_dot {
                                    width: 6px;
                                    height: 6px;

                                    border-radius: 100%;
                                    background-color: $green-3;
                                }

                                .progress-stop-number {
                                    width: 22px;
                                    background-color: $black-2;
                                }
                            }

                            .progress_info_hold {
                                margin-left: 8px;
                                margin-top: 2px;
                            }
                        }

                        .progress-leg-miles-text {
                            margin-top: 2px;
                        }
                    }

                    &:hover {
                        background-color: $ta-black;

                        .progress_header {
                            .progress_header_inside {
                                .progress_icon {
                                    background-color: $ta-black;

                                    .progress-stop-number {
                                        background-color: $ta-black;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .gps_complete_hold {
            margin-top: 4px;
            padding: 0px 4px;

            .gps_complete_row {
                margin-bottom: 2px;
            }
        }
    }
}

.moving-gps {
    position: absolute;
    top: 0;
    left: -4px;
    z-index: 3;
    transform: translateY(5px);
}