// fix weird border in color selector overlay
.farbtastic .overlay {
    padding: 0;
}

/*
    Placemap Styles
*/
.with-sources .placemap,
.with-sources .placemap-sources {
    box-sizing: border-box;
    float: left;
    height: 450px;
}

.with-sources {
    .source {
        cursor: pointer;
    }

    .source.is-hidden {
        color: $text-color-light;

        .placemap-icon {
            background-color: $text-color-light !important;
        }
    }
}

.placemap {
    width: 75%;
}

.placemap-sources > p {
    margin-top: 0.5em;
    font-style: italic;
}

.placemap-sources {
    float: right;
    width: 25%;
    
    background-color: $lightgray;
    
    padding: 0.5em 1em;
    border-left: 8px solid white;

    h2 {
        margin: 0.25em 0 0.25em 0;
    }

    ul {
        list-style: none;
        padding: 0;
    }

    li {
        margin: 0;
    }
}

.placemap-icon {
    display: inline-block;

    height: 11px;
    width: 11px;
    
    border-radius: 10px;
    border: 2px solid white;

    // show the icon like it's in its own column by taking it out of the
    // flow and by moving the title and controls to the right.
    position: absolute;
    margin-top: 2px;
}

.placemap-title,
.placemap-controls {
    position: relative;
    left: 20px;
}

/*
    Placemap Mobile Styles
*/

@media screen and (max-width: 769px) {
    .placemap, .placemap-sources {
        float: none;
        width: 100%;
    }

    .placemap-sources {
        height: auto !important;
        border-left: none;
    }
}