@dialpad/dialtone-css 8.63.0-next.1 → 8.64.0

package/lib/build/less/utilities/sizing.less

@@ -23,69 +23,69 @@
 //  ============================================================================
 //  $$  PERCENTAGES
 //  ----------------------------------------------------------------------------
-.d-h10p { block-size: 10% !important; }
-.d-h20p { block-size: 20% !important; }
-.d-h25p { block-size: 25% !important; }
-.d-h30p { block-size: 30% !important; }
-.d-h40p { block-size: 40% !important; }
-.d-h50p { block-size: 50% !important; }
-.d-h60p { block-size: 60% !important; }
-.d-h70p { block-size: 70% !important; }
-.d-h75p { block-size: 75% !important; }
-.d-h80p { block-size: 80% !important; }
-.d-h90p { block-size: 90% !important; }
-.d-h100p { block-size: 100% !important; }
+.d-h10p { height: 10% !important; }
+.d-h20p { height: 20% !important; }
+.d-h25p { height: 25% !important; }
+.d-h30p { height: 30% !important; }
+.d-h40p { height: 40% !important; }
+.d-h50p { height: 50% !important; }
+.d-h60p { height: 60% !important; }
+.d-h70p { height: 70% !important; }
+.d-h75p { height: 75% !important; }
+.d-h80p { height: 80% !important; }
+.d-h90p { height: 90% !important; }
+.d-h100p { height: 100% !important; }
 
 //  $$  MAX-HEIGHT
 //  ----------------------------------------------------------------------------
-.d-hmx10p { max-block-size: 10% !important; }
-.d-hmx20p { max-block-size: 20% !important; }
-.d-hmx25p { max-block-size: 25% !important; }
-.d-hmx30p { max-block-size: 30% !important; }
-.d-hmx40p { max-block-size: 40% !important; }
-.d-hmx50p { max-block-size: 50% !important; }
-.d-hmx60p { max-block-size: 60% !important; }
-.d-hmx70p { max-block-size: 70% !important; }
-.d-hmx75p { max-block-size: 75% !important; }
-.d-hmx80p { max-block-size: 80% !important; }
-.d-hmx90p { max-block-size: 90% !important; }
-.d-hmx100p { max-block-size: 100% !important; }
+.d-hmx10p { max-height: 10% !important; }
+.d-hmx20p { max-height: 20% !important; }
+.d-hmx25p { max-height: 25% !important; }
+.d-hmx30p { max-height: 30% !important; }
+.d-hmx40p { max-height: 40% !important; }
+.d-hmx50p { max-height: 50% !important; }
+.d-hmx60p { max-height: 60% !important; }
+.d-hmx70p { max-height: 70% !important; }
+.d-hmx75p { max-height: 75% !important; }
+.d-hmx80p { max-height: 80% !important; }
+.d-hmx90p { max-height: 90% !important; }
+.d-hmx100p { max-height: 100% !important; }
 
 //  $$  MIN-HEIGHT
 //  ----------------------------------------------------------------------------
-.d-hmn10p { min-block-size: 10% !important; }
-.d-hmn20p { min-block-size: 20% !important; }
-.d-hmn25p { min-block-size: 25% !important; }
-.d-hmn30p { min-block-size: 30% !important; }
-.d-hmn40p { min-block-size: 40% !important; }
-.d-hmn50p { min-block-size: 50% !important; }
-.d-hmn60p { min-block-size: 60% !important; }
-.d-hmn70p { min-block-size: 70% !important; }
-.d-hmn75p { min-block-size: 75% !important; }
-.d-hmn80p { min-block-size: 80% !important; }
-.d-hmn90p { min-block-size: 90% !important; }
-.d-hmn100p { min-block-size: 100% !important; }
+.d-hmn10p { min-height: 10% !important; }
+.d-hmn20p { min-height: 20% !important; }
+.d-hmn25p { min-height: 25% !important; }
+.d-hmn30p { min-height: 30% !important; }
+.d-hmn40p { min-height: 40% !important; }
+.d-hmn50p { min-height: 50% !important; }
+.d-hmn60p { min-height: 60% !important; }
+.d-hmn70p { min-height: 70% !important; }
+.d-hmn75p { min-height: 75% !important; }
+.d-hmn80p { min-height: 80% !important; }
+.d-hmn90p { min-height: 90% !important; }
+.d-hmn100p { min-height: 100% !important; }
 
 //  $$  FIXED
 //  ----------------------------------------------------------------------------
-.d-h100vh { block-size: 100vh !important; }
-.d-h-auto { block-size: auto !important; }
-.d-h-unset { block-size: unset !important; }
-.d-h-fit-content { block-size: fit-content !important; }
-.d-h-max-content { block-size: max-content !important; }
-.d-h-min-content { block-size: min-content !important; }
+.d-h100vh { height: 100vh !important; }
+.d-h-auto { height: auto !important; }
+.d-h-unset { height: unset !important; }
+.d-h-fit-content { height: fit-content !important; }
+.d-h-max-content { height: max-content !important; }
+.d-h-min-content { height: min-content !important; }
 
-.d-hmn-auto { min-block-size: auto !important; }
-.d-hmn-unset { min-block-size: unset !important; }
-.d-hmn-fit-content { min-block-size: fit-content !important; }
-.d-hmn-max-content { min-block-size: max-content !important; }
-.d-hmn-min-content { min-block-size: min-content !important; }
+.d-hmn-auto { min-height: auto !important; }
+.d-hmn-unset { min-height: unset !important; }
+.d-hmn-fit-content { min-height: fit-content !important; }
+.d-hmn-max-content { min-height: max-content !important; }
+.d-hmn-min-content { min-height: min-content !important; }
 
-.d-hmx-auto { max-block-size: auto !important; }
-.d-hmx-unset { max-block-size: unset !important; }
-.d-hmx-fit-content { max-block-size: fit-content !important; }
-.d-hmx-max-content { max-block-size: max-content !important; }
-.d-hmx-min-content { max-block-size: min-content !important; }
+.d-hmx-auto { max-height: auto !important; }
+.d-hmx-unset { max-height: unset !important; }
+.d-hmx-fit-content { max-height: fit-content !important; }
+.d-hmx-max-content { max-height: max-content !important; }
+.d-hmx-min-content { max-height: min-content !important; }
 
 
 //  ============================================================================
@@ -93,78 +93,78 @@
 //  ============================================================================
 //  $$  FLUID
 //  ----------------------------------------------------------------------------
-.d-w10p { inline-size: 10% !important; }
-.d-w20p { inline-size: 20% !important; }
-.d-w25p { inline-size: 25% !important; }
-.d-w30p { inline-size: 30% !important; }
-.d-w40p { inline-size: 40% !important; }
-.d-w50p { inline-size: 50% !important; }
-.d-w60p { inline-size: 60% !important; }
-.d-w70p { inline-size: 70% !important; }
-.d-w75p { inline-size: 75% !important; }
-.d-w80p { inline-size: 80% !important; }
-.d-w90p { inline-size: 90% !important; }
-.d-w100p { inline-size: 100% !important; }
+.d-w10p { width: 10% !important; }
+.d-w20p { width: 20% !important; }
+.d-w25p { width: 25% !important; }
+.d-w30p { width: 30% !important; }
+.d-w40p { width: 40% !important; }
+.d-w50p { width: 50% !important; }
+.d-w60p { width: 60% !important; }
+.d-w70p { width: 70% !important; }
+.d-w75p { width: 75% !important; }
+.d-w80p { width: 80% !important; }
+.d-w90p { width: 90% !important; }
+.d-w100p { width: 100% !important; }
 
 //  $$  MAX-WIDTH
 //  ----------------------------------------------------------------------------
-.d-wmx10p { max-inline-size: 10% !important; }
-.d-wmx20p { max-inline-size: 20% !important; }
-.d-wmx25p { max-inline-size: 25% !important; }
-.d-wmx30p { max-inline-size: 30% !important; }
-.d-wmx40p { max-inline-size: 40% !important; }
-.d-wmx50p { max-inline-size: 50% !important; }
-.d-wmx60p { max-inline-size: 60% !important; }
-.d-wmx70p { max-inline-size: 70% !important; }
-.d-wmx75p { max-inline-size: 75% !important; }
-.d-wmx80p { max-inline-size: 80% !important; }
-.d-wmx90p { max-inline-size: 90% !important; }
-.d-wmx100p { max-inline-size: 100% !important; }
+.d-wmx10p { max-width: 10% !important; }
+.d-wmx20p { max-width: 20% !important; }
+.d-wmx25p { max-width: 25% !important; }
+.d-wmx30p { max-width: 30% !important; }
+.d-wmx40p { max-width: 40% !important; }
+.d-wmx50p { max-width: 50% !important; }
+.d-wmx60p { max-width: 60% !important; }
+.d-wmx70p { max-width: 70% !important; }
+.d-wmx75p { max-width: 75% !important; }
+.d-wmx80p { max-width: 80% !important; }
+.d-wmx90p { max-width: 90% !important; }
+.d-wmx100p { max-width: 100% !important; }
 
 //  $$  MIN-WIDTH
 //  ----------------------------------------------------------------------------
-.d-wmn10p { min-inline-size: 10% !important; }
-.d-wmn20p { min-inline-size: 20% !important; }
-.d-wmn25p { min-inline-size: 25% !important; }
-.d-wmn30p { min-inline-size: 30% !important; }
-.d-wmn40p { min-inline-size: 40% !important; }
-.d-wmn50p { min-inline-size: 50% !important; }
-.d-wmn60p { min-inline-size: 60% !important; }
-.d-wmn70p { min-inline-size: 70% !important; }
-.d-wmn75p { min-inline-size: 75% !important; }
-.d-wmn80p { min-inline-size: 80% !important; }
-.d-wmn90p { min-inline-size: 90% !important; }
-.d-wmn100p { min-inline-size: 100% !important; }
+.d-wmn10p { min-width: 10% !important; }
+.d-wmn20p { min-width: 20% !important; }
+.d-wmn25p { min-width: 25% !important; }
+.d-wmn30p { min-width: 30% !important; }
+.d-wmn40p { min-width: 40% !important; }
+.d-wmn50p { min-width: 50% !important; }
+.d-wmn60p { min-width: 60% !important; }
+.d-wmn70p { min-width: 70% !important; }
+.d-wmn75p { min-width: 75% !important; }
+.d-wmn80p { min-width: 80% !important; }
+.d-wmn90p { min-width: 90% !important; }
+.d-wmn100p { min-width: 100% !important; }
 
 //  $$  FIXED
 //  ----------------------------------------------------------------------------
-.d-w60ch { inline-size: 60ch !important; }
-.d-w75ch { inline-size: 75ch !important; }
-.d-w90ch { inline-size: 90ch !important; }
+.d-w60ch { width: 60ch !important; }
+.d-w75ch { width: 75ch !important; }
+.d-w90ch { width: 90ch !important; }
 
-.d-w100vw { inline-size: 100vw !important; }
-.d-w-auto { inline-size: auto !important; }
-.d-w-unset { inline-size: unset !important; }
-.d-w-fit-content { inline-size: fit-content !important; }
-.d-w-max-content { inline-size: max-content !important; }
-.d-w-min-content { inline-size: min-content !important; }
+.d-w100vw { width: 100vw !important; }
+.d-w-auto { width: auto !important; }
+.d-w-unset { width: unset !important; }
+.d-w-fit-content { width: fit-content !important; }
+.d-w-max-content { width: max-content !important; }
+.d-w-min-content { width: min-content !important; }
 
-.d-wmn60ch { min-inline-size: 60ch !important; }
-.d-wmn75ch { min-inline-size: 75ch !important; }
-.d-wmn90ch { min-inline-size: 90ch !important; }
-.d-wmn-fit-content { min-inline-size: fit-content !important; }
-.d-wmn-max-content { min-inline-size: max-content !important; }
-.d-wmn-min-content { min-inline-size: min-content !important; }
+.d-wmn60ch { min-width: 60ch !important; }
+.d-wmn75ch { min-width: 75ch !important; }
+.d-wmn90ch { min-width: 90ch !important; }
+.d-wmn-fit-content { min-width: fit-content !important; }
+.d-wmn-max-content { min-width: max-content !important; }
+.d-wmn-min-content { min-width: min-content !important; }
 
-.d-wmn-auto { min-inline-size: auto !important; }
-.d-wmn-unset { min-inline-size: unset !important; }
+.d-wmn-auto { min-width: auto !important; }
+.d-wmn-unset { min-width: unset !important; }
 
-.d-wmx60ch { max-inline-size: 60ch !important; }
-.d-wmx75ch { max-inline-size: 75ch !important; }
-.d-wmx90ch { max-inline-size: 90ch !important; }
+.d-wmx60ch { max-width: 60ch !important; }
+.d-wmx75ch { max-width: 75ch !important; }
+.d-wmx90ch { max-width: 90ch !important; }
 
-.d-wmx-auto { max-inline-size: auto !important; }
-.d-wmx-unset { max-inline-size: unset !important; }
-.d-wmx-fit-content { max-inline-size: fit-content !important; }
-.d-wmx-max-content { max-inline-size: max-content !important; }
-.d-wmx-min-content { max-inline-size: min-content !important; }
+.d-wmx-auto { max-width: auto !important; }
+.d-wmx-unset { max-width: unset !important; }
+.d-wmx-fit-content { max-width: fit-content !important; }
+.d-wmx-max-content { max-width: max-content !important; }
+.d-wmx-min-content { max-width: min-content !important; }

package/lib/build/less/utilities/spacing.less

@@ -23,48 +23,48 @@
 //  ============================================================================
 //  $$   VERTICALLY
 //  ----------------------------------------------------------------------------
-.d-stack0   { > * + * { margin-block-start: 0 !important; } }
-.d-stack1   { > * + * { margin-block-start: var(--dt-space-100) !important; } }
-.d-stack2   { > * + * { margin-block-start: var(--dt-space-200) !important; } }
-.d-stack4   { > * + * { margin-block-start: var(--dt-space-300) !important; } }
-.d-stack6   { > * + * { margin-block-start: var(--dt-space-350) !important; } }
-.d-stack8   { > * + * { margin-block-start: var(--dt-space-400) !important; } }
-.d-stack12  { > * + * { margin-block-start: var(--dt-space-450) !important; } }
-.d-stack16  { > * + * { margin-block-start: var(--dt-space-500) !important; } }
-.d-stack20  { > * + * { margin-block-start: var(--dt-space-525) !important; } }
-.d-stack24  { > * + * { margin-block-start: var(--dt-space-550) !important; } }
-.d-stack32  { > * + * { margin-block-start: var(--dt-space-600) !important; } }
-.d-stack48  { > * + * { margin-block-start: var(--dt-space-650) !important; } }
-.d-stack64  { > * + * { margin-block-start: var(--dt-space-700) !important; } }
-.d-stack72  { > * + * { margin-block-start: var(--dt-space-720) !important; } }
-.d-stack84  { > * + * { margin-block-start: var(--dt-space-730) !important; } }
-.d-stack96  { > * + * { margin-block-start: var(--dt-space-750) !important; } }
-.d-stack102 { > * + * { margin-block-start: var(--dt-space-760) !important; } }
-.d-stack114 { > * + * { margin-block-start: var(--dt-space-775) !important; } }
-.d-stack128 { > * + * { margin-block-start: var(--dt-space-800) !important; } }
+.d-stack0   { > * + * { margin-top: 0 !important; } }
+.d-stack1   { > * + * { margin-top: var(--dt-space-100) !important; } }
+.d-stack2   { > * + * { margin-top: var(--dt-space-200) !important; } }
+.d-stack4   { > * + * { margin-top: var(--dt-space-300) !important; } }
+.d-stack6   { > * + * { margin-top: var(--dt-space-350) !important; } }
+.d-stack8   { > * + * { margin-top: var(--dt-space-400) !important; } }
+.d-stack12  { > * + * { margin-top: var(--dt-space-450) !important; } }
+.d-stack16  { > * + * { margin-top: var(--dt-space-500) !important; } }
+.d-stack20  { > * + * { margin-top: var(--dt-space-525) !important; } }
+.d-stack24  { > * + * { margin-top: var(--dt-space-550) !important; } }
+.d-stack32  { > * + * { margin-top: var(--dt-space-600) !important; } }
+.d-stack48  { > * + * { margin-top: var(--dt-space-650) !important; } }
+.d-stack64  { > * + * { margin-top: var(--dt-space-700) !important; } }
+.d-stack72  { > * + * { margin-top: var(--dt-space-720) !important; } }
+.d-stack84  { > * + * { margin-top: var(--dt-space-730) !important; } }
+.d-stack96  { > * + * { margin-top: var(--dt-space-750) !important; } }
+.d-stack102 { > * + * { margin-top: var(--dt-space-760) !important; } }
+.d-stack114 { > * + * { margin-top: var(--dt-space-775) !important; } }
+.d-stack128 { > * + * { margin-top: var(--dt-space-800) !important; } }
 
 //  ============================================================================
 //  $$   HORIZONTALLY
 //  ----------------------------------------------------------------------------
-.d-flow0   { > * + * { margin-inline-start: 0 !important; } }
-.d-flow1   { > * + * { margin-inline-start: var(--dt-space-100) !important; } }
-.d-flow2   { > * + * { margin-inline-start: var(--dt-space-200) !important; } }
-.d-flow4   { > * + * { margin-inline-start: var(--dt-space-300) !important; } }
-.d-flow6   { > * + * { margin-inline-start: var(--dt-space-350) !important; } }
-.d-flow8   { > * + * { margin-inline-start: var(--dt-space-400) !important; } }
-.d-flow12  { > * + * { margin-inline-start: var(--dt-space-450) !important; } }
-.d-flow16  { > * + * { margin-inline-start: var(--dt-space-500) !important; } }
-.d-flow20  { > * + * { margin-inline-start: var(--dt-space-525) !important; } }
-.d-flow24  { > * + * { margin-inline-start: var(--dt-space-550) !important; } }
-.d-flow32  { > * + * { margin-inline-start: var(--dt-space-600) !important; } }
-.d-flow48  { > * + * { margin-inline-start: var(--dt-space-650) !important; } }
-.d-flow64  { > * + * { margin-inline-start: var(--dt-space-700) !important; } }
-.d-flow72  { > * + * { margin-inline-start: var(--dt-space-720) !important; } }
-.d-flow84  { > * + * { margin-inline-start: var(--dt-space-730) !important; } }
-.d-flow96  { > * + * { margin-inline-start: var(--dt-space-750) !important; } }
-.d-flow102 { > * + * { margin-inline-start: var(--dt-space-760) !important; } }
-.d-flow114 { > * + * { margin-inline-start: var(--dt-space-775) !important; } }
-.d-flow128 { > * + * { margin-inline-start: var(--dt-space-800) !important; } }
+.d-flow0   { > * + * { margin-left: 0 !important; } }
+.d-flow1   { > * + * { margin-left: var(--dt-space-100) !important; } }
+.d-flow2   { > * + * { margin-left: var(--dt-space-200) !important; } }
+.d-flow4   { > * + * { margin-left: var(--dt-space-300) !important; } }
+.d-flow6   { > * + * { margin-left: var(--dt-space-350) !important; } }
+.d-flow8   { > * + * { margin-left: var(--dt-space-400) !important; } }
+.d-flow12  { > * + * { margin-left: var(--dt-space-450) !important; } }
+.d-flow16  { > * + * { margin-left: var(--dt-space-500) !important; } }
+.d-flow20  { > * + * { margin-left: var(--dt-space-525) !important; } }
+.d-flow24  { > * + * { margin-left: var(--dt-space-550) !important; } }
+.d-flow32  { > * + * { margin-left: var(--dt-space-600) !important; } }
+.d-flow48  { > * + * { margin-left: var(--dt-space-650) !important; } }
+.d-flow64  { > * + * { margin-left: var(--dt-space-700) !important; } }
+.d-flow72  { > * + * { margin-left: var(--dt-space-720) !important; } }
+.d-flow84  { > * + * { margin-left: var(--dt-space-730) !important; } }
+.d-flow96  { > * + * { margin-left: var(--dt-space-750) !important; } }
+.d-flow102 { > * + * { margin-left: var(--dt-space-760) !important; } }
+.d-flow114 { > * + * { margin-left: var(--dt-space-775) !important; } }
+.d-flow128 { > * + * { margin-left: var(--dt-space-800) !important; } }
 
 //  ============================================================================
 //  $   MARGIN
@@ -72,34 +72,36 @@
 .d-m-auto { margin: auto !important; }
 .d-m-unset { margin: unset !important; }
 
-.d-mt-auto { margin-block-start: auto !important; }
-.d-mt-unset { margin-block-start: unset !important; }
+.d-mt-auto { margin-top: auto !important; }
+.d-mt-unset { margin-top: unset !important; }
 
-.d-mr-auto { margin-inline-end: auto !important; }
-.d-mr-unset { margin-inline-end: unset !important; }
+.d-mr-auto { margin-right: auto !important; }
+.d-mr-unset { margin-right: unset !important; }
 
-.d-mb-auto { margin-block-end: auto !important; }
-.d-mb-unset { margin-block-end: unset !important; }
+.d-mb-auto { margin-bottom: auto !important; }
+.d-mb-unset { margin-bottom: unset !important; }
 
-.d-ml-auto { margin-inline-start: auto !important; }
-.d-ml-unset { margin-inline-start: unset !important; }
+.d-ml-auto { margin-left: auto !important; }
+.d-ml-unset { margin-left: unset !important; }
 
 .d-mx-auto {
-  margin-inline: auto auto !important;
+  margin-right: auto !important;
+  margin-left: auto !important;
 }
 
 .d-mx-unset {
-  margin-inline-end: unset !important;
-  margin-inline-start: unset !important;
+  margin-right: unset !important;
+  margin-left: unset !important;
 }
 
 .d-my-auto {
-  margin-block: auto auto !important;
+  margin-top: auto !important;
+  margin-bottom: auto !important;
  }
 
 .d-my-unset {
-  margin-block-start: unset !important;
-  margin-block-end: unset !important;
+  margin-top: unset !important;
+  margin-bottom: unset !important;
 }
 
 
@@ -108,22 +110,22 @@
 //  ----------------------------------------------------------------------------
 .d-p-unset { padding: unset !important; }
 
-.d-pt-unset { padding-block-start: unset !important; }
+.d-pt-unset { padding-top: unset !important; }
 
-.d-pr-unset { padding-inline-end: unset !important; }
+.d-pr-unset { padding-right: unset !important; }
 
-.d-pb-unset { padding-block-end: unset !important; }
+.d-pb-unset { padding-bottom: unset !important; }
 
-.d-pl-unset { padding-inline-start: unset !important; }
+.d-pl-unset { padding-left: unset !important; }
 
 .d-px-unset {
-  padding-inline-end: unset !important;
-  padding-inline-start: unset !important;
+  padding-right: unset !important;
+  padding-left: unset !important;
 }
 
 .d-py-unset {
-  padding-block-start: unset !important;
-  padding-block-end: unset !important;
+  padding-top: unset !important;
+  padding-bottom: unset !important;
 }
 
 //  ============================================================================

package/lib/build/less/utilities/typography.less

@@ -45,7 +45,8 @@ h6,
 p,
 ol,
 ul {
-    margin-block: 0 0;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
 //  ============================================================================
@@ -337,8 +338,8 @@ ul {
 //  ============================================================================
 //  $$  TEXT ALIGN
 //  ----------------------------------------------------------------------------
-.d-ta-left { text-align: start !important; }
-.d-ta-right { text-align: end !important; }
+.d-ta-left { text-align: left !important; }
+.d-ta-right { text-align: right !important; }
 .d-ta-center { text-align: center !important; }
 .d-ta-justify { text-align: justify !important; }
 .d-ta-unset { text-align: unset !important; }

package/lib/build/less/variables/sizes.less

@@ -17,8 +17,8 @@
     --input-typography: var(--dt-typography-inputs-xs);
 
     .d-btn__icon {
-        inline-size: var(--dt-icon-size-100);
-        block-size: var(--dt-icon-size-100);
+        width: var(--dt-icon-size-100);
+        height: var(--dt-icon-size-100);
     }
 }
 
@@ -31,8 +31,8 @@
     --input-border-radius: var(--dt-inputs-size-radius-sm);
 
     .d-btn__icon {
-        inline-size: var(--dt-icon-size-200);
-        block-size: var(--dt-icon-size-200);
+        width: var(--dt-icon-size-200);
+        height: var(--dt-icon-size-200);
     }
 }
 
@@ -45,8 +45,8 @@
     --input-typography: var(--dt-typography-inputs-lg);
 
     .d-btn__icon {
-        inline-size: var(--dt-icon-size-400);
-        block-size: var(--dt-icon-size-400);
+        width: var(--dt-icon-size-400);
+        height: var(--dt-icon-size-400);
     }
 }
 
@@ -59,7 +59,7 @@
     --input-typography: var(--dt-typography-inputs-xl);
 
     .d-btn__icon {
-        inline-size: var(--dt-icon-size-500);
-        block-size: var(--dt-icon-size-500);
+        width: var(--dt-icon-size-500);
+        height: var(--dt-icon-size-500);
     }
 }