@import 'theme/variables.scss';
@import 'scss/font-family.scss';

// Map Info Window
.gm-style-iw-a .gm-style-iw-t {
    // Info Window Container
    .gm-style-iw.gm-style-iw-c {
        padding: 0px !important;
        border-radius: 3px !important;
        top: 70px !important;
        transform: translate(-50%, 0) !important;
    }

    // Info Window Arrow
    .gm-style-iw-tc {
        display: none !important;
    }
}

// Marker Label
.gm-style div[aria-hidden='true'],
.marker-label {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;

    // margin-left: -32px;
    text-shadow:
        1px 1px 0px $white-2,
        1px -1px 0px $white-2,
        -1px -1px 0px $white-2,
        -1px 1px 0px $white-2;
    font-size: 11px;
    line-height: 12px;
    text-align: left;
    font-weight: 500;
    font-family: $font-family !important;
    color: $black;

    .marker-label-text {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        user-select: none;

        @supports (display: -webkit-box) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: initial;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }

    .line-clamp-1 {
        @supports (display: -webkit-box) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: initial;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
    }
}

.map-zoom-container {
    position: absolute;
    right: 8px;
    bottom: 16px;

    .map-zoom-buttons {
        width: 52px;
        min-height: 26px;

        .zoom-button-container {
            height: 100%;

            svg-icon svg path {
                transition: fill 0.2s ease-in-out;
                fill: $grey;
            }

            &:hover {
                cursor: pointer;

                svg-icon svg path {
                    fill: $black;
                }
            }
        }
    }

    &.vertical-zoom-buttons {
        .map-zoom-range {
            order: 1;
        }

        .map-zoom-buttons-container {
            order: 2;

            .map-zoom-buttons {
                width: 26px;
                min-height: 52px;

                .zoom-button-container:first-child {
                    order: 2;
                }
            }
        }
    }
}

.open-in-map-container {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    background: rgba(108, 108, 108, 0.9);
    border-radius: 1px;

    svg-icon svg path {
        transition: fill 0.2s ease-in-out;
        fill: $white;
    }

    &:hover {
        cursor: pointer;

        svg-icon svg path {
            fill: $white-2;
        }
    }
}

.marker-icon {
    position: relative;

    .marker-svg {
        transform: scale(1);
        transform-origin: center 30px;
        transition: transform 0.2s ease-in-out;

        .outside-circle,
        .white-circle,
        .inside-shape {
            transform-origin: center;
            transition: transform 0.2s ease-in-out;
        }

        .shadow-circle {
            transition: transform 0.2s ease-in-out;
            transform-origin: 14px 30px;
        }
    }

    &.selected,
    &.selected-permanently {
        .marker-svg {
            transform: scale(1.5);
            transition: transform 0.2s ease-in-out;

            .outside-circle {
                transform: scale(1.074);
            }

            .white-circle {
                transform: scale(0.8665);
            }

            .shadow-circle {
                transform: scale(0.889, 0.667);
            }
        }

        .marker-label {
            opacity: 0;
            pointer-events: none !important;
        }
    }

    &.selected-permanently {
        .marker-label {
            top: 8px;
            left: calc(100% + 6px);
            font-weight: 700 !important;
        }

        &:hover .marker-label {
            opacity: 1 !important;
        }
    }

    &.fuel-icon {
        &.fuel-color {
            &-1 {
                .outside-circle {
                    fill: $ta-green;
                }

                .marker-label-second-text {
                    color: $ta-green-2;
                }
            }

            &-2 {
                .outside-circle {
                    fill: $ta-green-6;
                }

                .marker-label-second-text {
                    color: $ta-green-1;
                }
            }

            &-3 {
                .outside-circle {
                    fill: $ta-yellow-1;
                }

                .marker-label-second-text {
                    color: $ta-yellow-5;
                }
            }

            &-4 {
                .outside-circle {
                    fill: $ta-orange-4;
                }

                .marker-label-second-text {
                    color: $ta-orange-1;
                }
            }

            &-5 {
                .outside-circle {
                    fill: $ta-red-10;
                }

                .marker-label-second-text {
                    color: $ta-red-11;
                }
            }

            &-outdated {
                .outside-circle {
                    fill: $ta-light-grey-2;
                }

                .marker-label-second-text {
                    color: $grey;
                }
            }
        }
    }
}

.miles-icon {
    top: 17px;

    .marker-svg {
        transform: scale(0.5);
        transform-origin: center;
        transition: transform 0.2s ease-in-out;

        .white-circle {
            transform: scale(1.091);
            transform-origin: center;
            transition: transform 0.2s ease-in-out;
        }

        .inside-circle {
            transform: scale(0.889);
            transform-origin: center;
            transition: transform 0.2s ease-in-out;
        }

        .marker-path,
        .marker-number {
            transition: opacity 0.2s ease-in-out;
            opacity: 0;
        }
    }

    &:hover {
        .marker-svg {
            transform: scale(1);

            .white-circle,
            .inside-circle {
                transform: scale(1);
            }

            .marker-path {
                opacity: 1;
            }
        }
    }

    &.selected {
        .marker-svg {
            transform: scale(1.3333);

            .white-circle {
                transform: scale(1.091);
            }

            .inside-circle {
                transform: scale(1.1667);
            }

            .marker-path {
                opacity: 0 !important;
            }

            .marker-number {
                opacity: 1;
            }
        }

        .marker-label {
            opacity: 0 !important;
        }
    }

    &.show-label-on-hover {
        .marker-label {
            transition:
                left 0.2s ease-in-out,
                top 0.2s ease-in-out,
                opacity 0.2s ease-in-out;
            opacity: 0;
        }

        &:hover .marker-label {
            opacity: 1;
        }
    }
}

.routing-icon {
    user-select: none;

    .marker-svg {
        transform: scale(1);
        transform-origin: center 30px;
        transition: transform 0.2s ease-in-out;

        .outside-circle,
        .white-circle,
        .inside-shape {
            transform-origin: center;
            transition: transform 0.2s ease-in-out;
        }

        .shadow-circle {
            transition: transform 0.2s ease-in-out;
            transform-origin: 14px 30px;
        }
    }

    &.selected {
        .marker-svg {
            transform: scale(1.5);
            transition: transform 0.2s ease-in-out;

            .outside-circle {
                transform: scale(1.074);
            }

            .shadow-circle {
                transform: scale(1.222);
            }
        }

        &.show-label-on-hover .marker-label {
            top: 8px;
            left: calc(100% + 4px);

            font-weight: 700;

            opacity: 1 !important;
        }
    }

    &.show-label-on-hover {
        .marker-label {
            transition:
                left 0.2s ease-in-out,
                top 0.2s ease-in-out,
                opacity 0.2s ease-in-out;
            opacity: 0;
        }

        &:hover .marker-label {
            opacity: 1 !important;
        }
    }
}

.marker-dropdown {
    position: absolute;
    top: 35px;
    left: 50%;
    transition:
        transform 0.2s ease-in-out,
        opacity 0.2s ease-in-out;
    transform: translateX(-50%) scale(1);
    opacity: 1;
    width: 360px;
    min-height: 64px;

    padding: 0px;
    background: $white-2;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
    border-radius: 3px;

    &.dropdown-hidden {
        transform: translateX(-50%) scale(0.5);
        opacity: 0;
        pointer-events: none !important;
    }

    &.cluster-dropdown {
        top: 55px;
    }
}

.cluster-icon {
    position: relative;

    .marker-svg g path {
        fill: $white-2;
        transition: all 0.2s ease-in-out;
    }

    &.selected .marker-svg g path {
        fill: $ta-yellow-1;
    }

    &.fuel-icon.selected .marker-svg g path {
        fill: $ta-blue-13;
    }
}