@inkline/inkline/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

@charset "UTF-8";
@import 'normalize.css';
/**
 * Breakpoint mixins
 */
.expand-enter-active,
.expand-leave-active {
  transition-property: var(--expand-transition--transition-property, height);
  transition-duration: var(--expand-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--expand-transition--transition-timing-function, var(--transition-timing-function));
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  height: 0;
}

.fade-in-transition-enter-active,
.fade-in-transition-leave-active {
  transition-property: var(--fade-in-transition--transition-property, opacity);
  transition-duration: var(--fade-in-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--fade-in-transition--transition-timing-function, cubic-bezier(0.55, 0, 0.1, 1));
}

.fade-in-transition-enter-from,
.fade-in-transition-leave-active {
  opacity: 0;
}

.fade-in-linear-transition-enter-active,
.fade-in-linear-transition-leave-active {
  transition-property: var(--fade-in-linear-transition--transition-property, opacity);
  transition-duration: var(--fade-in-linear-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--fade-in-linear-transition--transition-timing-function, cubic-bezier(0.23, 1, 0.32, 1));
}

.fade-in-linear-transition-enter-from,
.fade-in-linear-transition-leave-from,
.fade-in-linear-transition-leave-active {
  opacity: 0;
}

.slide-in-right-transition-enter-active,
.slide-in-right-transition-leave-active {
  transition-property: var(--slide-in-right-transition--transition-property, transform);
  transition-duration: var(--slide-in-right-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--slide-in-right-transition--transition-timing-function, ease);
  transform-origin: left;
}

.slide-in-right-transition-enter-from,
.slide-in-right-transition-leave-to {
  transform: translateX(-100%);
}

.slide-in-right-transition-enter-to,
.slide-in-right-transition-leave-from {
  transform: translateX(0);
}

.zoom-in-bottom-transition-enter-active,
.zoom-in-bottom-transition-leave-active {
  transition-property: var(--zoom-in-bottom-transition--transition-property, transform, opacity);
  transition-duration: var(--zoom-in-bottom-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--zoom-in-bottom-transition--transition-timing-function, cubic-bezier(0.23, 1, 0.32, 1));
  opacity: 1;
  transform: scaleY(1);
  transform-origin: center bottom;
}

.zoom-in-bottom-transition-enter-from,
.zoom-in-bottom-transition-leave-active {
  opacity: 0;
  transform: scaleY(0);
}

.zoom-in-center-transition-enter-active,
.zoom-in-center-transition-leave-active {
  transition-property: var(--zoom-in-center-transition--transition-property, transform, opacity);
  transition-duration: var(--zoom-in-center-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--zoom-in-center-transition--transition-timing-function, cubic-bezier(0.55, 0, 0.1, 1));
  opacity: 1;
  transform-origin: center center;
}

.zoom-in-center-transition-enter-from,
.zoom-in-center-transition-leave-active {
  opacity: 0;
  transform: scale(0, 0);
}

.zoom-in-top-transition-enter-active,
.zoom-in-top-transition-leave-active {
  transition-property: var(--zoom-in-top-transition--transition-property, transform, opacity);
  transition-duration: var(--zoom-in-top-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--zoom-in-top-transition--transition-timing-function, cubic-bezier(0.23, 1, 0.32, 1));
  opacity: 1;
  transform: scaleY(1);
  transform-origin: center top;
}

.zoom-in-top-transition-enter-from,
.zoom-in-top-transition-leave-active {
  opacity: 0;
  transform: scaleY(0);
}

.zoom-in-left-transition-enter-active,
.zoom-in-left-transition-leave-active {
  transition-property: var(--zoom-in-center-transition--transition-property, transform, opacity);
  transition-duration: var(--zoom-in-center-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--zoom-in-center-transition--transition-timing-function, cubic-bezier(0.23, 1, 0.32, 1));
  opacity: 1;
  transform: scale(1, 1);
  transform-origin: top left;
}

.zoom-in-left-transition-enter-from,
.zoom-in-left-transition-leave-active {
  opacity: 0;
  transform: scale(0.45, 0.45);
}

.zoom-in-right-transition-enter-active,
.zoom-in-right-transition-leave-active {
  transition-property: var(--zoom-in-right-transition--transition-property, transform, opacity);
  transition-duration: var(--zoom-in-right-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--zoom-in-right-transition--transition-timing-function, cubic-bezier(0.23, 1, 0.32, 1));
  opacity: 1;
  transform: scale(1, 1);
  transform-origin: top right;
}

.zoom-in-right-transition-enter-from,
.zoom-in-right-transition-leave-active {
  opacity: 0;
  transform: scale(0.45, 0.45);
}

/**
 * Document
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/**
 * Body
 *
 * As a best practice, apply a default `background-color`.
 * Prevent adjustments of font size after orientation changes in iOS.
 * Change the default tap highlight to be completely transparent in iOS.
 */
body {
  color: var(--body--color, var(--color-dark));
  background-color: var(--body--background, var(--color-white));
  font-family: var(--body--font-family, var(--font-family-primary-base));
  font-size: var(--body--font-size, var(--font-size));
  line-height: var(--body--line-height, var(--line-height));
  text-align: var(--body--text-align, left);
  transition-property: var(--body--transition-property, background-color, color);
  transition-duration: var(--body--transition-duration, var(--transition-duration));
  transition-timing-function: var(--body--transition-timing-function, var(--transition-timing-function));
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: var(--body--tap-highlight-color, rgba(0, 0, 0, 0));
}

/**
 * Abbreviations
 *
 * Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 * Add explicit cursor to indicate changed behavior.
 * Prevent the text-decoration to be skipped.
 */
abbr[title] {
  cursor: help;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: var(--address--margin-bottom, var(--margin-bottom));
  font-style: normal;
  line-height: inherit;
}

/**
 * Blockquote
 */
blockquote {
  margin: 0 0 var(--blockquote--margin-bottom, var(--margin-bottom));
}

.blockquote {
  font-size: var(--blockquote--font-size, var(--font-size));
}
.blockquote.-left {
  text-align: left;
}
.blockquote.-left.-bordered {
  padding-left: var(--blockquote--padding-left, var(--padding-left));
  border-left: var(--blockquote--border-left, 5px var(--border-left-style) var(--border-left-color));
}
.blockquote.-center {
  text-align: center;
}
.blockquote.-right {
  text-align: right;
}
.blockquote.-right.-bordered {
  padding-right: var(--blockquote--padding-right, var(--padding-right));
  border-right: var(--blockquote--border-right, 5px var(--border-right-style) var(--border-right-color));
}
.blockquote > p {
  margin-bottom: 0;
}
.blockquote > footer,
.blockquote > .footer {
  display: block;
  font-size: 80%;
  color: var(--blockquote--footer--color, var(--text-color-weak));
}
.blockquote > footer::before,
.blockquote > .footer::before {
  content: "— ";
}

/**
 * Code
 */
pre,
code,
kbd,
samp {
  font-family: var(--font-family-primary-monospace);
  font-size: var(--font-size);
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: var(--pre--margin-bottom, var(--margin-bottom));
  font-size: var(--pre--font-size, var(--code--font-size, var(--font-size-sm)));
  overflow: auto;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
  background: transparent;
  padding: 0;
}

code {
  font-size: var(--code--font-size, var(--font-size-sm));
  color: var(--code--color);
  background: var(--code--background);
  padding: var(--code--padding, var(--code--padding-top, 0.15rem) var(--code--padding-right, 0.45rem) var(--code--padding-bottom, 0.15rem) var(--code--padding-left, 0.45rem));
  border-radius: var(--code--border-radius, var(--code--border-top-left-radius, var(--border-top-left-radius)) var(--code--border-top-right-radius, var(--border-top-right-radius)) var(--code--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--code--border-bottom-left-radius, var(--border-bottom-left-radius)));
  word-wrap: break-word;
}
a > code {
  color: inherit;
}

kbd {
  padding: var(--kbd--padding, var(--kbd--padding-top, 0.1875rem) var(--kbd--padding-right, 0.375rem) var(--kbd--padding-bottom, 0.1875rem) var(--kbd--padding-left, 0.375rem));
  font-size: var(--kbd--font-size, var(--code--font-size, var(--font-size-sm)));
  color: var(--kbd--color, var(--body--background));
  background: var(--kbd--background, var(--body--color));
  border-radius: var(--kbd--border-radius, var(--border-radius-sm));
}
kbd kbd {
  padding: 0;
  font-size: var(--kbd--font-size, var(--font-size-sm));
}

output {
  display: inline-block;
}

/**
 * Displays
 */
.d1 {
  margin-top: var(--d1--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d1--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d1--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d1--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d1--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d1--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d1--color, var(--display--color, var(--heading--color, inherit)));
}

.d2 {
  margin-top: var(--d2--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d2--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d2--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d2--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d2--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d2--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d2--color, var(--display--color, var(--heading--color, inherit)));
}

.d3 {
  margin-top: var(--d3--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d3--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d3--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d3--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d3--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d3--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d3--color, var(--display--color, var(--heading--color, inherit)));
}

.d4 {
  margin-top: var(--d4--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d4--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d4--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d4--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d4--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d4--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d4--color, var(--display--color, var(--heading--color, inherit)));
}

.d5 {
  margin-top: var(--d5--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d5--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d5--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d5--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d5--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d5--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d5--color, var(--display--color, var(--heading--color, inherit)));
}

.d6 {
  margin-top: var(--d6--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d6--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d6--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d6--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d6--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d6--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d6--color, var(--display--color, var(--heading--color, inherit)));
}

.d1 {
  font-size: var(--d1--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-5)));
}

.d2 {
  font-size: var(--d2--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-4)));
}

.d3 {
  font-size: var(--d3--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-3)));
}

.d4 {
  font-size: var(--d4--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-2)));
}

.d5 {
  font-size: var(--d5--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-1)));
}

.d6 {
  font-size: var(--d6--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5)));
}

/**
 * Forms
 */
label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  font-size: inherit;
  line-height: inherit;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]:not([type=date],
[type=datetime-local],
[type=month],
[type=week],
[type=time])::-webkit-calendar-picker-indicator {
  display: none !important;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--legend--margin-bottom, var(--margin-bottom));
  font-size: var(--legend--font-size, var(--font-size-lg));
  line-height: inherit;
}
legend + * {
  clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}

/**
 * Headings
 */
h1,
.h1 {
  margin-top: var(--h1--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h1--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h1--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h1--font-style, var(--heading--font-style, normal));
  font-weight: var(--h1--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h1--line-height, var(--heading--line-height, 1.2));
  color: var(--h1--color, var(--heading--color, inherit));
}

h2,
.h2 {
  margin-top: var(--h2--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h2--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h2--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h2--font-style, var(--heading--font-style, normal));
  font-weight: var(--h2--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h2--line-height, var(--heading--line-height, 1.2));
  color: var(--h2--color, var(--heading--color, inherit));
}

h3,
.h3 {
  margin-top: var(--h3--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h3--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h3--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h3--font-style, var(--heading--font-style, normal));
  font-weight: var(--h3--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h3--line-height, var(--heading--line-height, 1.2));
  color: var(--h3--color, var(--heading--color, inherit));
}

h4,
.h4 {
  margin-top: var(--h4--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h4--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h4--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h4--font-style, var(--heading--font-style, normal));
  font-weight: var(--h4--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h4--line-height, var(--heading--line-height, 1.2));
  color: var(--h4--color, var(--heading--color, inherit));
}

h5,
.h5 {
  margin-top: var(--h5--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h5--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h5--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h5--font-style, var(--heading--font-style, normal));
  font-weight: var(--h5--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h5--line-height, var(--heading--line-height, 1.2));
  color: var(--h5--color, var(--heading--color, inherit));
}

h6,
.h6 {
  margin-top: var(--h6--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h6--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h6--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h6--font-style, var(--heading--font-style, normal));
  font-weight: var(--h6--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h6--line-height, var(--heading--line-height, 1.2));
  color: var(--h6--color, var(--heading--color, inherit));
}

h1,
.h1 {
  font-size: var(--h1--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5)));
}

h2,
.h2 {
  font-size: var(--h2--font-size, calc(var(--font-size) * var(--scale-ratio-pow-4)));
}

h3,
.h3 {
  font-size: var(--h3--font-size, calc(var(--font-size) * var(--scale-ratio-pow-3)));
}

h4,
.h4 {
  font-size: var(--h4--font-size, calc(var(--font-size) * var(--scale-ratio-pow-2)));
}

h5,
.h5 {
  font-size: var(--h5--font-size, calc(var(--font-size) * var(--scale-ratio-pow-1)));
}

h6,
.h6 {
  font-size: var(--h6--font-size, var(--font-size));
}

/**
 * Hidden attribute
 *
 * Always hide an element with the `hidden` HTML attribute.
 */
[hidden] {
  display: none !important;
}

/**
 * Horizontal rule
 */
hr {
  margin: var(--hr--margin, var(--margin-top) 0 var(--margin-bottom));
  color: var(--hr--color, inherit);
  border: 0;
  border-top: var(--hr--border-width, var(--border-top-width)) solid var(--hr--border-color, var(--border-top-color));
}

/**
 * Iframe
 *
 * Remove border from iframe
 */
iframe {
  border: 0;
}

/**
 * Images
 */
img,
svg {
  vertical-align: middle;
}

figure {
  margin: 0 0 var(--figure--margin-bottom, var(--margin-bottom));
}

.image.-fluid,
._image\:fluid {
  height: auto;
  width: 100%;
}

.image.-responsive,
._image\:responsive,
.image.-thumbnail,
._image\:thumbnail,
.image.-polaroid,
._image\:polaroid {
  height: auto;
  max-width: 100%;
}

.image.-thumbnail,
._image\:thumbnail,
.image.-polaroid,
._image\:polaroid {
  padding: var(--thumbnail--padding, var(--padding));
  background-color: var(--thumbnail--background, var(--color--white));
  border-width: var(--thumbnail--border-width, var(--border-width));
  border-style: var(--thumbnail--border-style, var(--border-style));
  border-color: var(--thumbnail--border-color, var(--border-color));
  border-radius: var(--thumbnail--border-radius, var(--border-radius));
  transition: var(--thumbnail--transition, var(--transition-duration) all var(--transition-timing-function));
  box-shadow: var(--thumbnail--box-shadow, var(--box-shadow));
}

.image.-polaroid,
._image\:polaroid {
  padding-bottom: var(--polaroid--padding, var(--padding));
}

.image[src$=".svg"] {
  width: 100% \9 ;
}

.figure {
  display: inline-block;
}
.figure > .image,
.figure > img {
  margin-bottom: var(--figure--image--margin-bottom, var(--margin-bottom));
  line-height: 1;
}
.figure > .caption {
  font-size: var(--figure--caption--font-size, var(--font-size-sm));
  color: var(--figure--caption--color, var(--body--color));
}

/**
 * Links
 * @credit https://github.com/twbs/bootstrap/issues/19402
 */
a {
  color: var(--link--color, var(--color-primary-500));
  text-decoration: var(--link--text-decoration, none);
}
a:hover {
  color: var(--link--hover--color, var(--color-primary-600));
  text-decoration: var(--link--hover--text-decoration, underline);
}

a:not([href], [class], [to]), a:not([href], [class], [to]):hover {
  color: inherit;
  text-decoration: none;
}

/**
 * Lists
 */
ol {
  padding-left: var(--ol--padding-left, var(--list--padding-left, var(--padding-left-lg)));
  margin-top: var(--ol--margin-top, var(--list--margin-top, 0));
  margin-bottom: var(--ol--margin-bottom, var(--list--margin-bottom, var(--margin-bottom)));
}

ul {
  padding-left: var(--ul--padding-left, var(--list--padding-left, var(--padding-left-lg)));
  margin-top: var(--ul--margin-top, var(--list--margin-top, 0));
  margin-bottom: var(--ul--margin-bottom, var(--list--margin-bottom, var(--margin-bottom)));
}

dl {
  margin-top: var(--dl--margin-top, var(--list--margin-top, 0));
  margin-bottom: var(--dl--margin-bottom, var(--list--margin-bottom, var(--margin-bottom)));
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: var(--dl--dt--font-weight, var(--font-weight-bold));
}

dd {
  margin-bottom: var(--dl--dd--margin-bottom, var(--margin-bottom-sm));
  margin-left: var(--dl--dd--margin-left, 0);
}

ul > .item,
ul > li,
ol > .item,
ol > li,
dl > .item,
dl > li,
.list > .item,
.list > li,
._list\:unstyled > .item,
._list\:unstyled > li,
._list\:inline > .item,
._list\:inline > li {
  margin-bottom: var(--list--item--margin-bottom, var(--margin-bottom-1-2));
}

.list.-unstyled,
._list\:unstyled {
  padding-left: 0;
  list-style: none;
}

.list.-inline,
._list\:inline {
  padding-left: 0;
  list-style: none;
}
.list.-inline > .item,
.list.-inline > li,
._list\:inline > .item,
._list\:inline > li {
  display: inline-flex;
  margin-bottom: 0;
}
.list.-inline > .item:not(:last-child),
.list.-inline > li:not(:last-child),
._list\:inline > .item:not(:last-child),
._list\:inline > li:not(:last-child) {
  margin-right: var(--list--inline--item--margin-right, var(--margin-right));
}

/**
 * Mark
 */
mark {
  padding: var(--mark--padding, 0.1875rem);
  background-color: var(--mark--background, var(--color-yellow-100));
}

/**
 * Paragraphs
 */
p {
  margin-top: var(--p--margin-top, 0);
  margin-bottom: var(--p--margin-bottom, var(--margin-bottom));
}

.lead {
  font-size: var(--lead--font-size, var(--font-size-lg));
  font-weight: var(--lead--font-weight, var(--font-weight-light));
}

.initialism {
  font-size: var(--initialism--font-size, 90%);
  text-transform: var(--initialism--text-transform, uppercase);
}

/**
 * Summary
 */
summary {
  cursor: pointer;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: var(--caption--padding-top, var(--table--cell--padding-top, var(--padding-top-sm)));
  padding-bottom: var(--caption--padding-bottom, var(--table--cell--padding-bottom, var(--padding-bottom-sm)));
  color: var(--caption--color, var(--color-gray-600));
  text-align: left;
}

th {
  font-weight: var(--table--th--font-weight, var(--font-weight-bold));
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

/**
 * Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
 *
 * In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
 * DON'T remove the click delay when `<meta name='viewport' content='width=device-width'>` is present.
 * However, they DO support removing the click delay via `touch-action: manipulation`.
 * See:
 * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
 * http://caniuse.com/#feat=css-touch-action
 * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
 */
a,
area,
button,
[role=button],
input:not([type=range]),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

/**
 * Alert
 */
.alert {
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
  border-style: var(--alert--border-style, var(--alert--border-top-style, var(--border-top-style)) var(--alert--border-right-style, var(--border-right-style)) var(--alert--border-bottom-style, var(--border-bottom-style)) var(--alert--border-left-style, var(--border-left-style)));
  border-width: var(--alert--border-width, var(--alert--border-top-width, var(--border-top-width)) var(--alert--border-right-width, var(--border-right-width)) var(--alert--border-bottom-width, var(--border-bottom-width)) var(--alert--border-left-width, var(--border-left-width)));
  border-color: var(--alert--border-color, var(--alert--border-top-color, var(--border-top-color)) var(--alert--border-right-color, var(--border-right-color)) var(--alert--border-bottom-color, var(--border-bottom-color)) var(--alert--border-left-color, var(--border-left-color)));
  border-radius: var(--alert--border-radius, var(--alert--border-top-left-radius, var(--border-top-left-radius)) var(--alert--border-top-right-radius, var(--border-top-right-radius)) var(--alert--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--alert--border-bottom-left-radius, var(--border-bottom-left-radius)));
  font-size: var(--alert--font-size, var(--font-size));
  box-shadow: var(--alert--box-shadow, var(--alert--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--alert--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--alert--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--alert--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--alert--box-shadow-color, var(--box-shadow-color)));
  background: var(--alert--background);
  color: var(--alert--color);
  background-clip: border-box;
  transition-property: var(--alert--transition-property, background-color, color, border-color);
  transition-duration: var(--alert--transition-duration, var(--transition-duration));
  transition-timing-function: var(--alert--transition-timing-function, var(--transition-timing-function));
  align-items: center;
}
.alert a {
  color: var(--alert--link--color, var(--alert--color));
  font-weight: 600;
  transition-property: var(--alert--link--transition-property, color);
  transition-duration: var(--alert--transition-duration, var(--transition-duration));
  transition-timing-function: var(--alert--transition-timing-function, var(--transition-timing-function));
}
.alert a:hover, .alert a:focus {
  color: var(--alert--link-color, var(--color));
}
.alert code {
  background: var(--alert--code--background);
  color: var(--alert--code--color);
}
.alert > .content {
  padding: var(--alert--padding, var(--alert--padding-top, var(--padding-top)) var(--alert--padding-right, var(--padding-right)) var(--alert--padding-bottom, var(--padding-bottom)) var(--alert--padding-left, var(--padding-left)));
}
.alert > .content > .title {
  font-weight: var(--alert--title--font-weight, var(--font-weight-semibold));
}
.alert > .icon {
  margin-left: var(--alert--icon--margin-left, var(--alert--padding-left, var(--padding-left)));
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.alert > .dismiss {
  flex: 0 0 auto;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  margin-right: var(--alert--dismiss--margin-right, var(--alert--padding-right, var(--padding-right)));
}
.alert,
.alert > .content {
  flex: 0 1 100%;
}
.alert > hr,
.alert > .content > hr {
  margin-right: 0;
  margin-left: 0;
}

/**
 * Color variants
 */
.alert.-info {
  --alert--background: var(--alert--info--background, var(--color-info-100));
  --alert--border-top-color: var(--alert--info--border-top-color, var(--color-info-500));
  --alert--border-right-color: var(--alert--info--border-right-color, var(--color-info-500));
  --alert--border-bottom-color: var(
      --alert--info--border-bottom-color,
      var(--color-info-500)
  );
  --alert--border-left-color: var(--alert--info--border-left-color, var(--color-info-500));
  --alert--color: var(--alert--info--color, var(--color-info-800));
}
.alert.-success {
  --alert--background: var(--alert--success--background, var(--color-success-100));
  --alert--border-top-color: var(
      --alert--success--border-top-color,
      var(--color-success-500)
  );
  --alert--border-right-color: var(
      --alert--success--border-right-color,
      var(--color-success-500)
  );
  --alert--border-bottom-color: var(
      --alert--success--border-bottom-color,
      var(--color-success-500)
  );
  --alert--border-left-color: var(
      --alert--success--border-left-color,
      var(--color-success-500)
  );
  --alert--color: var(--alert--success--color, var(--color-success-800));
}
.alert.-warning {
  --alert--background: var(--alert--warning--background, var(--color-warning-100));
  --alert--border-top-color: var(
      --alert--warning--border-top-color,
      var(--color-warning-500)
  );
  --alert--border-right-color: var(
      --alert--warning--border-right-color,
      var(--color-warning-500)
  );
  --alert--border-bottom-color: var(
      --alert--warning--border-bottom-color,
      var(--color-warning-500)
  );
  --alert--border-left-color: var(
      --alert--warning--border-left-color,
      var(--color-warning-500)
  );
  --alert--color: var(--alert--warning--color, var(--color-warning-800));
}
.alert.-danger {
  --alert--background: var(--alert--danger--background, var(--color-danger-100));
  --alert--border-top-color: var(--alert--danger--border-top-color, var(--color-danger-500));
  --alert--border-right-color: var(
      --alert--danger--border-right-color,
      var(--color-danger-500)
  );
  --alert--border-bottom-color: var(
      --alert--danger--border-bottom-color,
      var(--color-danger-500)
  );
  --alert--border-left-color: var(
      --alert--danger--border-left-color,
      var(--color-danger-500)
  );
  --alert--color: var(--alert--danger--color, var(--color-danger-800));
}

/**
 * Size variants
 */
.alert.-sm {
  --alert--border-top-left-radius: var(
      --alert--sm--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --alert--border-top-right-radius: var(
      --alert--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --alert--border-bottom-right-radius: var(
      --alert--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --alert--border-bottom-left-radius: var(
      --alert--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --alert--font-size: var(
      --alert--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --alert--padding-top: var(
      --alert--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --alert--padding-right: var(
      --alert--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --alert--padding-bottom: var(
      --alert--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --alert--padding-left: var(
      --alert--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
}
.alert.-md {
  --alert--border-top-left-radius: var(
      --alert--md--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --alert--border-top-right-radius: var(
      --alert--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --alert--border-bottom-right-radius: var(
      --alert--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --alert--border-bottom-left-radius: var(
      --alert--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --alert--font-size: var(
      --alert--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --alert--padding-top: var(
      --alert--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --alert--padding-right: var(
      --alert--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --alert--padding-bottom: var(
      --alert--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --alert--padding-left: var(
      --alert--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
}
.alert.-lg {
  --alert--border-top-left-radius: var(
      --alert--lg--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --alert--border-top-right-radius: var(
      --alert--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --alert--border-bottom-right-radius: var(
      --alert--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --alert--border-bottom-left-radius: var(
      --alert--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --alert--font-size: var(
      --alert--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --alert--padding-top: var(
      --alert--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --alert--padding-right: var(
      --alert--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --alert--padding-bottom: var(
      --alert--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --alert--padding-left: var(
      --alert--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
}

/**
 * Badge
 */
.badge {
  display: inline-block;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  color: var(--badge--color);
  background: var(--badge--background);
  border-style: var(--badge--border-style, var(--badge--border-top-style, var(--border-top-style)) var(--badge--border-right-style, var(--border-right-style)) var(--badge--border-bottom-style, var(--border-bottom-style)) var(--badge--border-left-style, var(--border-left-style)));
  border-width: var(--badge--border-width, var(--badge--border-top-width, var(--border-top-width)) var(--badge--border-right-width, var(--border-right-width)) var(--badge--border-bottom-width, var(--border-bottom-width)) var(--badge--border-left-width, var(--border-left-width)));
  border-color: var(--badge--border-color, var(--badge--border-top-color, var(--border-top-color)) var(--badge--border-right-color, var(--border-right-color)) var(--badge--border-bottom-color, var(--border-bottom-color)) var(--badge--border-left-color, var(--border-left-color)));
  border-radius: var(--badge--border-radius, var(--badge--border-top-left-radius, var(--border-top-left-radius)) var(--badge--border-top-right-radius, var(--border-top-right-radius)) var(--badge--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--badge--border-bottom-left-radius, var(--border-bottom-left-radius)));
  font-size: var(--badge--font-size, var(--font-size));
  box-shadow: var(--badge--box-shadow, var(--badge--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--badge--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--badge--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--badge--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--badge--box-shadow-color, var(--box-shadow-color)));
  padding: var(--badge--padding, var(--badge--padding-top, var(--padding-top)) var(--badge--padding-right, var(--padding-right)) var(--badge--padding-bottom, var(--padding-bottom)) var(--badge--padding-left, var(--padding-left)));
  font-weight: var(--badge--font-weight, var(--font-weight-semibold));
  transition-property: var(--badge--transition-property, background-color, color, border-color);
  transition-duration: var(--badge--transition-duration, var(--transition-duration));
  transition-timing-function: var(--badge--transition-timing-function, var(--transition-timing-function));
}
a:hover .badge, a:focus .badge {
  text-decoration: none;
  background: var(--badge--link--hover--background, var(--badge--background));
}
.button .badge {
  position: relative;
  top: -1px;
}
.badge.-pill {
  --border-radius: 50%;
}

/**
 * Color variants
 */
.badge.-primary {
  --badge--background: var(--badge--primary--background, var(--color-primary));
  --badge--border-top-color: var(
      --badge--primary--border-top-color,
      var(--color-primary-shade-50)
  );
  --badge--border-right-color: var(
      --badge--primary--border-right-color,
      var(--color-primary-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--primary--border-bottom-color,
      var(--color-primary-shade-50)
  );
  --badge--border-left-color: var(
      --badge--primary--border-left-color,
      var(--color-primary-shade-50)
  );
  --badge--color: var(--badge--primary--color, var(--contrast-text-color-primary));
}
.badge.-secondary {
  --badge--background: var(--badge--secondary--background, var(--color-secondary));
  --badge--border-top-color: var(
      --badge--secondary--border-top-color,
      var(--color-secondary-shade-50)
  );
  --badge--border-right-color: var(
      --badge--secondary--border-right-color,
      var(--color-secondary-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--secondary--border-bottom-color,
      var(--color-secondary-shade-50)
  );
  --badge--border-left-color: var(
      --badge--secondary--border-left-color,
      var(--color-secondary-shade-50)
  );
  --badge--color: var(--badge--secondary--color, var(--contrast-text-color-secondary));
}
.badge.-info {
  --badge--background: var(--badge--info--background, var(--color-info));
  --badge--border-top-color: var(--badge--info--border-top-color, var(--color-info-shade-50));
  --badge--border-right-color: var(
      --badge--info--border-right-color,
      var(--color-info-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--info--border-bottom-color,
      var(--color-info-shade-50)
  );
  --badge--border-left-color: var(
      --badge--info--border-left-color,
      var(--color-info-shade-50)
  );
  --badge--color: var(--badge--info--color, var(--contrast-text-color-info));
}
.badge.-success {
  --badge--background: var(--badge--success--background, var(--color-success));
  --badge--border-top-color: var(
      --badge--success--border-top-color,
      var(--color-success-shade-50)
  );
  --badge--border-right-color: var(
      --badge--success--border-right-color,
      var(--color-success-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--success--border-bottom-color,
      var(--color-success-shade-50)
  );
  --badge--border-left-color: var(
      --badge--success--border-left-color,
      var(--color-success-shade-50)
  );
  --badge--color: var(--badge--success--color, var(--contrast-text-color-success));
}
.badge.-warning {
  --badge--background: var(--badge--warning--background, var(--color-warning));
  --badge--border-top-color: var(
      --badge--warning--border-top-color,
      var(--color-warning-shade-50)
  );
  --badge--border-right-color: var(
      --badge--warning--border-right-color,
      var(--color-warning-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--warning--border-bottom-color,
      var(--color-warning-shade-50)
  );
  --badge--border-left-color: var(
      --badge--warning--border-left-color,
      var(--color-warning-shade-50)
  );
  --badge--color: var(--badge--warning--color, var(--contrast-text-color-warning));
}
.badge.-danger {
  --badge--background: var(--badge--danger--background, var(--color-danger));
  --badge--border-top-color: var(
      --badge--danger--border-top-color,
      var(--color-danger-shade-50)
  );
  --badge--border-right-color: var(
      --badge--danger--border-right-color,
      var(--color-danger-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--danger--border-bottom-color,
      var(--color-danger-shade-50)
  );
  --badge--border-left-color: var(
      --badge--danger--border-left-color,
      var(--color-danger-shade-50)
  );
  --badge--color: var(--badge--danger--color, var(--contrast-text-color-danger));
}
.badge.-light {
  --badge--background: var(--badge--light--background, var(--color-light));
  --badge--border-top-color: var(
      --badge--light--border-top-color,
      var(--color-light-shade-50)
  );
  --badge--border-right-color: var(
      --badge--light--border-right-color,
      var(--color-light-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --badge--border-left-color: var(
      --badge--light--border-left-color,
      var(--color-light-shade-50)
  );
  --badge--color: var(--badge--light--color, var(--contrast-text-color-light));
}
.badge.-dark {
  --badge--background: var(--badge--dark--background, var(--color-dark));
  --badge--border-top-color: var(--badge--dark--border-top-color, var(--color-dark-tint-50));
  --badge--border-right-color: var(
      --badge--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --badge--border-bottom-color: var(
      --badge--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --badge--border-left-color: var(
      --badge--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --badge--color: var(--badge--dark--color, var(--contrast-text-color-dark));
}

/**
 * Size variants
 */
.badge.-sm {
  --badge--border-top-left-radius: var(
      --badge--sm--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --badge--border-top-right-radius: var(
      --badge--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --badge--border-bottom-right-radius: var(
      --badge--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --badge--border-bottom-left-radius: var(
      --badge--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --badge--font-size: var(
      --badge--sm--font-size,
      calc(calc(var(--font-size) * var(--size-multiplier-sm)) * 0.8)
  );
  --badge--padding-top: var(
      --badge--sm--padding-top,
      calc(calc(var(--padding-top) * var(--size-multiplier-sm)) * 0.25)
  );
  --badge--padding-right: var(
      --badge--sm--padding-right,
      calc(calc(var(--padding-right) * var(--size-multiplier-sm)) * 0.5)
  );
  --badge--padding-bottom: var(
      --badge--sm--padding-bottom,
      calc(calc(var(--padding-bottom) * var(--size-multiplier-sm)) * 0.25)
  );
  --badge--padding-left: var(
      --badge--sm--padding-left,
      calc(calc(var(--padding-left) * var(--size-multiplier-sm)) * 0.5)
  );
}
.badge.-md {
  --badge--border-top-left-radius: var(
      --badge--md--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --badge--border-top-right-radius: var(
      --badge--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --badge--border-bottom-right-radius: var(
      --badge--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --badge--border-bottom-left-radius: var(
      --badge--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --badge--font-size: var(
      --badge--md--font-size,
      calc(calc(var(--font-size) * var(--size-multiplier-md)) * 0.8)
  );
  --badge--padding-top: var(
      --badge--md--padding-top,
      calc(calc(var(--padding-top) * var(--size-multiplier-md)) * 0.25)
  );
  --badge--padding-right: var(
      --badge--md--padding-right,
      calc(calc(var(--padding-right) * var(--size-multiplier-md)) * 0.5)
  );
  --badge--padding-bottom: var(
      --badge--md--padding-bottom,
      calc(calc(var(--padding-bottom) * var(--size-multiplier-md)) * 0.25)
  );
  --badge--padding-left: var(
      --badge--md--padding-left,
      calc(calc(var(--padding-left) * var(--size-multiplier-md)) * 0.5)
  );
}
.badge.-lg {
  --badge--border-top-left-radius: var(
      --badge--lg--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --badge--border-top-right-radius: var(
      --badge--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --badge--border-bottom-right-radius: var(
      --badge--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --badge--border-bottom-left-radius: var(
      --badge--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --badge--font-size: var(
      --badge--lg--font-size,
      calc(calc(var(--font-size) * var(--size-multiplier-lg)) * 0.8)
  );
  --badge--padding-top: var(
      --badge--lg--padding-top,
      calc(calc(var(--padding-top) * var(--size-multiplier-lg)) * 0.25)
  );
  --badge--padding-right: var(
      --badge--lg--padding-right,
      calc(calc(var(--padding-right) * var(--size-multiplier-lg)) * 0.5)
  );
  --badge--padding-bottom: var(
      --badge--lg--padding-bottom,
      calc(calc(var(--padding-bottom) * var(--size-multiplier-lg)) * 0.25)
  );
  --badge--padding-left: var(
      --badge--lg--padding-left,
      calc(calc(var(--padding-left) * var(--size-multiplier-lg)) * 0.5)
  );
}

/**
 * Breadcrumb
 */
.breadcrumb {
  display: flex;
  margin-bottom: var(--breadcrumb--margin-bottom, var(--margin-bottom));
  font-size: var(--breadcrumb--font-size, var(--font-size));
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
}

/**
 * Color variants
 */
.breadcrumb.-light {
  --breadcrumb--color: var(--breadcrumb--light--color, var(--color-dark));
  --breadcrumb--link--color: var(--breadcrumb--light--link--color, var(--color-primary));
  --breadcrumb--active--color: var(--breadcrumb--light--active--color, var(--color-gray-500));
}
.breadcrumb.-dark {
  --breadcrumb--color: var(--breadcrumb--dark--color, var(--color-light));
  --breadcrumb--link--color: var(--breadcrumb--dark--link--color, var(--color-primary));
  --breadcrumb--active--color: var(--breadcrumb--dark--active--color, var(--color-gray-500));
}

/**
 * Size variants
 */
.breadcrumb.-sm {
  --breadcrumb--font-size: var(
      --breadcrumb--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --breadcrumb--padding-left: var(
      --breadcrumb--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
  --breadcrumb--padding-right: var(
      --breadcrumb--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
}
.breadcrumb.-md {
  --breadcrumb--font-size: var(
      --bread