// CPT Page
.post-php.post-type-oum-location,
.post-new-php.post-type-oum-location {
  #location_customfields .inside {
    margin: 0 !important;
    padding: 0 !important;

    >.section {
      padding: 15px 12px;
      border-top: 1px solid #EEEEEE;
  
      &:first-of-type {
        border-top: 0;
      }
    }
  }

  label {
    display: block;
    font-weight: 600;
    margin-bottom: 3px;
  }

  .geo-coordinates-wrap {
    display: flex;

    .map-wrap {
      position: relative;
      width: 50%;
      padding-top: 30%;
  
      #mapGetLocation {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; 

        input.glass {
          box-shadow: none !important;
        }

        &.map-style_Custom1 {
          // map tiles
          .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
            filter: saturate(3);
          }
          // label tiles
        }
  
        &.map-style_Custom2 {
          // map tiles
          .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
            filter: sepia(1) invert(0) saturate(28) hue-rotate(-53deg);
          }
  
          // label tiles
          .leaflet-tile-pane .leaflet-layer:nth-child(2) .leaflet-tile {
            filter: sepia(0) contrast(1) invert(1) brightness(2);
          }
        }
  
        &.map-style_Custom3 {
          // map tiles
          .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
            filter: sepia(1) invert(1) saturate(100) brightness(1) hue-rotate(-300deg);
          }
  
          // label tiles
          .leaflet-tile-pane .leaflet-layer:nth-child(2) .leaflet-tile {
            filter: sepia(0) contrast(1) invert(1) brightness(2);
          }
        }
      }
    }

    .input-wrap {
      width: 50%;
      padding: 0 50px;

      .geo-coordinates-hint {
        box-sizing: border-box;
        padding: 7%;
        margin-bottom: 30px;

        div.hint {
          font-size: 20px;
          margin-bottom: 20px;
        }

        .latlng-wrap {
          >div:not(.hint) {
            display: flex;
            justify-content: space-between;

            >div {
              width: 49%;
            }
          }
        }
      }
    }

    @media (max-width: 768px) {
      flex-direction: column;

      .map-wrap,
      .input-wrap {
        width: 100%;
      }

      .input-wrap {
        padding: 0;
      }
    }
  }

  #oum_location_image_preview {
    &.has-image {
      width: 400px;
      height: 200px;
      max-width: 100%;
      position: relative;
      overflow: hidden;
  
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
      }
    }
  }
}

// Settings Page
.settings_page_open_user_map {
  .oum_support_hint {
    opacity: 0.7;
    margin-left: 5px;
  }

  .map_styles {
    display: flex;
    flex-wrap: wrap;

    label {
      width: 208px;
      height: 208px;
      overflow: hidden;
      border: 4px solid white;
      margin: 5px;
      position: relative;

      input {
        display: none;
      }

      &.pro-only {
        cursor: default;
      }

      &.pro:before {
        content: 'PRO';
        display: inline-block;
        position: absolute;
        background: red;
        color: white;
        right: 5px;
        bottom: 5px;
        padding: 1px 5px;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 2px;
        border: 1px solid;
      }

      &.checked,
      &:not(.pro-only):hover {
        border-color: #2271b1;
      }

      .map_style_preview {
        width: 208px;
        height: 208px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    
        &[data-style="Stamen.TonerLite"] {
          background-image: url('images/map_style_Stamen.TonerLite.png');
        }
    
        &[data-style="Esri.WorldStreetMap"] {
          background-image: url('images/map_style_Esri.WorldStreetMap.png');
        }
    
        &[data-style="OpenStreetMap.Mapnik"] {
          background-image: url('images/map_style_OpenStreetMap.Mapnik.png');
        }
    
        &[data-style="CartoDB.Positron"] {
          background-image: url('images/map_style_CartoDB.Positron.png');
        }
    
        &[data-style="CartoDB.DarkMatter"] {
          background-image: url('images/map_style_CartoDB.DarkMatter.png');
        }
    
        &[data-style="Custom1"] {
          background-image: url('images/map_style_Custom1.png');
        }
    
        &[data-style="Custom2"] {
          background-image: url('images/map_style_Custom2.png');
        }
    
        &[data-style="Custom3"] {
          background-image: url('images/map_style_Custom3.png');
        }
      }
    }
  }

  .marker_icons {
    display: flex;
    flex-wrap: wrap;

    label {
      width: 50px;
      height: 82px;
      overflow: hidden;
      border: 4px solid white;
      margin: 5px;
      position: relative;

      input {
        display: none;
      }

      &.pro-only {
        cursor: default;
      }

      &.pro:before {
        content: 'PRO';
        display: inline-block;
        position: absolute;
        background: red;
        color: white;
        right: 0;
        bottom: 0;
        left: 0;
        font-size: 11px;
        text-align: center;
        padding: 1px 5px;
        font-weight: bold;
        letter-spacing: 2px;
      }

      &.checked,
      &:not(.pro-only):hover {
        border-color: #2271b1;
      }

      .marker_icon_preview {
        width: 50px;
        height: 82px;
        background-position: center center;
        background-size: 50%;
        background-repeat: no-repeat;

        &[data-style="default"] {
          background-image: url('../src/leaflet/images/marker-icon_default-2x.png');
        }
    
        &[data-style="custom1"] {
          background-image: url('../src/leaflet/images/marker-icon_custom1-2x.png');
        }

        &[data-style="custom2"] {
          background-image: url('../src/leaflet/images/marker-icon_custom2-2x.png');
        }

        &[data-style="custom3"] {
          background-image: url('../src/leaflet/images/marker-icon_custom3-2x.png');
        }

        &[data-style="custom4"] {
          background-image: url('../src/leaflet/images/marker-icon_custom4-2x.png');
        }
      }
    }
  }

  .geo-coordinates-wrap {
    display: flex;

    .map-wrap {
      position: relative;
      width: 50%;
      padding-top: 32.5%;

      #mapGetInitial {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; 

        input.glass {
          box-shadow: none !important;
          border: none !important;
        }

        &.map-style_Custom1 {
          // map tiles
          .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
            filter: saturate(3);
          }
          // label tiles
        }
  
        &.map-style_Custom2 {
          // map tiles
          .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
            filter: sepia(1) invert(0) saturate(28) hue-rotate(-53deg);
          }
  
          // label tiles
          .leaflet-tile-pane .leaflet-layer:nth-child(2) .leaflet-tile {
            filter: sepia(0) contrast(1) invert(1) brightness(2);
          }
        }
  
        &.map-style_Custom3 {
          // map tiles
          .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
            filter: sepia(1) invert(1) saturate(100) brightness(1) hue-rotate(-300deg);
          }
  
          // label tiles
          .leaflet-tile-pane .leaflet-layer:nth-child(2) .leaflet-tile {
            filter: sepia(0) contrast(1) invert(1) brightness(2);
          }
        }
      }
    }

    .input-wrap {
      width: 50%;
      padding: 0 50px;

      .latlng-wrap {
        display: flex;
        justify-content: space-between;

        >div {
          input {
            width: 100%;
          }
        }
      }

      .geo-coordinates-hint {
        box-sizing: border-box;
        padding: 15px;
        border: 1px solid lightgrey;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: floralwhite;
      }
    }

    @media (max-width: 768px) {
      flex-direction: column;

      .map-wrap,
      .input-wrap {
        width: 100%;
      }

      .input-wrap {
        padding: 0;
      }
    }
  }

  .oum-pro {
    display: inline-block;
    background: red;
    color: white;
    font-size: 11px;
    text-align: center;
    padding: 1px 5px;
    font-weight: bold;
    letter-spacing: 2px;
  }
}

// Gutenberg Editor
.wp-block-open-user-map-map {
  background: url(images/block-bg.jpg) top center no-repeat;
  background-size: cover;
  border: 3px solid white;
  height: 400px;

  .hint {
    background: rgba(255,255,255,0.8);
    width: 75%;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 30px 40px;
    text-align: center;

    .link-oum-settings {
      position: absolute;
      top: 20px;
      right: 20px;
      text-decoration: none;
      font-size: 11px;
      line-height: 20px;
      text-transform: uppercase;

      span {
        margin-right: 3px;
      }
    }
  }
}