/* Container for the toggle button(s) */
#switch-views {
  margin-top: 20px;
  margin-bottom: 20px;
}

@media (max-width: 640px) {
  #switch-views {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .search-type-toggle-rule {
    flex-basis: 100%;
    order: 3;
  }
}


/* Shared button styling */
.search-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid #0b0c0c;
  border-radius: 6px;
  background-color: #ffffff;
  color: #0b0c0c;
  font-family: "GDS Transport", arial, sans-serif;
  font-size: 19px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}

.search-type-toggle:link,
.search-type-toggle:visited,
.search-type-toggle:active {
  color: #0b0c0c;
  text-decoration: none;
}

.search-type-toggle:hover {
  color: #0b0c0c;
  text-decoration: underline;
}

.search-type-toggle:focus {
  outline: 3px solid transparent;
  color: #0b0c0c;
  background-color: #ffdd00;
  box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c;
  text-decoration: none;
}

.search-type-toggle svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.search-type-toggle-rule {
  border: none;
  border-top: 1px solid #b1b4b6; /* GOV.UK mid-grey rule */
  margin-top: 15px;
  margin-bottom: 0;
}

#map-button .search-type-toggle,
#list-button .search-type-toggle {
  width: 140px;
  justify-content: center;
}