@dialpad/dialtone-css
Version:
Dialpad's design system
1,717 lines • 2.07 MB
CSS
/* 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;
display: flex;
flex-direction: var(--stack-direction);
gap: var(--stack-gap);
justify-content: flex-start;
}
.d-stack--column-reverse {
--stack-direction: column-reverse;
justify-content: flex-start;
}
.d-stack--row {
--stack-direction: row;
align-items: center;
justify-content: normal;
}
.d-stack--row-reverse {
--stack-direction: row-reverse;
align-items: center;
justify-content: normal;
}
.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;
justify-content: flex-start;
}
.d-stack--sm-column-reverse {
--stack-direction: column-reverse;
justify-content: flex-start;
}
.d-stack--sm-row {
--stack-direction: row;
align-items: center;
justify-content: normal;
}
.d-stack--sm-row-reverse {
--stack-direction: row-reverse;
align-items: center;
justify-content: normal;
}
.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);
}
}
@media screen and (min-width: 640px) {
.d-stack--md-column {
--stack-direction: column;
justify-content: flex-start;
}
.d-stack--md-column-reverse {
--stack-direction: column-reverse;
justify-content: flex-start;
}
.d-stack--md-row {
--stack-direction: row;
align-items: center;
justify-content: normal;
}
.d-stack--md-row-reverse {
--stack-direction: row-reverse;
align-items: center;
justify-content: normal;
}
.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);
}
}
@media screen and (min-width: 980px) {
.d-stack--lg-column {
--stack-direction: column;
justify-content: flex-start;
}
.d-stack--lg-column-reverse {
--stack-direction: column-reverse;
justify-content: flex-start;
}
.d-stack--lg-row {
--stack-direction: row;
align-items: center;
justify-content: normal;
}
.d-stack--lg-row-reverse {
--stack-direction: row-reverse;
align-items: center;
justify-content: normal;
}
.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);
}
}
@media screen and (min-width: 1264px) {
.d-stack--xl-column {
--stack-direction: column;
justify-content: flex-start;
}
.d-stack--xl-column-reverse {
--stack-direction: column-reverse;
justify-content: flex-start;
}
.d-stack--xl-row {
--stack-direction: row;
align-items: center;
justify-content: normal;
}
.d-stack--xl-row-reverse {
--stack-direction: row-reverse;
align-items: center;
justify-content: normal;
}
.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-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-theme-sidebar-color-background);
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;
width: var(--avatar-size-shape);
height: var(--avatar-size-shape);
overflow: hidden;
background-color: var(--avatar-color-background);
border-radius: var(--dt-size-radius-pill);
}
.d-avatar__image {
width: var(--avatar-size-image);
height: var(--avatar-size-image);
-o-object-fit: cover;
object-fit: cover;
border-radius: var(--dt-size-radius-pill);
}
.d-avatar--image-loaded {
background-color: 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);
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);
}
.d-recipe-leftbar-row--selected .d-avatar__count,
.d-recipe-leftbar-row__primary:hover .d-avatar__count {
--avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
}
.d-avatar--clickable {
--avatar-color-border: transparent;
padding: 0;
background-color: 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;
width: var(--dt-size-100-percent);
height: 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 {
width: var(--dt-size-100-percent);
color: var(--dt-color-foreground-primary-inverted);
}
.d-avatar__overlay-text {
width: 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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.d-avatar--group {
--avatar-size-shape: calc(var(--dt-size-300) * 4.5);
width: var(--dt-size-550);
height: var(--dt-size-550);
}
.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 {
--breadcrumbs-color-text: var(--dt-color-foreground-primary-inverted);
}
.d-btn,
.d-btn--md {
--button-color-text: var(--dt-action-color-foreground-base-default);
--button-color-background: var(--dt-action-color-background-base-default);
--button-color-border: transparent;
--button-gap: calc(var(--button-padding-x) / 2);
--button-border-radius: var(--dt-button-size-radius-md);
--button-border-width: var(--dt-size-border-100);
--button-typography: var(--dt-typography-button-md);
--button-padding-y-xs: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--button-border-width));
--button-padding-x-xs: calc(var(--dt-space-400) - var(--button-border-width));
--button-padding-y-sm: calc(var(--dt-space-400) - var(--button-border-width));
--button-padding-x-sm: calc(var(--dt-space-450) - var(--button-border-width));
--button-padding-y-md: calc(var(--dt-space-400) - var(--button-border-width));
--button-padding-x-md: calc(var(--dt-space-450) - var(--button-border-width));
--button-padding-y-lg: calc((var(--dt-space-400) + var(--dt-space-200)) - var(--button-border-width));
--button-padding-x-lg: calc(var(--dt-space-500) - var(--button-border-width));
--button-padding-y-xl: calc(var(--dt-space-450) - var(--button-border-width));
--button-padding-x-xl: calc(var(--dt-space-500) - var(--button-border-width));
--button-padding-y: var(--button-padding-y-md);
--button-padding-x: var(--button-padding-x-md);
position: relative;
display: inline-flex;
gap: var(--button-gap);
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: var(--button-padding-y) var(--button-padding-x);
color: var(--button-color-text);
font: var(--button-typography);
text-transform: inherit;
text-decoration: none;
vertical-align: middle;
background-color: var(--button-color-background);
border-color: var(--button-color-border);
border-style: solid;
border-width: var(--button-border-width);
border-radius: var(--button-border-radius);
cursor: pointer;
transition-timing-function: var(--ttf-out-quint);
transition-duration: var(--td100);
transition-property: background-color, border, box-shadow;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
fill: currentColor;
}
.d-btn:hover:not([disabled]),
.d-btn--md:hover:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-base-hover);
--button-color-background: var(--dt-action-color-background-base-hover);
}
.d-btn:active:not([disabled]),
.d-btn--md:active:not([disabled]),
.d-btn.d-btn--active:not([disabled]),
.d-btn--md.d-btn--active:not([disabled]),
.d-btn.d-btn--active:active:not([disabled]),
.d-btn--md.d-btn--active:active:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-base-active);
--button-color-background: var(--dt-action-color-background-base-active);
}
.d-btn:focus-visible,
.d-btn--md:focus-visible {
outline: none;
box-shadow: var(--dt-shadow-focus);
}
.d-btn[disabled],
.d-btn--md[disabled] {
--button-color-border: transparent !important;
--button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
--button-color-background: var(--dt-action-color-background-disabled-default) !important;
cursor: not-allowed;
transition: none;
}
.d-btn--unstyled {
/* stylelint-disable */
all: unset;
/* stylelint-enable */
display: inline-flex;
align-content: center;
align-items: center;
color: inherit;
font: inherit;
cursor: pointer;
}
.d-btn--unstyled:focus-visible {
outline: none;
box-shadow: var(--dt-shadow-focus);
}
.d-btn--xs {
--button-typography: var(--dt-typography-button-xs);
--button-padding-y: var(--button-padding-y-xs);
--button-padding-x: var(--button-padding-x-xs);
--button-border-radius: var(--dt-button-size-radius-xs);
}
.d-btn--sm {
--button-typography: var(--dt-typography-button-sm);
--button-padding-y: var(--button-padding-y-sm);
--button-padding-x: var(--button-padding-x-sm);
--button-border-radius: var(--dt-button-size-radius-sm);
}
.d-btn--lg {
--button-typography: var(--dt-typography-button-lg);
--button-padding-y: var(--button-padding-y-lg);
--button-padding-x: var(--button-padding-x-lg);
--button-border-radius: var(--dt-button-size-radius-lg);
}
.d-btn--xl {
--button-typography: var(--dt-typography-button-xl);
--button-padding-y: var(--button-padding-y-xl);
--button-padding-x: var(--button-padding-x-xl);
--button-border-radius: var(--dt-button-size-radius-xl);
}
.d-btn__label {
display: inline-flex;
flex: 1 auto;
align-items: center;
justify-content: center;
}
.d-btn--vertical {
flex-direction: column;
}
.d-btn__icon {
display: flex;
}
.d-btn__icon--left,
.d-btn__icon--top {
order: -1;
}
.d-btn__icon--right,
.d-btn__icon--bottom {
order: 1;
}
.d-btn__icon--left:not(:only-child) {
margin-left: var(--dt-space-200-negative);
}
.d-btn__icon--right:not(:only-child) {
margin-right: var(--dt-space-200-negative);
}
.d-btn--circle {
--button-padding-x: var(--button-padding-y-md);
--button-padding-y: var(--button-padding-y-md);
--button-color-text: var(--dt-action-color-foreground-muted-default);
--button-border-radius: var(--dt-size-radius-circle);
}
.d-btn--circle:hover:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-muted-hover);
--button-color-background: var(--dt-action-color-background-muted-hover);
}
.d-btn--circle:active:not([disabled]),
.d-btn--circle.d-btn--active:not([disabled]),
.d-btn--circle.d-btn--active:active:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-muted-active);
--button-color-background: var(--dt-action-color-background-muted-active);
}
.d-btn--circle .d-btn__icon {
margin: unset;
}
.d-btn--circle.d-btn__label {
display: none;
}
.d-btn--circle.d-btn--outlined {
--button-color-border: var(--dt-action-color-border-muted-outlined-default);
}
.d-btn--circle.d-btn--xs {
--button-padding-y: var(--button-padding-y-xs);
--button-padding-x: var(--button-padding-y-xs);
}
.d-btn--circle.d-btn--sm {
--button-padding-y: var(--button-padding-y-sm);
--button-padding-x: var(--button-padding-y-sm);
}
.d-btn--circle.d-btn--md {
--button-padding-x: var(--button-padding-y-md);
--button-padding-y: var(--button-padding-y-md);
}
.d-btn--circle.d-btn--lg {
--button-padding-x: calc(var(--button-padding-y-lg) + var(--dt-space-100));
--button-padding-y: calc(var(--button-padding-y-lg) + var(--dt-space-100));
}
.d-btn--circle.d-btn--xl {
--button-padding-x: calc(var(--button-padding-y-xl) + var(--dt-space-300));
--button-padding-y: calc(var(--button-padding-y-xl) + var(--dt-space-300));
}
.d-btn--outlined {
--button-color-border: var(--dt-action-color-border-base-outlined-default);
}
.d-btn--primary {
--button-color-text: var(--dt-action-color-foreground-base-primary-default);
--button-color-background: var(--dt-action-color-background-base-primary-default);
}
.d-btn--primary:hover:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-base-primary-default);
--button-color-background: var(--dt-action-color-background-base-primary-hover);
}
.d-btn--primary:active:not([disabled]),
.d-btn--primary.d-btn--active:not([disabled]),
.d-btn--primary.d-btn--active:active:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-base-primary-default);
--button-color-background: var(--dt-action-color-background-base-primary-active);
}
.d-btn--muted {
--button-color-text: var(--dt-action-color-foreground-muted-default);
}
.d-btn--muted:hover:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-muted-hover);
--button-color-background: var(--dt-action-color-background-muted-hover);
}
.d-btn--muted:active:not([disabled]),
.d-btn--muted.d-btn--active:not([disabled]),
.d-btn--muted.d-btn--active:active:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-muted-active);
--button-color-background: var(--dt-action-color-background-muted-active);
}
.d-btn--muted.d-btn--outlined {
--button-color-border: var(--dt-action-color-border-muted-outlined-default);
}
.d-btn--danger {
--button-color-text: var(--dt-action-color-foreground-critical-default);
--button-color-background: var(--dt-action-color-background-critical-default);
}
.d-btn--danger:hover:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-critical-hover);
--button-color-background: var(--dt-action-color-background-critical-hover);
}
.d-btn--danger:active:not([disabled]),
.d-btn--danger.d-btn--active:not([disabled]),
.d-btn--danger.d-btn--active:active:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-critical-active);
--button-color-background: var(--dt-action-color-background-critical-active);
}
.d-btn--danger.d-btn--outlined {
--button-color-border: var(--dt-action-color-border-critical-outlined-default);
}
.d-btn--danger.d-btn--primary {
--button-color-text: var(--dt-action-color-foreground-critical-primary-default);
--button-color-background: var(--dt-action-color-background-critical-primary-default);
}
.d-btn--danger.d-btn--primary:hover:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-critical-primary-default);
--button-color-background: var(--dt-action-color-background-critical-primary-hover);
}
.d-btn--danger.d-btn--primary:active:not([disabled]),
.d-btn--danger.d-btn--primary.d-btn--active:not([disabled]),
.d-btn--danger.d-btn--primary.d-btn--active:active:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-critical-primary-default);
--button-color-background: var(--dt-action-color-background-critical-primary-active);
}
.d-btn--positive {
--button-color-text: var(--dt-action-color-foreground-positive-default);
--button-color-background: var(--dt-action-color-background-positive-default);
}
.d-btn--positive:hover:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-positive-hover);
--button-color-background: var(--dt-action-color-background-positive-hover);
}
.d-btn--positive:active:not([disabled]),
.d-btn--positive.d-btn--active:not([disabled]),
.d-btn--positive.d-btn--active:active:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-positive-active);
--button-color-background: var(--dt-action-color-background-positive-active);
}
.d-btn--positive.d-btn--outlined {
--button-color-border: var(--dt-action-color-border-positive-outlined-default);
}
.d-btn--positive.d-btn--primary {
--button-color-text: var(--dt-action-color-foreground-positive-primary-default);
--button-color-background: var(--dt-action-color-background-positive-primary-default);
}
.d-btn--positive.d-btn--primary:hover:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-positive-primary-default);
--button-color-background: var(--dt-action-color-background-positive-primary-hover);
}
.d-btn--positive.d-btn--primary:active:not([disabled]),
.d-btn--positive.d-btn--primary.d-btn--active:not([disabled]),
.d-btn--positive.d-btn--primary.d-btn--active:active:not([disabled]) {
--button-color-text: var(--dt-action-color-foreground-positive-primary-default);
--button-color-background: var(--dt-action-color-background-positi