.card {
  border-width: 0;
  border-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  box-shadow: 0;
}

.card:hover {
  background-color: var(--colors-gray-100);
}

.card:active,
.card:focus {
  background-color: var(--colors-gray-200);
}

.card.elevated {
  box-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.card.outlined {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.12);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.card.full {
  margin: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-right: 0;
  border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
  border-left: 0;
  border-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.card.full:first-child {
  border-top: 1px rgba(0, 0, 0, 0.12) solid;
}

.card.full:last-child {
  border-bottom: 0;
}

.card.fullFlush {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.card.fullFlush:last-child {
  border-bottom: 0;
}

.card.searchResult {
  box-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
.card.searchResult.selected {
  background-color: var(--colors-gray-100);
}

.card.searchResult:focus-visible {
  outline: none;
}

.card.searchResult:hover mark {
  text-decoration: underline;
}

.card.searchResult mark {
  background-color: initial;
  color: var(--colors-blue-300);
}