/*
 * This file is part of Advanced Custom Fields Multiple Coordinates.
 *
 * Advanced Custom Fields Multiple Coordinates is free software: you can redistribute it
 * and/or modify it under the terms of the GNU General Public License as
 * published by he Free Software Foundation, either version 3 of the License,
 * or (at your option) any later version.
 *
 * Advanced Custom Fields Multiple Coordinates is distributed in the hope that it will
 * be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Advanced Custom Fields Multiple Coordinates.
 * If not, see <http://www.gnu.org/licenses/>.
 */


/* Every control in the toolbar is 30px tall, so the row lines up whatever it
   is made of — a button, a select, a colour picker or a switch. */
.location_multiple_coordinates_toolbar {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.location_multiple_coordinates_toolbar input.location_multiple_coordinates_input_search {
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 320px;
    height: 30px;
    margin: 0;
}

.location_multiple_coordinates_toolbar .button {
    margin: 0;
}

/* The shape menus. The selectors are deliberately specific: ACF stretches
   every select in a field to the full width of the row, which would push the
   toolbar apart. */
.location_multiple_coordinates_toolbar select.location_multiple_coordinates_shape,
.location_multiple_coordinates_toolbar select.location_multiple_coordinates_style {
    width: auto;
    min-width: 120px;
    max-width: 200px;
    height: 30px;
    margin: 0;
}

.location_multiple_coordinates_style_field[hidden],
.location_multiple_coordinates_color_field[hidden],
.location_multiple_coordinates_markers_field[hidden] {
    display: none;
}

/* Everything after this point is pushed to the right end of the toolbar. */
.location_multiple_coordinates_toolbar_end {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* ---- Colour picker ------------------------------------------------------ */

/* wp-color-picker lays its hex field and its palette out inline, which pushes
   the rest of the toolbar sideways the moment it is opened. The two are
   gathered into one floating box (see SetUpColorPicker()) which is positioned
   over the map instead, so the toolbar never changes size. Scoped to this
   field so other colour pickers in the admin are untouched. */
/* The picker button carried its own height (32px, plus a bottom margin), which
   left it sitting lower and shorter than everything else in the row. It now
   stretches to whatever height the row has instead of guessing at a number —
   the row is 30px in plain wp-admin and 40px inside an ACF field. */
.location_multiple_coordinates_color_field {
    position: relative;
    display: inline-flex;
    align-self: stretch;
    align-items: stretch;
}

.location_multiple_coordinates_color_field .wp-picker-container {
    display: inline-flex;
    align-items: stretch;
    height: 100%;
    line-height: 1;
}

/* Needs the same specificity as core's own rule to beat it. */
.location_multiple_coordinates_color_field .wp-picker-container .wp-color-result.button {
    display: inline-flex;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    margin: 0;
}

.location_multiple_coordinates_color_field .wp-color-result-text {
    display: flex;
    align-items: center;
    line-height: 1;
}

.location_multiple_coordinates_color_pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    display: none;
    padding: 8px;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

/* Close to the bottom of the window the box opens upwards instead. */
.location_multiple_coordinates_color_pop.is-above {
    top: auto;
    bottom: calc(100% + 4px);
}

.wp-picker-active .location_multiple_coordinates_color_pop {
    display: block;
}

.location_multiple_coordinates_color_pop .wp-picker-input-wrap {
    display: block;
    margin-bottom: 6px;
    white-space: nowrap;
}

.location_multiple_coordinates_color_pop .iris-picker {
    margin-top: 0;
}

/* ---- Marker switch ------------------------------------------------------ */

/* A real checkbox, so the keyboard and screen readers get a checkbox, drawn as
   a switch because that is what turning something on and off looks like. */
.location_multiple_coordinates_switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    cursor: pointer;
    font-size: 13px;
    color: #1d2327;
    white-space: nowrap;
}

.location_multiple_coordinates_switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
}

.location_multiple_coordinates_switch_track {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    border-radius: 9px;
    background: #c3c4c7;
    transition: background 0.15s ease-in-out;
}

.location_multiple_coordinates_switch_track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease-in-out;
}

.location_multiple_coordinates_switch input:checked + .location_multiple_coordinates_switch_track {
    background: #2271b1;
}

.location_multiple_coordinates_switch input:checked + .location_multiple_coordinates_switch_track::after {
    transform: translateX(16px);
}

.location_multiple_coordinates_switch input:focus + .location_multiple_coordinates_switch_track {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2271b1;
}

/* ---- Icon buttons ------------------------------------------------------- */

/* Undo, the help text and the raw value are all one-glyph controls, so they
   get an icon each instead of three more labelled buttons. */
.location_multiple_coordinates_icon_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    background: none;
    color: #646970;
    cursor: pointer;
}

.location_multiple_coordinates_icon_button:hover,
.location_multiple_coordinates_icon_button:focus {
    color: #2271b1;
    border-color: #c3c4c7;
}

.location_multiple_coordinates_icon_button.is-on {
    color: #2271b1;
    border-color: #2271b1;
    background: #f0f6fc;
}

.location_multiple_coordinates_icon_button[disabled] {
    color: #a7aaad;
    border-color: transparent;
    background: none;
    cursor: default;
}

.location_multiple_coordinates_icon_button .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 1;
}

/* ---- Help --------------------------------------------------------------- */

.location_multiple_coordinates_help {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-left: 4px solid #72aee6;
    background: #f6f7f7;
}

.location_multiple_coordinates_help[hidden] {
    display: none;
}

.location_multiple_coordinates_help ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.location_multiple_coordinates_help li {
    margin: 0 0 4px;
    padding-left: 14px;
    position: relative;
    color: #50575e;
    font-size: 12px;
    line-height: 1.5;
}

.location_multiple_coordinates_help li:last-child {
    margin-bottom: 0;
}

.location_multiple_coordinates_help li::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #8c8f94;
}

/* ---- Map ---------------------------------------------------------------- */

/* The stacking context keeps Google's own z-indexes to themselves, so the
   colour box in the toolbar reliably floats over the map. */
.location_multiple_coordinates_map_container {
    position: relative;
    z-index: 0;
    padding: 4px;
    border: 1px solid #dfdfdf;
    border-radius: 3px;
    margin-left: 1px;
}

.location_multiple_coordinates_map {
    height: 300px;
}

/* ---- Point list --------------------------------------------------------- */

.location_multiple_coordinates_coordinates_button {
    display: inline;
    margin: 0;
}

.location_multiple_coordinates_coordinates_div {
    display: block;
    margin: 0 0 8px;
}

.location_multiple_coordinates_empty {
    margin: 0;
    color: #646970;
    font-size: 13px;
}

.location_multiple_coordinates_points {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #dcdcde;
    border-radius: 3px;
    background: #fff;
}

.location_multiple_coordinates_points li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border-bottom: 1px solid #f0f0f1;
    background: #fff;
}

.location_multiple_coordinates_points li:last-child {
    border-bottom: 0;
}

/* The row being dragged, and the gap it will drop into. */
.location_multiple_coordinates_points li.ui-sortable-helper {
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

.location_multiple_coordinates_point_placeholder {
    height: 30px;
    background: #f0f6fc;
    border: 1px dashed #72aee6 !important;
}

/* The drag handle is a button, so the row can be moved with the arrow keys as
   well as with a mouse. */
.location_multiple_coordinates_point_move {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    background: none;
    color: #a7aaad;
    cursor: grab;
}

.location_multiple_coordinates_point_move:hover,
.location_multiple_coordinates_point_move:focus {
    color: #2271b1;
    border-color: #c3c4c7;
}

.location_multiple_coordinates_point_move .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
}

.location_multiple_coordinates_point_index {
    min-width: 2em;
    text-align: right;
    color: #646970;
    font-size: 12px;
}

.location_multiple_coordinates_point_value {
    flex: 1 1 auto;
    font-family: Menlo, Consolas, monaco, monospace;
    font-size: 12px;
    word-break: break-all;
}

/* The place name a searched point was found under, under its coordinates. */
.location_multiple_coordinates_point_label {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #646970;
    word-break: normal;
}

.location_multiple_coordinates_point_remove {
    flex: 0 0 auto;
    color: #b32d2e;
    text-decoration: underline;
    cursor: pointer;
}

.location_multiple_coordinates_point_remove:hover,
.location_multiple_coordinates_point_remove:focus {
    color: #8a2424;
}

/* ---- Marker popup ------------------------------------------------------- */

/* Name (when there is one), point number, coordinates. */
.location_multiple_coordinates_popup {
    font-size: 13px;
    line-height: 1.5;
    max-width: 240px;
}

.location_multiple_coordinates_popup span {
    display: block;
}

.location_multiple_coordinates_popup_label {
    font-weight: 600;
    color: #1d2327;
}

.location_multiple_coordinates_popup_index {
    color: #646970;
    font-size: 12px;
}

.location_multiple_coordinates_popup_coords {
    font-family: Menlo, Consolas, monaco, monospace;
    font-size: 12px;
}