.mobileToggleButton {
  position: relative;
  border: none;
  align-items: center;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  display: grid;
  gap: var(--Space-x15);
  padding: var(--Space-x2);
  background-color: var(--Base-Surface-Primary-light-Normal);
  width: 100%;
  /* In some cases the lingering pressend event will trigger the */
  /* webkit tap styling (but not triggering the buttons press event) */
  /* To avoid this "flash" the styling is set to transparent) */
  /* It is a non-standard css proprty, so shouldn't have too much of an effect on accessibility. */
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--Corner-radius-md);
}

.complete {
  grid-template-columns: 1fr 36px;
}

.partial {
  grid-template-columns:
    minmax(auto, 120px) min-content 1fr
    auto;
}

.block {
  display: block;
}

.block > * {
  display: block;
  text-align: start;
}

.blockLabel {
  color: var(--Text-Accent-Primary);
}

.locationAndDate {
  color: var(--Scandic-Grey-100);
}

.placeholder {
  color: var(--Text-Interactive-Placeholder);
}
.icon {
  align-items: center;
  background-color: var(--Base-Button-Primary-Fill-Normal);
  border-radius: 50%;
  display: flex;
  height: 36px;
  justify-content: center;
  justify-self: flex-end;
  width: 36px;
}

@media screen and (min-width: 768px) {
  .mobileToggleButton {
    display: none;
  }
}