@dialpad/dialtone-css/lib/dist/dialtone-default-theme.css

Dialpad's design system

/* stylelint-disable meowtec/no-px */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/* Sections
   ========================================================================== */
/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  margin: 0.67em 0;
  font-size: 2em;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-size: 1em;
  /* 2 */
  font-family: monospace;
  /* 1 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
  text-decoration-thickness: var(--dt-size-border-50);
}
ins,
u {
  text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
  text-decoration-thickness: var(--dt-size-border-50);
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
  border-bottom: none;
  /* 1 */
  text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
  text-decoration-thickness: var(--dt-size-border-100);
}
del,
s {
  text-decoration-thickness: var(--dt-size-border-100) !important;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-size: 1em;
  /* 2 */
  font-family: monospace;
  /* 1 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
ol,
ul,
li {
  list-style: none;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  /* 2 */
  color: inherit;
  font-size: 100%;
  /* 1 */
  font-family: inherit;
  /* 1 */
  line-height: 1.15;
  /* 1 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  color: inherit;
  /* 2 */
  white-space: normal;
  /* 1 */
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
  color: inherit;
}
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  padding: 0;
  /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  outline-offset: -2px;
  /* 2 */
  -webkit-appearance: textfield;
  /* 1 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  font: inherit;
  /* 2 */
  -webkit-appearance: button;
  /* 1 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}
/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none !important;
}
/**
 * Default focus ring
 */
:focus-visible {
  outline: 0;
  box-shadow: var(--dt-shadow-focus);
}
/* stylelint-disable meowtec/no-px */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.18s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0 !important;
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1 !important;
}
.slide-down-enter-active {
  transition: -webkit-transform 0.28s ease-out;
  transition: transform 0.28s ease-out;
  transition: transform 0.28s ease-out, -webkit-transform 0.28s ease-out;
}
.slide-down-leave-active {
  transition: -webkit-transform 0.28s ease-in;
  transition: transform 0.28s ease-in;
  transition: transform 0.28s ease-in, -webkit-transform 0.28s ease-in;
}
.slide-down-enter-from {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.slide-down-leave-to {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.pop-enter-active {
  -webkit-animation: pop 0.5s;
          animation: pop 0.5s;
}
.pop-leave-active {
  animation: pop 0.5s reverse;
}
@-webkit-keyframes pop {
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes pop {
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
.shake-enter-active {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
          animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@-webkit-keyframes shake {
  10%,
  90% {
    -webkit-transform: translate3d(var(--dt-size-300-negative), 0, 0);
            transform: translate3d(var(--dt-size-300-negative), 0, 0);
  }
  20%,
  80% {
    -webkit-transform: translate3d(var(--dt-size-400), 0, 0);
            transform: translate3d(var(--dt-size-400), 0, 0);
  }
  30%,
  50%,
  70% {
    -webkit-transform: translate3d(var(--dt-size-500-negative), 0, 0);
            transform: translate3d(var(--dt-size-500-negative), 0, 0);
  }
  40%,
  60% {
    -webkit-transform: translate3d(var(--dt-size-500), 0, 0);
            transform: translate3d(var(--dt-size-500), 0, 0);
  }
}
@keyframes shake {
  10%,
  90% {
    -webkit-transform: translate3d(var(--dt-size-300-negative), 0, 0);
            transform: translate3d(var(--dt-size-300-negative), 0, 0);
  }
  20%,
  80% {
    -webkit-transform: translate3d(var(--dt-size-400), 0, 0);
            transform: translate3d(var(--dt-size-400), 0, 0);
  }
  30%,
  50%,
  70% {
    -webkit-transform: translate3d(var(--dt-size-500-negative), 0, 0);
            transform: translate3d(var(--dt-size-500-negative), 0, 0);
  }
  40%,
  60% {
    -webkit-transform: translate3d(var(--dt-size-500), 0, 0);
            transform: translate3d(var(--dt-size-500), 0, 0);
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.fade-in {
  -webkit-animation: fade-in 0.18s ease-in-out;
          animation: fade-in 0.18s ease-in-out;
}
.fade-out {
  -webkit-animation: fade-out 0.18s ease-in-out;
          animation: fade-out 0.18s ease-in-out;
}
.d-zoom-enter-from,
.d-zoom-leave-to {
  z-index: var(--zi-hide) !important;
  -webkit-backface-visibility: hidden !important;
          backface-visibility: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.d-zoom__dialog-enter-from,
.d-zoom__dialog-leave-to {
  z-index: var(--zi-hide) !important;
  -webkit-backface-visibility: hidden !important;
          backface-visibility: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  -webkit-transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75) !important;
          transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75) !important;
}
.d-zoom-enter-active,
.d-zoom__dialog-enter-active {
  transition: opacity 100ms var(--ttf-in-out) 10ms, z-index 0s 0s, visibility 0s 0s, -webkit-transform 100ms var(--ttf-in-out) 10ms;
  transition: opacity 100ms var(--ttf-in-out) 10ms, z-index 0s 0s, visibility 0s 0s, transform 100ms var(--ttf-in-out) 10ms;
  transition: opacity 100ms var(--ttf-in-out) 10ms, z-index 0s 0s, visibility 0s 0s, transform 100ms var(--ttf-in-out) 10ms, -webkit-transform 100ms var(--ttf-in-out) 10ms;
}
@media (prefers-reduced-motion) {
  .d-zoom-enter-active,
  .d-zoom__dialog-enter-active {
    transition: none !important;
  }
}
.d-zoom-leave-active {
  transition: opacity 100ms var(--ttf-in-out) 10ms, z-index 0s 200ms, visibility 0s 200ms, -webkit-transform 100ms var(--ttf-in-out) 10ms;
  transition: opacity 100ms var(--ttf-in-out) 10ms, z-index 0s 200ms, visibility 0s 200ms, transform 100ms var(--ttf-in-out) 10ms;
  transition: opacity 100ms var(--ttf-in-out) 10ms, z-index 0s 200ms, visibility 0s 200ms, transform 100ms var(--ttf-in-out) 10ms, -webkit-transform 100ms var(--ttf-in-out) 10ms;
}
.d-zoom-leave-active.d-modal--full {
  transition: opacity 200ms var(--ttf-in-out) 0s, z-index 0s 200ms, visibility 0s 200ms;
}
@media (prefers-reduced-motion) {
  .d-zoom-leave-active {
    transition: none !important;
  }
}
.d-zoom__dialog-leave-active {
  transition: opacity 200ms var(--ttf-in-out) 0s, z-index 0s 200ms, visibility 0s 200ms, -webkit-transform 100ms var(--ttf-in-out) 0s;
  transition: opacity 200ms var(--ttf-in-out) 0s, z-index 0s 200ms, visibility 0s 200ms, transform 100ms var(--ttf-in-out) 0s;
  transition: opacity 200ms var(--ttf-in-out) 0s, z-index 0s 200ms, visibility 0s 200ms, transform 100ms var(--ttf-in-out) 0s, -webkit-transform 100ms var(--ttf-in-out) 0s;
}
.d-zoom__dialog-leave-active.d-modal--full {
  transition: opacity 200ms var(--ttf-in-out) 0s, z-index 0s 200ms, visibility 0s 200ms;
}
@media (prefers-reduced-motion) {
  .d-zoom__dialog-leave-active {
    transition: none !important;
  }
}
.d-root-layout {
  position: relative;
  display: grid;
  grid-template-areas: 'header' 'sidebar' 'body' 'footer';
  grid-template-rows: -webkit-min-content auto 1fr -webkit-min-content;
  grid-template-rows: min-content auto 1fr min-content;
  grid-template-columns: 1fr;
  min-height: 100vh;
}
.d-root-layout--fixed {
  height: auto;
}
.d-root-layout__header {
  grid-area: header;
}
.d-root-layout__header--sticky {
  position: sticky;
  top: 0;
  z-index: var(--zi-navigation);
}
.d-root-layout__sidebar {
  grid-area: sidebar;
  height: 100%;
  overflow: hidden auto;
  box-shadow: none;
}
.d-root-layout__sidebar:focus-visible {
  box-shadow: var(--dt-shadow-focus-inset);
}
.d-root-layout__content {
  grid-area: body;
  overflow-y: auto;
  box-shadow: none;
}
.d-root-layout__content:focus-visible {
  box-shadow: var(--dt-shadow-focus-inset);
}
.d-root-layout__footer {
  grid-area: footer;
}
.d-root-layout__responsive--default {
  grid-template-areas: 'header header' 'sidebar body' 'footer footer';
  grid-template-rows: -webkit-min-content 1fr -webkit-min-content;
  grid-template-rows: min-content 1fr min-content;
  grid-template-columns: -webkit-min-content 1fr;
  grid-template-columns: min-content 1fr;
}
.d-root-layout__responsive--default.d-root-layout--inverted {
  grid-template-areas: 'header header' 'body sidebar' 'footer footer';
  grid-template-columns: 1fr -webkit-min-content;
  grid-template-columns: 1fr min-content;
}
.d-root-layout__responsive--default.d-root-layout--fixed {
  height: 100vh;
}
@media (min-width: 480px) {
  .d-root-layout__responsive--sm {
    grid-template-areas: 'header header' 'sidebar body' 'footer footer';
    grid-template-rows: -webkit-min-content 1fr -webkit-min-content;
    grid-template-rows: min-content 1fr min-content;
    grid-template-columns: -webkit-min-content 1fr;
    grid-template-columns: min-content 1fr;
  }
  .d-root-layout__responsive--sm.d-root-layout--inverted {
    grid-template-areas: 'header header' 'body sidebar' 'footer footer';
    grid-template-columns: 1fr -webkit-min-content;
    grid-template-columns: 1fr min-content;
  }
  .d-root-layout__responsive--sm.d-root-layout--fixed {
    height: 100vh;
  }
}
@media (min-width: 640px) {
  .d-root-layout__responsive--md {
    grid-template-areas: 'header header' 'sidebar body' 'footer footer';
    grid-template-rows: -webkit-min-content 1fr -webkit-min-content;
    grid-template-rows: min-content 1fr min-content;
    grid-template-columns: -webkit-min-content 1fr;
    grid-template-columns: min-content 1fr;
  }
  .d-root-layout__responsive--md.d-root-layout--inverted {
    grid-template-areas: 'header header' 'body sidebar' 'footer footer';
    grid-template-columns: 1fr -webkit-min-content;
    grid-template-columns: 1fr min-content;
  }
  .d-root-layout__responsive--md.d-root-layout--fixed {
    height: 100vh;
  }
}
@media (min-width: 980px) {
  .d-root-layout__responsive--lg {
    grid-template-areas: 'header header' 'sidebar body' 'footer footer';
    grid-template-rows: -webkit-min-content 1fr -webkit-min-content;
    grid-template-rows: min-content 1fr min-content;
    grid-template-columns: -webkit-min-content 1fr;
    grid-template-columns: min-content 1fr;
  }
  .d-root-layout__responsive--lg.d-root-layout--inverted {
    grid-template-areas: 'header header' 'body sidebar' 'footer footer';
    grid-template-columns: 1fr -webkit-min-content;
    grid-template-columns: 1fr min-content;
  }
  .d-root-layout__responsive--lg.d-root-layout--fixed {
    height: 100vh;
  }
}
.d-stack {
  --stack-gap: 0;
  --stack-direction: column;
  --stack-align: initial;
  --stack-justify: initial;
  display: flex;
  flex-direction: var(--stack-direction);
  gap: var(--stack-gap);
  align-items: var(--stack-align);
  justify-content: var(--stack-justify);
}
.d-stack--column-reverse {
  --stack-direction: column-reverse;
  --stack-align: initial;
}
.d-stack--row {
  --stack-direction: row;
  --stack-align: center;
}
.d-stack--row-reverse {
  --stack-direction: row-reverse;
  --stack-align: center;
}
.d-stack--align-start {
  --stack-align: start;
}
.d-stack--align-center {
  --stack-align: center;
}
.d-stack--align-end {
  --stack-align: end;
}
.d-stack--align-stretch {
  --stack-align: stretch;
}
.d-stack--align-baseline {
  --stack-align: baseline;
}
.d-stack--justify-start {
  --stack-justify: start;
}
.d-stack--justify-center {
  --stack-justify: center;
}
.d-stack--justify-end {
  --stack-justify: end;
}
.d-stack--justify-around {
  --stack-justify: space-around;
}
.d-stack--justify-between {
  --stack-justify: space-between;
}
.d-stack--justify-evenly {
  --stack-justify: space-evenly;
}
.d-stack--gap-50 {
  --stack-gap: var(--dt-space-50);
}
.d-stack--gap-100 {
  --stack-gap: var(--dt-space-100);
}
.d-stack--gap-200 {
  --stack-gap: var(--dt-space-200);
}
.d-stack--gap-300 {
  --stack-gap: var(--dt-space-300);
}
.d-stack--gap-350 {
  --stack-gap: var(--dt-space-350);
}
.d-stack--gap-400 {
  --stack-gap: var(--dt-space-400);
}
.d-stack--gap-450 {
  --stack-gap: var(--dt-space-450);
}
.d-stack--gap-500 {
  --stack-gap: var(--dt-space-500);
}
.d-stack--gap-525 {
  --stack-gap: var(--dt-space-525);
}
.d-stack--gap-550 {
  --stack-gap: var(--dt-space-550);
}
.d-stack--gap-600 {
  --stack-gap: var(--dt-space-600);
}
.d-stack--gap-625 {
  --stack-gap: var(--dt-space-625);
}
.d-stack--gap-650 {
  --stack-gap: var(--dt-space-650);
}
.d-stack--gap-700 {
  --stack-gap: var(--dt-space-700);
}
@media screen and (min-width: 480px) {
  .d-stack--sm-column {
    --stack-direction: column;
    --stack-align: initial;
  }
  .d-stack--sm-column-reverse {
    --stack-direction: column-reverse;
    --stack-align: initial;
  }
  .d-stack--sm-row {
    --stack-direction: row;
    --stack-align: center;
  }
  .d-stack--sm-row-reverse {
    --stack-direction: row-reverse;
    --stack-align: center;
  }
  .d-stack--sm-gap-50 {
    --stack-gap: var(--dt-space-50);
  }
  .d-stack--sm-gap-100 {
    --stack-gap: var(--dt-space-100);
  }
  .d-stack--sm-gap-200 {
    --stack-gap: var(--dt-space-200);
  }
  .d-stack--sm-gap-300 {
    --stack-gap: var(--dt-space-300);
  }
  .d-stack--sm-gap-350 {
    --stack-gap: var(--dt-space-350);
  }
  .d-stack--sm-gap-400 {
    --stack-gap: var(--dt-space-400);
  }
  .d-stack--sm-gap-450 {
    --stack-gap: var(--dt-space-450);
  }
  .d-stack--sm-gap-500 {
    --stack-gap: var(--dt-space-500);
  }
  .d-stack--sm-gap-525 {
    --stack-gap: var(--dt-space-525);
  }
  .d-stack--sm-gap-550 {
    --stack-gap: var(--dt-space-550);
  }
  .d-stack--sm-gap-600 {
    --stack-gap: var(--dt-space-600);
  }
  .d-stack--sm-gap-625 {
    --stack-gap: var(--dt-space-625);
  }
  .d-stack--sm-gap-650 {
    --stack-gap: var(--dt-space-650);
  }
  .d-stack--sm-gap-700 {
    --stack-gap: var(--dt-space-700);
  }
  .d-stack--sm-align-start {
    align-items: start;
  }
  .d-stack--sm-align-center {
    align-items: center;
  }
  .d-stack--sm-align-end {
    align-items: end;
  }
  .d-stack--sm-align-stretch {
    align-items: stretch;
  }
  .d-stack--sm-align-baseline {
    align-items: baseline;
  }
  .d-stack--sm-justify-start {
    justify-content: start;
  }
  .d-stack--sm-justify-center {
    justify-content: center;
  }
  .d-stack--sm-justify-end {
    justify-content: end;
  }
  .d-stack--sm-justify-around {
    justify-content: space-around;
  }
  .d-stack--sm-justify-between {
    justify-content: space-between;
  }
  .d-stack--sm-justify-evenly {
    justify-content: space-evenly;
  }
}
@media screen and (min-width: 640px) {
  .d-stack--md-column {
    --stack-direction: column;
    --stack-align: initial;
  }
  .d-stack--md-column-reverse {
    --stack-direction: column-reverse;
    --stack-align: initial;
  }
  .d-stack--md-row {
    --stack-direction: row;
    --stack-align: center;
  }
  .d-stack--md-row-reverse {
    --stack-direction: row-reverse;
    --stack-align: center;
  }
  .d-stack--md-gap-50 {
    --stack-gap: var(--dt-space-50);
  }
  .d-stack--md-gap-100 {
    --stack-gap: var(--dt-space-100);
  }
  .d-stack--md-gap-200 {
    --stack-gap: var(--dt-space-200);
  }
  .d-stack--md-gap-300 {
    --stack-gap: var(--dt-space-300);
  }
  .d-stack--md-gap-350 {
    --stack-gap: var(--dt-space-350);
  }
  .d-stack--md-gap-400 {
    --stack-gap: var(--dt-space-400);
  }
  .d-stack--md-gap-450 {
    --stack-gap: var(--dt-space-450);
  }
  .d-stack--md-gap-500 {
    --stack-gap: var(--dt-space-500);
  }
  .d-stack--md-gap-525 {
    --stack-gap: var(--dt-space-525);
  }
  .d-stack--md-gap-550 {
    --stack-gap: var(--dt-space-550);
  }
  .d-stack--md-gap-600 {
    --stack-gap: var(--dt-space-600);
  }
  .d-stack--md-gap-625 {
    --stack-gap: var(--dt-space-625);
  }
  .d-stack--md-gap-650 {
    --stack-gap: var(--dt-space-650);
  }
  .d-stack--md-gap-700 {
    --stack-gap: var(--dt-space-700);
  }
  .d-stack--md-align-start {
    align-items: start;
  }
  .d-stack--md-align-center {
    align-items: center;
  }
  .d-stack--md-align-end {
    align-items: end;
  }
  .d-stack--md-align-stretch {
    align-items: stretch;
  }
  .d-stack--md-align-baseline {
    align-items: baseline;
  }
  .d-stack--md-justify-start {
    justify-content: start;
  }
  .d-stack--md-justify-center {
    justify-content: center;
  }
  .d-stack--md-justify-end {
    justify-content: end;
  }
  .d-stack--md-justify-around {
    justify-content: space-around;
  }
  .d-stack--md-justify-between {
    justify-content: space-between;
  }
  .d-stack--md-justify-evenly {
    justify-content: space-evenly;
  }
}
@media screen and (min-width: 980px) {
  .d-stack--lg-column {
    --stack-direction: column;
    --stack-align: initial;
  }
  .d-stack--lg-column-reverse {
    --stack-direction: column-reverse;
    --stack-align: initial;
  }
  .d-stack--lg-row {
    --stack-direction: row;
    --stack-align: center;
  }
  .d-stack--lg-row-reverse {
    --stack-direction: row-reverse;
    --stack-align: center;
  }
  .d-stack--lg-gap-50 {
    --stack-gap: var(--dt-space-50);
  }
  .d-stack--lg-gap-100 {
    --stack-gap: var(--dt-space-100);
  }
  .d-stack--lg-gap-200 {
    --stack-gap: var(--dt-space-200);
  }
  .d-stack--lg-gap-300 {
    --stack-gap: var(--dt-space-300);
  }
  .d-stack--lg-gap-350 {
    --stack-gap: var(--dt-space-350);
  }
  .d-stack--lg-gap-400 {
    --stack-gap: var(--dt-space-400);
  }
  .d-stack--lg-gap-450 {
    --stack-gap: var(--dt-space-450);
  }
  .d-stack--lg-gap-500 {
    --stack-gap: var(--dt-space-500);
  }
  .d-stack--lg-gap-525 {
    --stack-gap: var(--dt-space-525);
  }
  .d-stack--lg-gap-550 {
    --stack-gap: var(--dt-space-550);
  }
  .d-stack--lg-gap-600 {
    --stack-gap: var(--dt-space-600);
  }
  .d-stack--lg-gap-625 {
    --stack-gap: var(--dt-space-625);
  }
  .d-stack--lg-gap-650 {
    --stack-gap: var(--dt-space-650);
  }
  .d-stack--lg-gap-700 {
    --stack-gap: var(--dt-space-700);
  }
  .d-stack--lg-align-start {
    align-items: start;
  }
  .d-stack--lg-align-center {
    align-items: center;
  }
  .d-stack--lg-align-end {
    align-items: end;
  }
  .d-stack--lg-align-stretch {
    align-items: stretch;
  }
  .d-stack--lg-align-baseline {
    align-items: baseline;
  }
  .d-stack--lg-justify-start {
    justify-content: start;
  }
  .d-stack--lg-justify-center {
    justify-content: center;
  }
  .d-stack--lg-justify-end {
    justify-content: end;
  }
  .d-stack--lg-justify-around {
    justify-content: space-around;
  }
  .d-stack--lg-justify-between {
    justify-content: space-between;
  }
  .d-stack--lg-justify-evenly {
    justify-content: space-evenly;
  }
}
@media screen and (min-width: 1264px) {
  .d-stack--xl-column {
    --stack-direction: column;
    --stack-align: initial;
  }
  .d-stack--xl-column-reverse {
    --stack-direction: column-reverse;
    --stack-align: initial;
  }
  .d-stack--xl-row {
    --stack-direction: row;
    --stack-align: center;
  }
  .d-stack--xl-row-reverse {
    --stack-direction: row-reverse;
    --stack-align: center;
  }
  .d-stack--xl-gap-50 {
    --stack-gap: var(--dt-space-50);
  }
  .d-stack--xl-gap-100 {
    --stack-gap: var(--dt-space-100);
  }
  .d-stack--xl-gap-200 {
    --stack-gap: var(--dt-space-200);
  }
  .d-stack--xl-gap-300 {
    --stack-gap: var(--dt-space-300);
  }
  .d-stack--xl-gap-350 {
    --stack-gap: var(--dt-space-350);
  }
  .d-stack--xl-gap-400 {
    --stack-gap: var(--dt-space-400);
  }
  .d-stack--xl-gap-450 {
    --stack-gap: var(--dt-space-450);
  }
  .d-stack--xl-gap-500 {
    --stack-gap: var(--dt-space-500);
  }
  .d-stack--xl-gap-525 {
    --stack-gap: var(--dt-space-525);
  }
  .d-stack--xl-gap-550 {
    --stack-gap: var(--dt-space-550);
  }
  .d-stack--xl-gap-600 {
    --stack-gap: var(--dt-space-600);
  }
  .d-stack--xl-gap-625 {
    --stack-gap: var(--dt-space-625);
  }
  .d-stack--xl-gap-650 {
    --stack-gap: var(--dt-space-650);
  }
  .d-stack--xl-gap-700 {
    --stack-gap: var(--dt-space-700);
  }
  .d-stack--xl-align-start {
    align-items: start;
  }
  .d-stack--xl-align-center {
    align-items: center;
  }
  .d-stack--xl-align-end {
    align-items: end;
  }
  .d-stack--xl-align-stretch {
    align-items: stretch;
  }
  .d-stack--xl-align-baseline {
    align-items: baseline;
  }
  .d-stack--xl-justify-start {
    justify-content: start;
  }
  .d-stack--xl-justify-center {
    justify-content: center;
  }
  .d-stack--xl-justify-end {
    justify-content: end;
  }
  .d-stack--xl-justify-around {
    justify-content: space-around;
  }
  .d-stack--xl-justify-between {
    justify-content: space-between;
  }
  .d-stack--xl-justify-evenly {
    justify-content: space-evenly;
  }
}
.d-item-layout {
  display: flex;
  align-items: stretch;
  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
  padding: var(--dt-space-300) var(--dt-space-400);
  font-size: var(--dt-font-size-200);
  line-height: var(--dt-font-line-height-300);
}
.d-item-layout > .d-item-layout__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  min-width: var(--dt-size-0);
}
.d-item-layout > .d-item-layout__content > .d-item-layout__subtitle {
  color: var(--dt-color-foreground-tertiary);
  font-size: var(--dt-font-size-100);
}
.d-item-layout > .d-item-layout__content > .d-item-layout__subtitle-with-title {
  margin-top: var(--dt-space-200-negative);
}
.d-item-layout > .d-item-layout__content > .d-item-layout__bottom {
  margin-top: var(--dt-space-200);
}
.d-item-layout > .d-item-layout__right,
.d-item-layout > .d-item-layout__left {
  display: flex;
  align-items: center;
  min-width: var(--dt-size-600);
  min-height: inherit;
}
.d-item-layout > .d-item-layout__right {
  flex-shrink: 0;
  padding-left: var(--dt-space-400);
}
.d-item-layout > .d-item-layout__left {
  justify-content: flex-end;
  padding-right: var(--dt-space-400);
}
.d-item-layout > .d-item-layout__selected {
  display: flex;
  align-items: center;
}
.d-item-layout--custom {
  display: grid;
}
.d-item-layout--custom .d-item-layout__content {
  display: grid;
  grid-auto-rows: auto;
}
.d-avatar {
  --avatar-color-background: var(--dt-avatar-color-background-000);
  --avatar-color-text: var(--dt-avatar-color-foreground);
  --avatar-size-shape: var(--dt-size-600);
  --avatar-size-image: var(--dt-size-100-percent);
  --avatar-size-text: var(--dt-font-size-200);
  --avatar-presence-position-right: var(--dt-space-200-negative);
  --avatar-presence-position-bottom: var(--dt-space-200-negative);
  --avatar-count-color-shadow: var(--dt-shell-color-surface-default);
  --avatar-presence-mask-size: calc(var(--dt-size-450) + var(--dt-size-50));
  position: relative;
  display: flex;
  color: var(--avatar-color-text);
}
.d-avatar--color-000 {
  --avatar-color-background: var(--dt-avatar-color-background-000);
}
.d-avatar--color-100 {
  --avatar-color-background: var(--dt-avatar-color-background-100);
}
.d-avatar--color-200 {
  --avatar-color-background: var(--dt-avatar-color-background-200);
}
.d-avatar--color-300 {
  --avatar-color-background: var(--dt-avatar-color-background-300);
}
.d-avatar--color-400 {
  --avatar-color-background: var(--dt-avatar-color-background-400);
}
.d-avatar--color-500 {
  --avatar-color-background: var(--dt-avatar-color-background-500);
}
.d-avatar--color-600 {
  --avatar-color-background: var(--dt-avatar-color-background-600);
}
.d-avatar--color-700 {
  --avatar-color-background: var(--dt-avatar-color-background-700);
}
.d-avatar--color-800 {
  --avatar-color-background: var(--dt-avatar-color-background-800);
}
.d-avatar--color-900 {
  --avatar-color-background: var(--dt-avatar-color-background-900);
}
.d-avatar--color-1000 {
  --avatar-color-background: var(--dt-avatar-color-background-1000);
}
.d-avatar--color-1100 {
  --avatar-color-background: var(--dt-avatar-color-background-1100);
}
.d-avatar--color-1200 {
  --avatar-color-background: var(--dt-avatar-color-background-1200);
}
.d-avatar--color-1300 {
  --avatar-color-background: var(--dt-avatar-color-background-1300);
}
.d-avatar--color-1400 {
  --avatar-color-background: var(--dt-avatar-color-background-1400);
}
.d-avatar--color-1500 {
  --avatar-color-background: var(--dt-avatar-color-background-1500);
}
.d-avatar--color-1600 {
  --avatar-color-background: var(--dt-avatar-color-background-1600);
}
.d-avatar--color-1700 {
  --avatar-color-background: var(--dt-avatar-color-background-1700);
}
.d-avatar--color-1800 {
  --avatar-color-background: var(--dt-avatar-color-background-1800);
}
.d-avatar__canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--avatar-size-shape);
  block-size: var(--avatar-size-shape);
  overflow: hidden;
  background-color: var(--avatar-color-background);
  border-radius: var(--dt-size-radius-pill);
}
.d-avatar__image {
  inline-size: var(--avatar-size-image);
  block-size: var(--avatar-size-image);
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--dt-size-radius-pill);
}
.d-avatar--image-loaded {
  background-color: var(--dt-color-neutral-transparent);
  background-image: unset;
}
.d-avatar__initials {
  position: absolute;
  z-index: var(--zi-base);
  font-weight: var(--dt-font-weight-bold);
  font-size: var(--avatar-size-text);
  line-height: var(--dt-font-line-height-100);
  text-transform: uppercase;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.d-avatar__icon {
  display: flex;
}
.d-avatar__presence {
  position: absolute;
  right: var(--avatar-presence-position-right);
  bottom: var(--avatar-presence-position-bottom);
  z-index: var(--zi-base);
  display: flex;
}
.d-avatar__count {
  position: absolute;
  right: var(--dt-space-0);
  bottom: var(--dt-space-0);
  z-index: var(--zi-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: calc(var(--dt-size-300) * 3.5);
  padding: var(--dt-space-200) calc(var(--dt-space-200) + var(--dt-space-100));
  color: var(--dt-color-foreground-primary-inverted);
  font-weight: var(--dt-font-weight-bold);
  font-size: calc(var(--dt-font-size-100) - var(--dt-size-200));
  line-height: var(--dt-font-line-height-100);
  white-space: nowrap;
  text-align: center;
  background-color: var(--dt-color-surface-strong);
  border-radius: var(--dt-size-radius-pill);
  box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
  --avatar-count-color-shadow: var(--dt-color-neutral-transparent);
}
.d-recipe-leftbar-row--selected .d-avatar__count,
.d-recipe-leftbar-row__primary:hover .d-avatar__count {
  --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-hover);
}
.d-avatar--clickable {
  --avatar-color-border: var(--dt-color-neutral-transparent);
  padding: 0;
  background-color: var(--dt-color-neutral-transparent);
  border: var(--dt-size-border-100) solid var(--avatar-color-border);
  border-radius: var(--dt-size-radius-circle);
  cursor: pointer;
}
.d-avatar--clickable:focus-visible {
  outline: none;
  box-shadow: var(--dt-shadow-focus);
}
.d-avatar--clickable:hover {
  --avatar-color-border: var(--dt-color-border-default);
}
.d-avatar--clickable:active {
  --avatar-color-border: var(--dt-color-border-moderate);
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
}
.d-avatar__overlay {
  position: absolute;
  z-index: var(--zi-base);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--dt-size-100-percent);
  block-size: var(--dt-size-100-percent);
  background-color: var(--dt-color-surface-contrast-opaque);
  border-radius: var(--dt-size-radius-circle);
  opacity: var(--dt-opacity-900);
}
.d-avatar__overlay-icon {
  inline-size: var(--dt-size-100-percent);
  color: var(--dt-color-foreground-primary-inverted);
}
.d-avatar__overlay-text {
  inline-size: var(--dt-size-100-percent);
  color: var(--dt-color-foreground-primary-inverted);
  font-weight: var(--dt-font-weight-bold);
  font-size: var(--dt-font-size-200);
  text-align: center;
}
.d-avatar--xs {
  --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-200));
  --avatar-presence-position-right: var(--dt-space-300-negative);
  --avatar-presence-position-bottom: var(--dt-space-300-negative);
  --avatar-presence-mask-offset-x: var(--dt-space-200);
  --avatar-presence-mask-offset-y: var(--dt-space-200);
}
.d-avatar--sm {
  --avatar-size-shape: var(--dt-size-550);
  --avatar-size-text: var(--dt-font-size-100);
  --avatar-presence-position-right: var(--dt-space-200-negative);
  --avatar-presence-position-bottom: var(--dt-space-200-negative);
  --avatar-presence-mask-offset-x: var(--dt-space-300);
  --avatar-presence-mask-offset-y: var(--dt-space-300);
}
.d-avatar--md {
  --avatar-size-shape: var(--dt-size-600);
  --avatar-size-text: var(--dt-font-size-200);
  --avatar-presence-position-right: var(--dt-space-100-negative);
  --avatar-presence-position-bottom: var(--dt-space-100-negative);
  --avatar-presence-mask-offset-x: calc(var(--dt-space-350) - var(--dt-space-100));
  --avatar-presence-mask-offset-y: calc(var(--dt-space-350) - var(--dt-space-100));
}
.d-avatar--lg {
  --avatar-size-shape: var(--dt-size-650);
  --avatar-size-text: var(--dt-font-size-300);
  --avatar-presence-position-right: var(--dt-space-100);
  --avatar-presence-position-bottom: var(--dt-space-100);
  --avatar-presence-mask-offset-x: calc(var(--dt-space-400) - var(--dt-space-100));
  --avatar-presence-mask-offset-y: calc(var(--dt-space-400) - var(--dt-space-100));
}
.d-avatar--xl {
  --avatar-size-shape: var(--dt-size-700);
  --avatar-size-text: var(--dt-font-size-400);
  --avatar-presence-position-right: var(--dt-space-300);
  --avatar-presence-position-bottom: var(--dt-space-300);
  --avatar-presence-mask-offset-x: calc(var(--dt-space-450) - var(--dt-space-200));
  --avatar-presence-mask-offset-y: calc(var(--dt-space-450) - var(--dt-space-200));
}
.d-avatar--presence > .d-avatar__canvas,
.d-avatar--presence > .d-avatar__overlay {
  -webkit-mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
          mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
}
.d-avatar--presence.d-avatar--clickable {
  border-color: var(--dt-color-neutral-transparent);
}
.d-avatar--presence.d-avatar--clickable::before {
  position: absolute;
  background-color: var(--dt-color-neutral-transparent);
  border: var(--dt-size-border-100) solid var(--avatar-color-border);
  border-radius: var(--dt-size-radius-circle);
  content: "";
  inset: calc(var(--dt-space-100) * -1);
  -webkit-mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x) - var(--dt-size-100)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y) - var(--dt-size-100)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
          mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x) - var(--dt-size-100)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y) - var(--dt-size-100)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
}
.d-avatar--presence > .d-presence {
  --presence-color-border-base: var(--dt-color-neutral-transparent);
}
.d-recipe-leftbar-row--selected .d-avatar--presence .d-presence,
.d-recipe-leftbar-row:hover .d-avatar--presence .d-presence,
.d-recipe-leftbar-row:focus-within .d-avatar--presence .d-presence,
.d-recipe-leftbar-row__primary:hover .d-avatar--presence .d-presence {
  --presence-color-border-base: var(--dt-color-neutral-transparent);
}
.d-avatar--group {
  --avatar-size-shape: calc(var(--dt-size-300) * 4.5);
  inline-size: var(--dt-size-550);
  block-size: var(--dt-size-550);
  --avatar-count-mask-size: calc(var(--dt-size-500) + var(--dt-size-200) + var(--dt-size-100));
  --avatar-count-mask-outer-circle-radius: calc(var(--dt-size-400) + var(--dt-size-100));
  --avatar-count-mask-outer-circle-x: calc(var(--dt-size-400) + var(--dt-size-100));
  --avatar-count-mask-outer-circle-y: calc(var(--dt-size-400) + var(--dt-size-100));
  --avatar-count-mask-offset-x: var(--dt-space-100);
  --avatar-count-mask-offset-y: var(--dt-space-100);
  --avatar-count-mask-svg-w: calc(var(--dt-size-625) - var(--dt-size-200));
  --avatar-count-mask-svg-h: calc(var(--dt-size-500) + var(--dt-size-200));
  --avatar-count-color-shadow: var(--dt-color-neutral-transparent);
}
.d-avatar--group.d-avatar--clickable {
  border: none !important;
}
.d-avatar--group > .d-avatar__canvas,
.d-avatar--group > .d-avatar__overlay {
  -webkit-mask: radial-gradient(circle calc(var(--avatar-count-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
          mask: radial-gradient(circle calc(var(--avatar-count-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
  will-change: transform;
}
.d-avatar--group-digits-2 {
  --avatar-count-mask-offset-x: var(--dt-space-300);
  --avatar-count-mask-offset-y: var(--dt-space-400);
}
.d-avatar--group-digits-2 > .d-avatar__canvas,
.d-avatar--group-digits-2 > .d-avatar__overlay {
  -webkit-mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" fill="white"/></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
          mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" fill="white"/></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
  -webkit-mask-composite: subtract;
  mask-composite: subtract;
  will-change: transform;
}
.d-avatar--group-digits-2 > .d-avatar__count {
  padding-inline: var(--dt-space-0);
  inline-size: calc(var(--dt-size-500) + var(--dt-size-200));
}
.d-avatar--group-digits-3 {
  --avatar-count-mask-offset-x: var(--dt-space-300-negative);
  --avatar-count-mask-offset-y: var(--dt-space-400);
}
.d-avatar--group-digits-3 > .d-avatar__canvas,
.d-avatar--group-digits-3 > .d-avatar__overlay {
  -webkit-mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" /></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
          mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" /></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
  -webkit-mask-composite: subtract;
  mask-composite: subtract;
  will-change: transform;
}
.d-avatar--group-digits-3 > .d-avatar__count {
  padding-inline: var(--dt-space-0);
  inline-size: calc(var(--dt-size-550) + var(--dt-size-200));
}
.d-badge {
  --badge-color-text: var(--dt-badge-color-foreground-default);
  --badge-color-background: var(--dt-badge-color-background-default);
  --badge-color-outline: var(--dt-badge-color-border-default);
  --badge-radius: var(--dt-size-300);
  --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
  --badge-font-size: var(--dt-font-size-100);
  --badge-font-weight: var(--dt-font-weight-semi-bold);
  --badge-gap: var(--dt-space-200);
  --badge-letter-spacing: var(--dt-size-50);
  --badge-padding-y: var(--dt-space-100);
  --badge-padding-x: var(--dt-space-300);
  --badge-label-padding-x: var(--dt-space-200);
  --badge-text-case: none;
  --badge-decorative-color: var(--dt-color-black-900);
  display: inline-flex;
  gap: var(--badge-gap);
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-inline-size: var(--dt-size-550);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  color: var(--badge-color-text);
  font-weight: var(--badge-font-weight);
  font-size: var(--badge-font-size);
  line-height: var(--badge-line-height);
  letter-spacing: var(--badge-letter-spacing);
  text-align: center;
  text-transform: var(--badge-text-case);
  background-color: var(--badge-color-background);
  border-radius: var(--badge-radius);
}
.d-badge--count {
  --badge-radius: var(--dt-size-radius-pill);
  --badge-padding-x: calc(var(--dt-space-400) - var(--dt-space-100));
  --badge-padding-y: var(--dt-space-300);
  --badge-line-height: var(--dt-size-500);
  --badge-label-padding-x: var(--dt-space-0);
  --badge-gap: var(--dt-space-300);
}
.d-badge--info {
  --badge-color-background: var(--dt-badge-color-background-info);
}
.d-badge--success {
  --badge-color-background: var(--dt-badge-color-background-success);
}
.d-badge--warning {
  --badge-color-background: var(--dt-badge-color-background-warning);
}
.d-badge--critical {
  --badge-color-background: var(--dt-badge-color-background-critical);
}
.d-badge--bulletin {
  --badge-color-text: var(--dt-badge-color-foreground-bulletin);
  --badge-color-background: var(--dt-badge-color-background-bulletin);
}
.d-badge--bulletin.d-badge--subtle {
  --badge-color-text: var(--dt-badge-color-foreground-bulletin-subtle);
  --badge-color-background: var(--dt-badge-color-background-bulletin-subtle);
  --badge-color-outline: var(--dt-badge-color-border-bulletin-subtle);
}
.d-badge--ai {
  --badge-color-text: var(--dt-badge-color-foreground-ai);
  --badge-color-background: var(--dt-color-brand-magenta);
  text-shadow: var(--dt-size-50) var(--dt-size-50) 0 hsl(var(--dt-color-neutral-black-h), var(--dt-color-neutral-black-s), var(--dt-color-neutral-black-l), 0.6);
  background-image: var(--dt-badge-color-background-ai);
}
.d-badge--outlined {
  box-shadow: 0 0 0 var(--dt-size-border-100) var(--badge-color-outline) inset;
}
.d-badge--decorate-black-400 {
  --badge-decorative-color: var(--dt-color-black-400);
}
.d-badge--decorate-black-500 {
  --badge-decorative-color: var(--dt-color-black-500);
}
.d-badge--decorate-black-900 {
  --badge-decorative-color: var(--dt-color-black-900);
}
.d-badge--decorate-red-200 {
  --badge-decorative-color: var(--dt-color-red-200);
}
.d-badge--decorate-red-300 {
  --badge-decorative-color: var(--dt-color-red-300);
}
.d-badge--decorate-red-400 {
  --badge-decorative-color: var(--dt-color-red-400);
}
.d-badge--decorate-purple-200 {
  --badge-decorative-color: var(--dt-color-purple-200);
}
.d-badge--decorate-purple-300 {
  --badge-decorative-color: var(--dt-color-purple-300);
}
.d-badge--decorate-purple-400 {
  --badge-decorative-color: var(--dt-color-purple-400);
}
.d-badge--decorate-purple-500 {
  --badge-decorative-color: var(--dt-color-purple-500);
}
.d-badge--decorate-blue-200 {
  --badge-decorative-color: var(--dt-color-blue-200);
}
.d-badge--decorate-blue-300 {
  --badge-decorative-color: var(--dt-color-blue-300);
}
.d-badge--decorate-blue-400 {
  --badge-decorative-color: var(--dt-color-blue-400);
}
.d-badge--decorate-green-300 {
  --badge-decorative-color: var(--dt-color-green-300);
}
.d-badge--decorate-green-400 {
  --badge-decorative-color: var(--dt-color-green-400);
}
.d-badge--decorate-green-500 {
  --badge-decorative-color: var(--dt-color-green-500);
}
.d-badge--decorate-gold-300 {
  --badge-decorative-color: var(--dt-color-gold-300);
}
.d-badge--decorate-gold-400 {
  --badge-decorative-color: var(--dt-color-gold-400);
}
.d-badge--decorate-gold-500 {
  --badge-decorative-color: var(--dt-color-gold-500);
}
.d-badge--decorate-magenta-200 {
  --badge-decorative-color: var(--dt-color-magenta-200);
}
.d-badge--decorate-magenta-300 {
  --badge-decorative-color: var(--dt-color-magenta-300);
}
.d-badge--decorate-magenta-400 {
  --badge-decorative-color: var(--dt-color-magenta-400);
}
.d-badge__decorative {
  display: inline-flex;
  width: var(--dt-size-400);
  height: var(--dt-size-400);
  background-color: var(--badge-decorative-color);
  border-radius: var(--dt-size-200);
  -webkit-margin-start: var(--dt-space-200);
          margin-inline-start: var(--dt-space-200);
}
.d-badge__label {
  display: flex;
  align-items: center;
  padding-inline: var(--badge-label-padding-x);
}
.d-badge__icon-left,
.d-badge__icon-right {
  display: flex;
}
.d-badge__icon-left {
  -webkit-padding-start: var(--dt-space-100);
          padding-inline-start: var(--dt-space-100);
}
.d-badge__icon-right {
  -webkit-padding-end: var(--dt-space-100);
          padding-inline-end: var(--dt-space-100);
}
.d-breadcrumbs {
  --breadcrumbs-font-size: var(--dt-font-size-200);
  --breadcrumbs-line-height: var(--dt-font-line-height-300);
  --breadcrumbs-color-separator: var(--dt-color-foreground-muted);
  --breadcrumbs-color-text: var(--dt-color-link-muted);
}
.d-breadcrumbs--inverted {
  --breadcrumbs-color-separator: var(--dt-color-foreground-muted-inverted);
  --breadcrumbs-color-text: var(--dt-color-link-muted-inverted);
}
.d-breadcrumbs > ol {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--breadcrumbs-font-size);
  line-height: var(--breadcrumbs-line-height);
  list-style: none;
}
.d-breadcrumbs__item {
  position: relative;
  margin: 0 0 0 var(--dt-space-400);
  padding: 0;
  list-style: none;
}
.d-breadcrumbs__item:not(:last-of-type) {
  margin-right: var(--dt-space-450);
}
.d-breadcrumbs__item:not(:last-of-type)::before {
  position: absolute;
  right: var(--dt-space-450-negative);
  margin-top: var(--dt-space-100-negative);
  color: var(--breadcrumbs-color-separator);
  content: '/';
}
.d-breadcrumbs__item .d-link {
  color: var(--breadcrumbs-color-text);
  text-decoration: none;
}
.d-breadcrumbs__item .d-link:hover {
  text-decoration: underline;
}
.d-breadcrumbs__item--selected {
  --breadcrumbs-color-text: var(--dt-color-foreground-primary);
  font-weight: var(--dt-font-weight-medium);
  cursor: default;
}
.d-breadcrumbs--inverted .d-breadcrumbs__item--selected {