[data-component-id="boral:card-map-tile"] {
  padding: var(--size-5);
  position: relative;
  direction: ltr;
  transition: background-color 0.3s ease-in-out;
  cursor: pointer;
}

  [data-component-id="boral:card-map-tile"] .floating-card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  [data-component-id="boral:card-map-tile"]:hover {
    background-color: var(--secondary-color-20) !important;
  }

  /* active (when pin or card-map-tile has been clicked) */

  [data-component-id="boral:card-map-tile"].active {
    background-color: var(--secondary-color-40) !important;
  }

  [data-component-id="boral:card-map-tile"].active span.boral-pill {
      background-color: white;
      color: black;
    }

  /* list item field(s) */

  [data-component-id="boral:card-map-tile"] > * {
    margin-block: var(--size-2);
  }

  [data-component-id="boral:card-map-tile"] > *:is(p):last-of-type {
      margin-bottom: var(--size-2);
    }

  /* first child no margin top */

  [data-component-id="boral:card-map-tile"] > *:first-child {
      margin-top: 0;
    }

  /* last child no margin bottom */

  [data-component-id="boral:card-map-tile"] > *:last-child {
      margin-bottom: 0;
    }

  [data-component-id="boral:card-map-tile"] > *.address,
    [data-component-id="boral:card-map-tile"] > *.field--type-office-hours,
    [data-component-id="boral:card-map-tile"] > *.field--type-telephone,
    [data-component-id="boral:card-map-tile"] > * span,
    [data-component-id="boral:card-map-tile"] > * div .boral-pill,
    [data-component-id="boral:card-map-tile"] > *.field--name--additional-details {
      font-size: var(--size-4-5);
      line-height: var(--size-5-5);
      font-weight: 400;
    }

  [data-component-id="boral:card-map-tile"] > * .office-hours__item {
      display: flex;
      flex-wrap: wrap;
      padding-block: 4px;
      -moz-column-gap: 5px;
           column-gap: 5px;
    }

  [data-component-id="boral:card-map-tile"] > * .office-hours__item-label,
    [data-component-id="boral:card-map-tile"] > * .office-hours__item-slots {
      display: inline;
      width: -moz-fit-content !important;
      width: fit-content !important;
    }

  [data-component-id="boral:card-map-tile"] > * .office-hours__item-comments {
      display: block;
      white-space: wrap;
    }

  [data-component-id="boral:card-map-tile"] > *.pill-container {
      display: flex;
      gap: 0.5rem;
    }

  [data-component-id="boral:card-map-tile"] > * .boral-pill:not(:empty) {
      all: inherit;
      background-color: var(--secondary-color-80);
      padding: 7px 16px;
      width: -moz-fit-content;
      width: fit-content;
      border-radius: 25px;
      transition:
        background-color 0.3s ease-in-out,
        color 0.3s ease-in-out;
      color: white;
      font-size: 13px;
      font-weight: 500;
      vertical-align: middle;
      margin-bottom: 0;
    }

  [data-component-id="boral:card-map-tile"] > *.title {
      font-size: var(--size-5);
      font-weight: 500;
      text-transform: capitalize;
    }

  [data-component-id="boral:card-map-tile"] > *.title::before {
        content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cmask id='a' width='24' height='24' x='0' y='0' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3e%3cpath fill='%23D9D9D9' d='M0 0h24v24H0z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='%231C1B1F' d='M11.955 12.5q.928 0 1.589-.676.66-.675.661-1.624a2.24 2.24 0 0 0-.661-1.624q-.66-.675-1.589-.676-.928 0-1.59.676-.66.675-.66 1.624t.66 1.624 1.59.676m0 8.453q3.43-3.22 5.09-5.851t1.66-4.672q0-3.134-1.955-5.132Q14.796 3.3 11.955 3.3q-2.84 0-4.795 1.998T5.205 10.43q0 2.04 1.66 4.672 1.658 2.631 5.09 5.85m0 3.047q-4.528-3.939-6.764-7.317-2.235-3.378-2.236-6.253 0-4.312 2.714-6.871T11.955 1t6.286 2.559q2.715 2.559 2.714 6.871 0 2.875-2.236 6.253-2.235 3.378-6.764 7.317'/%3e%3c/g%3e%3c/svg%3e");
        display: inline-block;
        width: var(--size-6);
        vertical-align: sub;
      }

  [data-component-id="boral:card-map-tile"] > *-nid {
      display: none;
    }

  [data-component-id="boral:card-map-tile"] > *.field--type-telephone {
      margin-top: calc(var(--size-2) * -1);
      display: flex;
      flex-wrap: wrap;
      gap: var(--size-1);
    }

  [data-component-id="boral:card-map-tile"] > *.field--name--additional-details {
    }