
.tb-static-map {
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    // display: block;

    // map height should always be the same, but never larger than 80 percent of the viewport height (especially on mobile).
    height: auto;

    // slightly darken the background (only visible if map image is not loaded yet)
    background-color: rgba(0, 0, 0, .02);
}

.tb-static-map__image {
    // object-fit: contain;
    // height: 100%;
    max-width: 100%;
    flex: none;
}

.tb-static-map__marker {
    position: absolute;
    bottom: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;

    /*
     * We use magic numbers here because the size
     * of the marker will not change across projects
     * (if it does anyway, this can easily be overritten)
     */
    height: 45px;
    width: 30px;
    text-align: center;
}

.tb-static-map__marker-body {
    color: theme('colors.primary.500');
}

.tb-static-map__marker-body svg {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    fill: currentColor;
}

.tb-static-map__marker-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*
     * The following height should be about
     * equal to the width of the whole marker.
     * 4 more px are added to pull the circle
     * more towards the center.
     */
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: theme('colors.white');
    /*
     * This magic number is for adjusting the
     * size of the circle icon within the marker body.
     */
    font-size: 19px;
}

.tb-static-map__marker-icon svg {
    height: 1em;
    width: 1em;
    fill: currentColor;
}
