/* Search Switch */
.searchresults__button {
  border: 2px solid var(--primary-light);
  padding: 0.8rem 1.6rem;

  &:hover,
  &:focus {
    border: 2px solid var(--primary);
    background: var(--primary-light);
    color: var(--primary);
  }

  &[aria-pressed="true"] {
    border: 2px solid var(--primary);
    background: var(--primary);
    color: var(--white);
  }
}

#searchresults__button--list {
  border-right: none;
  border-radius: var(--br) 0 0 var(--br);
}

#searchresults__button--map {
  border-left: none;
  border-radius: 0 var(--br) var(--br) 0;
}


.searchresults {
  margin-top: 4.8rem;

  li {
    align-items: center;
    margin: 0;
    border-bottom: 2px solid var(--primary);
    padding-block: 2.4rem;
  }

  a {
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
  }

  li:hover a,
  li:focus-within a {
    text-decoration: underline;
  }

  p {
    margin-bottom: 0;
  }
}

.searchresults--list {
  border-top: 2px solid var(--primary);

  li {
    display: grid;
    position: relative;
    grid-template-columns: repeat(8, 1fr);
    gap: 24px;

    &:after {
      position: absolute;
      top: calc(50% - 12px);
      right: 0;
      z-index: 5;
      background: transparent url('../media/icon_arrow.svg') right center no-repeat;
      background-size: 32px 32px;
      width: 24px;
      height: 24px;
      pointer-events: none;
      content: "";
    }

    &:hover::before,
    &:focus-within:before {
      position: absolute;
      top: 0;
      left: -50%;
      z-index: 1;
      background-color: var(--primary-light);
      width: 200%;
      height: 100%;
      content: "";
    }
  }

  .name {
    grid-column: span 3;
    z-index: 5;
  }
  .address {
    grid-column: span 3;
    z-index: 5;
    padding-left: 48px;
    pointer-events: none;
  }
  .with-location .address {
    background: transparent url("../media/icon_location_outline.svg") left center no-repeat;
    background-size: 32px 32px;
  }
  .year {
    grid-column: span 2;
    z-index: 5;
    pointer-events: none;
  }

  a.linkarea::before {
    margin-inline: -200px;
  }
}

.searchresults--map {
  background: var(--primary);
  color: var(--white);
}

.map__block {
  margin-bottom: -3.2rem;

  #map {
    width: 100%;
    height: 100%;
    min-height: 500px;
  }

  .map__info {
    padding-top: 6.4rem;
    font-family: Merriweather;

    p {
      margin-bottom: 6.4rem;

      .name {
        font-weight: 700;
      }
      .street {
        font-weight: 500;
      }
    }

    a {
      font-style: italic;
      text-decoration: underline;

      &:hover,
      &:focus {
        text-decoration: none;
      }
    }
  }
}

/* Responsiveness */
@media (max-width: 800px) {
  .searchresults__ui.grid-8
  {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .searchresults--list {
    li {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      padding-right: 32px;
      padding-left: 64px;

      &.with-location {
        background-image: url("../media/icon_location_outline.svg");
        background-position: left center;
        background-size: 32px 32px;
        background-repeat: no-repeat;
      }
    }

    .address {
      padding-left: 0px;
    }
    .with-location .address {
      background: none;
    }
  }

  .searchresults--map {
    .grid-10 {
      grid-template-columns: 1fr;
    }
    .map__info {
      padding: 2.4rem;
      padding-top: 0;

      p {
        margin-bottom: 2.4rem;
      }
    }
  }
}

/* Map */
.maplibregl-ctrl .maplibregl-ctrl-attrib-button {
  padding: 0;
}

.maplibregl-popup-content {
  color: var(--text);
}