/* ------ buttons ----- */
/* ------ typography ----- */
.msk-tile {
  background-color: var(--msk-color-bg, #ffffff);
  color: var(--msk-color-content-primary, #171414);
  border-radius: 0.5rem;
  display: block;
  line-height: 1.7;
  padding: 0;
  transition-duration: 110ms;
  transition-property: background-color, color, outline, box-shadow, border;
  transition-timing-function: cubic-bezier(0.22, 0.59, 0.88, 0.41);
  width: 100%;
}
.msk-tile .msk--h3 ~ .msk--p {
  margin-top: 0;
}
.msk-tile.msk-tile-default {
  box-shadow: 0px 3px 8px 0px rgba(0, 22, 65, 0.1), 0px 1.5px 4px 0px rgba(0, 22, 65, 0.1), 0px 0.75px 2px 0px rgba(0, 22, 65, 0.1);
}
.msk-tile.msk-tile-outline {
  border: 0.0625rem solid var(--msk-color-border, #cac5c4);
  box-shadow: unset;
}
.msk-tile.msk-tile-ghost {
  background-color: transparent;
  border: none;
  box-shadow: unset;
}
.msk-tile.msk-tile-clickable {
  cursor: pointer;
  text-align: left;
}
.msk-tile.msk-tile-clickable:not(.msk-tile-ghost) {
  border-color: var(--msk-color-border-link, #113e90);
  border-style: solid;
  border-width: 2px;
}
.msk-tile.msk-tile-clickable h1,
.msk-tile.msk-tile-clickable h2,
.msk-tile.msk-tile-clickable h3,
.msk-tile.msk-tile-clickable h4,
.msk-tile.msk-tile-clickable h5,
.msk-tile.msk-tile-clickable h6 {
  color: var(--msk-color-content-action-secondary, #113e90);
}
.msk-tile.msk-tile-clickable:hover, .msk-tile.msk-tile-clickable:focus, .msk-tile.msk-tile-clickable:focus-within {
  background-color: var(--msk-color-bg-action-hover, #f2f4f8);
  border-color: var(--msk-color-border-link-hover, #002569);
}
.msk-tile.msk-tile-clickable:hover h1,
.msk-tile.msk-tile-clickable:hover h2,
.msk-tile.msk-tile-clickable:hover h3,
.msk-tile.msk-tile-clickable:hover h4,
.msk-tile.msk-tile-clickable:hover h5,
.msk-tile.msk-tile-clickable:hover h6, .msk-tile.msk-tile-clickable:focus h1,
.msk-tile.msk-tile-clickable:focus h2,
.msk-tile.msk-tile-clickable:focus h3,
.msk-tile.msk-tile-clickable:focus h4,
.msk-tile.msk-tile-clickable:focus h5,
.msk-tile.msk-tile-clickable:focus h6, .msk-tile.msk-tile-clickable:focus-within h1,
.msk-tile.msk-tile-clickable:focus-within h2,
.msk-tile.msk-tile-clickable:focus-within h3,
.msk-tile.msk-tile-clickable:focus-within h4,
.msk-tile.msk-tile-clickable:focus-within h5,
.msk-tile.msk-tile-clickable:focus-within h6 {
  color: var(--msk-color-content-action-secondary-hover, #002569);
}
.msk-tile.msk-tile-clickable:hover.msk-tile-ghost, .msk-tile.msk-tile-clickable:focus.msk-tile-ghost, .msk-tile.msk-tile-clickable:focus-within.msk-tile-ghost {
  background-color: #f2f4f8;
}
.msk-tile.msk-tile-clickable:focus, .msk-tile.msk-tile-clickable:focus-within {
  border-radius: 0.5rem;
  box-shadow: 0 0 0 0.1875rem var(--msk-color-border-focus-outer, #000000), 0 0 0 0.0625rem var(--msk-color-border-focus-inner, #ffffff);
}
.msk-tile.msk-tile-clickable:active {
  background-color: var(--msk-color-bg-action-active, #dde1e6);
  border-color: var(--msk-color-border-link-active, #001641);
}
.msk-tile.msk-tile-clickable:active h1,
.msk-tile.msk-tile-clickable:active h2,
.msk-tile.msk-tile-clickable:active h3,
.msk-tile.msk-tile-clickable:active h4,
.msk-tile.msk-tile-clickable:active h5,
.msk-tile.msk-tile-clickable:active h6 {
  color: var(--msk-color-content-action-secondary-active, #001641);
}
.msk-tile.msk-tile-clickable:active.msk-tile-ghost {
  background-color: transparent;
}