html {
  box-sizing: border-box;
}

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}

:host {
  font-family: var(--c-font-family);
}

::-ms-reveal {
  display: none;
}

:host {
  /**
   * @prop --c-card-title-color: Card title color
   * @prop --c-card-title-underline-color: Card title underline color
   */
  --_c-card-title-color: var(--c-card-title-color, var(--c-text-system));
  --_c-card-title-underline-color: var(--c-card-title-underline-color, var(--c-primary-600));
  color: var(--_c-card-title-color);
  display: block;
  font-family: var(--c-font-family);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  text-wrap: balance;
}

.c-card-title {
  padding-inline: var(--_c-card-gap, 24px);
}
.c-card-title__header p {
  margin: 0;
}
.c-card-title--actions {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  flex: 0 0 auto;
  gap: 8px;
}
.c-card-title--actions.c-card-title--wrapped .c-card-title__actions {
  justify-content: start;
}
.c-card-title__underline {
  background-color: var(--_c-card-title-underline-color);
  border-radius: 4px;
  height: 4px;
  margin-top: 10px;
  width: 44px;
}
.c-card-title__actions {
  justify-content: end;
  align-items: center;
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 8px;
  flex: 1;
}