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(c-card) {
  /**
   * @prop --c-card-gap: Card column gap / padding
   * @prop --c-card-background-color: Card background color
   */
  --_c-card-gap: var(--c-card-gap, clamp(1rem, 2vw, 1.5rem));
  --_c-card-background-color: var(--c-card-background-color, var(--c-white));
  display: flex;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.15) 0 10px 20px, rgba(0, 0, 0, 0.2) 0 5px 5px;
  position: relative;
  background-color: var(--_c-card-background-color);
}
:host(c-card) article {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--_c-card-gap);
  max-width: 100%;
  padding-block: var(--_c-card-gap);
}

:host(.c-card--fullscreen) {
  --c-icon-button-text-background-color: var(--c-white);
  overflow: auto;
}
:host(.c-card--fullscreen) .c-card__fullscreen-toggle {
  position: fixed;
}
@-moz-document url-prefix() {
  :host(.c-card--fullscreen) .c-card__fullscreen-toggle {
    position: absolute;
  }
}

::slotted(c-loader) {
  border-radius: 6px;
}

.c-card__fullscreen-toggle {
  position: absolute;
  right: calc(var(--_c-card-gap) - 8px);
  top: calc(var(--_c-card-gap) - 8px);
}