.kit-geocoding {
  /* Variables */
  --map-height: 400px;
  --geocoding-locations-width: 350px;

  /* Properties */
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr auto;
  background-color: var(--grey-5);
  border-radius: 6px;
  overflow: hidden;

  #map {
    height: var(--map-height);
    width: 100%;
    position: relative;

    & input {
      font-size: var(--font-12);
      font-weight: var(--font-weight-600);
      background-color: var(--white);
      border: 0;
      outline: none;
      box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
      margin: 10px;
      padding: 0 0.5em;
      overflow: hidden;
      height: 40px;
      cursor: pointer;
      margin-left: var(--space-4);
      transition: 0.3s ease-in-out;
      border-radius: 2px;
    }

    & input[type="text"] {
      background-color: var(--white);
      border: 0;
      border-radius: 2px;
      box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
      margin: 10px;
      padding: 0 0.5em;
      overflow: hidden;
      line-height: 40px;
      margin-right: 0;
      min-width: 25%;
    }
    & input[type="button"]:hover {
      background: var(--white);
    }
    & input[type="button"].button-primary {
      background-color: var(--baby-blue-1) !important;
      color: var(--white) !important;
    }
    & input[type="button"].button-primary:hover {
      background-color: var(--baby-blue-1);
    }
    & input[type="button"].button-secondary {
      background-color: var(--white);
      color: var(--baby-blue-1);
    }
    & input[type="button"].button-secondary:hover {
      background-color: var(--baby-blue-5);
    }
  }

  .kit-geocoding-locations {
    position: relative;
    height: var(--map-height);
    padding-bottom: var(--space-64);
    overflow: hidden;

    .kit-geocoding-location-header {
      position: sticky;
      top: 0;
      padding: var(--space-16);
      background-color: var(--white);
      width: var(--geocoding-locations-width);
      margin: var(--space-4);
      border-radius: 0px;

      .title {
        font-size: var(--font-12);
        font-weight: var(--font-weight-600);
        margin: 0;
      }
    }

    .kit-geocoding-locations-list {
      position: relative;
      height: 100%;
      width: var(--geocoding-locations-width);
      padding: var(--space-16);
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0px;
        background: transparent;
      }

      .kit-geocoding-location-item {
        position: relative;
        width: 100%;
        padding: var(--space-16);
        margin-bottom: var(--space-16);
        background-color: var(--white);
        box-shadow: var(--box-shadow);

        &:hover {
          box-shadow: var(--box-shadow-hover) !important;
        }

        .btn-delete {
          font-size: var(--font-12);
          position: absolute;
          top: var(--space-16);
          right: var(--space-8);
          color: var(--danger-1);
          background-color: var(--white);
        }

        .location {
          font-size: var(--font-12);
          font-weight: var(--font-weight-600);
          max-width: calc(100% - var(--space-16));
          margin: 0;
          margin-bottom: var(--space-16);
        }
      }
    }
  }
}

.kit-reverse-geocoding {
  /* Variables */
  --map-height: 400px;
  --geocoding-locations-width: 350px;

  /* Properties */
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr;

  #map {
    height: var(--map-height);
    width: 100%;
    position: relative;
    margin-bottom: var(--space-16);
  }

  .kit-table {
    .kit-table-row {
      cursor: zoom-in;
    }
  }
}

@media (max-width: 768px) {
  .kit-geocoding {
    /* Variables */
    --geocoding-locations-width: 100%;

    /* Properties */
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr;

    .kit-geocoding-location-header {
      width: calc(100% - var(--space-8)) !important;
    }

    .kit-geocoding-locations {
      height: 100% !important;
      padding-bottom: var(--space-16) !important;

      .kit-geocoding-locations-list {
        padding: var(--space-4) !important;
        .kit-geocoding-location-item {
          border-radius: 0 !important;
          margin-bottom: var(--space-4) !important;
        }
      }
    }
  }
}