.card {
  position: relative;
  background: var(--color-ui-4);
  font-size: var(--font-size-base);
  border-radius: $default-border-radius;
  overflow: hidden;
}

.card:focus-within {
  box-shadow: 0 0.5rem 1rem 0 var(--color-shadow-10);
}

.card-header {
  @include flex();
  padding: 0 $half-padding;
  border-bottom: $default-border-width-thin solid var(--color-ui-2-50);
  box-shadow: 0.125rem 0 0.25rem var(--color-ui-3);
  min-height: 3rem;
  align-items: center;
}

.card-title {
  flex: 1;
}

.card-body {
  @include overflow-scroll(auto, touch);
}