@taiga-ui/styles 4.71.1 → 5.0.0-canary.2da416d

package/theme/appearance/textfield.less

@@ -0,0 +1,80 @@
+@import '../../utils.less';
+
+[tuiAppearance][data-appearance='textfield'] {
+    .transition(~'box-shadow, background-color, outline-color, border-color, color');
+
+    --t-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
+
+    background-color: var(--tui-background-base);
+    color: var(--tui-text-tertiary);
+    box-shadow: var(--t-shadow);
+    outline: 1px solid var(--tui-border-normal);
+    outline-offset: -1px;
+    border-width: 0;
+
+    &:is(input, textarea, select) {
+        color: var(--tui-text-primary) !important;
+    }
+
+    &::before,
+    &::after {
+        transition-property: transform;
+    }
+
+    &:not([data-mode~='readonly']) {
+        .appearance-hover({
+            --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
+            color: var(--tui-text-secondary);
+        });
+    }
+
+    .appearance-focus({
+        box-shadow: none;
+        outline: 0.125rem solid var(--tui-background-accent-1);
+        outline-offset: -0.125rem;
+    });
+
+    .appearance-disabled({
+        box-shadow: none;
+    });
+
+    .appearance-invalid({
+        outline-color: var(--tui-status-negative);
+    });
+
+    &[data-mode~='readonly'],
+    &[data-state='disabled'],
+    &:disabled,
+    &._disabled {
+        background: transparent !important;
+        box-shadow: none !important;
+        outline-color: var(--tui-border-normal) !important;
+    }
+
+    [tuiInput][chrome-autofilled], /* Chrome on IOS */
+    [tuiInput]:-webkit-autofill {
+        -webkit-text-fill-color: var(--tui-text-primary) !important;
+        caret-color: var(--tui-text-primary) !important;
+        box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important;
+        transition: background-color 600000s 0s;
+        clip-path: inset(0.125rem round calc(var(--tui-radius-m) - 0.125rem));
+    }
+
+    &[data-size='l'] [tuiInput][chrome-autofilled], /* Chrome on IOS */
+    &[data-size='l'] [tuiInput]:-webkit-autofill {
+        clip-path: inset(0.125rem round calc(var(--tui-radius-l) - 0.125rem));
+    }
+}
+
+[tuiTheme='dark'] [tuiAppearance][data-appearance='textfield'],
+[tuiTheme='dark'][tuiAppearance][data-appearance='textfield'] {
+    background-color: var(--tui-background-neutral-1);
+
+    .appearance-hover({
+        background-color: var(--tui-background-neutral-1-hover);
+    });
+
+    .appearance-focus({
+        background-color: transparent !important;
+    });
+}

package/theme/appearance.less

@@ -0,0 +1,12 @@
+@import 'appearance/accent.less';
+@import 'appearance/action.less';
+@import 'appearance/flat.less';
+@import 'appearance/floating.less';
+@import 'appearance/glass.less';
+@import 'appearance/outline.less';
+@import 'appearance/primary.less';
+@import 'appearance/secondary.less';
+@import 'appearance/status.less';
+@import 'appearance/table.less';
+// Do not add it, we need it separately in proprietary theme
+// @import 'appearance/textfield.less';

package/theme/palette.less

@@ -0,0 +1,161 @@
+.dark() {
+    // Backgrounds
+    --tui-background-base: #222;
+    --tui-background-base-alt: #333;
+    --tui-background-neutral-1: rgba(255, 255, 255, 0.08);
+    --tui-background-neutral-1-hover: rgba(255, 255, 255, 0.16);
+    --tui-background-neutral-1-pressed: rgba(255, 255, 255, 0.24);
+    --tui-background-neutral-2: rgba(255, 255, 255, 0.24);
+    --tui-background-neutral-2-hover: rgba(255, 255, 255, 0.32);
+    --tui-background-neutral-2-pressed: rgba(255, 255, 255, 0.4);
+    --tui-background-accent-opposite: #fff;
+    --tui-background-accent-opposite-hover: #f6f6f6;
+    --tui-background-accent-opposite-pressed: #ededed;
+    --tui-background-elevation-1: #292929;
+    --tui-background-elevation-2: #2f2f2f;
+    --tui-background-elevation-3: #373737;
+    // Other
+    --tui-service-autofill-background: rgb(85, 74, 42);
+    --tui-border-normal: rgba(255, 255, 255, 0.14);
+    --tui-border-hover: rgba(255, 255, 255, 0.6);
+    --tui-border-focus: rgba(255, 255, 255, 0.64);
+    // Statuses
+    --tui-status-negative: rgba(255, 140, 103, 1);
+    --tui-status-negative-pale: rgba(244, 87, 37, 0.32);
+    --tui-status-negative-pale-hover: rgba(244, 87, 37, 0.4);
+    --tui-status-positive: rgb(74, 201, 155);
+    --tui-status-positive-pale: rgba(74, 201, 155, 0.32);
+    --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.4);
+    --tui-status-warning: rgb(255, 199, 0);
+    --tui-status-warning-pale: rgba(255, 199, 0, 0.32);
+    --tui-status-warning-pale-hover: rgba(255, 199, 0, 0.4);
+    --tui-status-info: rgb(112, 182, 246);
+    --tui-status-info-pale: rgba(112, 182, 246, 0.32);
+    --tui-status-info-pale-hover: rgba(112, 182, 246, 0.4);
+    --tui-status-neutral: rgb(149, 155, 164);
+    // Text
+    --tui-text-primary: rgba(255, 255, 255, 1);
+    --tui-text-secondary: rgba(255, 255, 255, 0.72);
+    --tui-text-tertiary: rgba(255, 255, 255, 0.6);
+    --tui-text-action: #6788ff;
+    --tui-text-action-hover: #526ed3;
+    --tui-text-positive: #44c596;
+    --tui-text-positive-hover: #3aa981;
+    --tui-text-negative: #ff8c67;
+    --tui-text-negative-hover: #bb593a;
+}
+
+.light() {
+    // Backgrounds
+    --tui-background-base: #fff;
+    --tui-background-base-alt: #f6f6f6;
+    --tui-background-neutral-1: rgba(0, 0, 0, 0.04);
+    --tui-background-neutral-1-hover: rgba(0, 0, 0, 0.08);
+    --tui-background-neutral-1-pressed: rgba(0, 0, 0, 0.12);
+    --tui-background-neutral-2: rgba(0, 0, 0, 0.08);
+    --tui-background-neutral-2-hover: rgba(0, 0, 0, 0.1);
+    --tui-background-neutral-2-pressed: rgba(0, 0, 0, 0.14);
+    --tui-background-accent-1: #526ed3;
+    --tui-background-accent-1-hover: #6c86e2;
+    --tui-background-accent-1-pressed: #314692;
+    --tui-background-accent-2: #ff7043;
+    --tui-background-accent-2-hover: #ff9a94;
+    --tui-background-accent-2-pressed: #e7716a;
+    --tui-background-accent-opposite: #000;
+    --tui-background-accent-opposite-hover: #333;
+    --tui-background-accent-opposite-pressed: #808080;
+    --tui-background-elevation-1: #fff;
+    --tui-background-elevation-2: #fff;
+    --tui-background-elevation-3: #fff;
+    // Other
+    --tui-service-autofill-background: #fff5c0;
+    --tui-service-selection-background: rgba(112, 182, 246, 0.12);
+    --tui-service-backdrop: rgba(0, 0, 0, 0.75);
+    --tui-border-normal: rgba(0, 0, 0, 0.1);
+    --tui-border-hover: rgba(0, 0, 0, 0.16);
+    --tui-border-focus: rgba(51, 51, 51, 0.64);
+    // Statuses
+    --tui-status-negative: rgba(244, 87, 37, 1);
+    --tui-status-negative-pale: rgba(244, 87, 37, 0.12);
+    --tui-status-negative-pale-hover: rgba(244, 87, 37, 0.24);
+    --tui-status-positive: rgba(74, 201, 155, 1);
+    --tui-status-positive-pale: rgba(74, 201, 155, 0.12);
+    --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
+    --tui-status-warning: rgba(255, 199, 0, 1);
+    --tui-status-warning-pale: rgba(255, 199, 0, 0.12);
+    --tui-status-warning-pale-hover: rgba(255, 199, 0, 0.24);
+    --tui-status-info: rgba(112, 182, 246, 1);
+    --tui-status-info-pale: rgba(112, 182, 246, 0.12);
+    --tui-status-info-pale-hover: rgba(112, 182, 246, 0.24);
+    --tui-status-neutral: rgb(121, 129, 140);
+    // Text
+    --tui-text-primary: rgba(27, 31, 59, 1);
+    --tui-text-secondary: rgba(27, 31, 59, 0.65);
+    --tui-text-tertiary: rgba(27, 31, 59, 0.4);
+    --tui-text-primary-on-accent-1: #fff;
+    --tui-text-primary-on-accent-2: #fff;
+    --tui-text-action: #4c66c3;
+    --tui-text-action-hover: #6c86e2;
+    --tui-text-positive: #3aa981;
+    --tui-text-positive-hover: #7ac5aa;
+    --tui-text-negative: #dd4c1e;
+    --tui-text-negative-hover: #e38163;
+    // Charts
+    --tui-chart-categorical-00: var(--tui-background-accent-1);
+    --tui-chart-categorical-01: #ea97c4;
+    --tui-chart-categorical-02: #a0c5df;
+    --tui-chart-categorical-03: #fee797;
+    --tui-chart-categorical-04: #b0b0b0;
+    --tui-chart-categorical-05: #e29398;
+    --tui-chart-categorical-06: #b8474e;
+    --tui-chart-categorical-07: #fcc068;
+    --tui-chart-categorical-08: #ff8a00;
+    --tui-chart-categorical-09: #dab3f9;
+    --tui-chart-categorical-10: #7b439e;
+    --tui-chart-categorical-11: #8dda71;
+    --tui-chart-categorical-12: #fcbb14;
+    --tui-chart-categorical-13: #a8cef1;
+    --tui-chart-categorical-14: #bd65a4;
+    --tui-chart-categorical-15: #7fd7cc;
+    --tui-chart-categorical-16: #2fad96;
+    --tui-chart-categorical-17: #d4aca2;
+    --tui-chart-categorical-18: #9d6f64;
+    --tui-chart-categorical-19: #d2e9a2;
+    --tui-chart-categorical-20: #aadc42;
+    --tui-chart-categorical-21: #3682db;
+    --tui-chart-categorical-22: #34b41f;
+    // Shadows
+    --tui-shadow-small: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
+    --tui-shadow-small-hover: 0 1rem 2.5rem rgba(0, 0, 0, 0.14);
+    --tui-shadow-medium: 0 0.375rem 2rem rgba(0, 0, 0, 0.12);
+    --tui-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18);
+    --tui-shadow-popup: 0 1.25rem 3rem rgba(0, 0, 0, 0.2);
+}
+
+@media screen {
+    [tuiTheme='dark'] {
+        color-scheme: dark;
+
+        .dark();
+    }
+
+    [tuiTheme='light'] {
+        color-scheme: light;
+    }
+
+    &:root,
+    :host,
+    [tuiTheme='light'] {
+        .light();
+    }
+}
+
+@media print {
+    &:root,
+    :host,
+    [tuiTheme] {
+        color-scheme: light;
+
+        .light();
+    }
+}

package/theme/variables.less

@@ -0,0 +1,71 @@
+@import (inline, once) '@taiga-ui/design-tokens/palette/animation.css';
+@import (inline, once) '@taiga-ui/design-tokens/palette/shadow.css';
+
+&:root,
+&:host {
+    // Fonts
+    --tui-typography-family-text: 'Manrope', system-ui, sans-serif;
+    --tui-typography-family-display: 'Manrope', system-ui, sans-serif;
+    --tui-font-offset: ~'0rem';
+    // Heading
+    --tui-typography-heading-h1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(50 / 56)
+        var(--tui-typography-family-display);
+    --tui-typography-heading-h2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44)
+        var(--tui-typography-family-display);
+    --tui-typography-heading-h3: bold calc(var(--tui-font-offset) + 2.25rem) / calc(40 / 36)
+        var(--tui-typography-family-display);
+    --tui-typography-heading-h4: bold calc(var(--tui-font-offset) + 1.75rem) / calc(32 / 28)
+        var(--tui-typography-family-display);
+    --tui-typography-heading-h5: bold calc(var(--tui-font-offset) + 1.5rem) / calc(28 / 24)
+        var(--tui-typography-family-display);
+    --tui-typography-heading-h6: bold calc(var(--tui-font-offset) + 1.25rem) / calc(24 / 20)
+        var(--tui-typography-family-display);
+    // Body
+    --tui-typography-body-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(28 / 17)
+        var(--tui-typography-family-text);
+    --tui-typography-body-m: normal calc(var(--tui-font-offset) + 1rem) / calc(24 / 16)
+        var(--tui-typography-family-text);
+    --tui-typography-body-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(20 / 14)
+        var(--tui-typography-family-text);
+    --tui-typography-body-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(16 / 11)
+        var(--tui-typography-family-text);
+    // Reduced
+    --tui-typography-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(24 / 17)
+        var(--tui-typography-family-text);
+    --tui-typography-ui-m: normal calc(var(--tui-font-offset) + 1rem) / calc(20 / 16) var(--tui-typography-family-text);
+    --tui-typography-ui-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(16 / 14)
+        var(--tui-typography-family-text);
+    --tui-typography-ui-xs: normal calc(var(--tui-font-offset) + 0.75rem) / calc(15 / 12)
+        var(--tui-typography-family-text);
+    --tui-typography-ui-2xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(12 / 11)
+        var(--tui-typography-family-text);
+    // Radii
+    --tui-radius-xs: 0.25rem;
+    --tui-radius-s: 0.5rem;
+    --tui-radius-m: 0.625rem;
+    --tui-radius-l: 0.75rem;
+    --tui-radius-xl: 1.5rem;
+    // Sizes
+    --tui-height-xs: 1.5rem;
+    --tui-height-s: 2rem;
+    --tui-height-m: 2.75rem;
+    --tui-height-l: 3.5rem;
+    // Input padding
+    --tui-padding-s: 0.625rem;
+    --tui-padding-m: 0.75rem;
+    --tui-padding-l: 1rem;
+    // Misc
+    --tui-stroke-width: 0.125rem;
+    --tui-duration: 0.3s;
+    --tui-disabled-opacity: 0.56;
+    // logical
+    --tui-inline-start: left;
+    --tui-inline-end: right;
+    --tui-inline: 1;
+}
+
+[dir='rtl'] {
+    --tui-inline-start: right;
+    --tui-inline-end: left;
+    --tui-inline: -1;
+}

package/utils.less

@@ -0,0 +1,6 @@
+@import 'mixins/browsers.less';
+@import 'mixins/date-picker.less';
+@import 'mixins/miscellaneous.less';
+@import 'mixins/slider.less';
+@import 'mixins/appearance.less';
+@import 'variables/media.less';

package/utils.scss

@@ -0,0 +1,6 @@
+@import 'mixins/browsers';
+@import 'mixins/date-picker';
+@import 'mixins/miscellaneous';
+@import 'mixins/slider';
+@import 'mixins/appearance';
+@import 'variables/media';

package/variables/media.less

@@ -0,0 +1,23 @@
+@tui-media-retina: ~'(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
+@tui-media-retina-mobile: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 599.4px), (min-resolution: 192dpi) and (max-width: 599.4px)';
+@tui-media-retina-tablet: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 1023.4px), (min-resolution: 192dpi) and (max-width: 1023.4px)';
+@tui-media-retina-desktop: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 1359.4px), (min-resolution: 192dpi) and (max-width: 1359.4px)';
+
+@tui-mobile: ~'screen and (max-width: 767.4px)';
+@tui-mobile-min: ~'screen and (min-width: 360px)';
+@tui-mobile-interval: ~'(min-width: 360px) and (max-width: 767.4px)';
+
+@tui-tablet: ~'screen and (max-width: 1023.4px)';
+@tui-tablet-min: ~'screen and (min-width: 768px)';
+@tui-tablet-interval: ~'(min-width: 768px) and (max-width: 1023.4px)';
+
+@tui-desktop: ~'screen and (max-width: 1279.4px)';
+@tui-desktop-min: ~'screen and (min-width: 1024px)';
+@tui-desktop-interval: ~'(min-width: 1024px) and (max-width: 1279.4px)';
+
+@tui-desktop-lg-min: ~'screen and (min-width: 1280px)';
+
+@tui-touch: ~'(hover: none) and (pointer: coarse)';
+@tui-stylus: ~'(hover: none) and (pointer: fine)';
+@tui-pointer: ~'(hover: hover) and (pointer: coarse)';
+@tui-mouse: ~'(hover: hover) and (pointer: fine)';

package/variables/media.scss

@@ -0,0 +1,23 @@
+$tui-media-retina: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
+$tui-media-retina-mobile: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 599.4px), (min-resolution: 192dpi) and (max-width: 599.4px)';
+$tui-media-retina-tablet: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 1023.4px), (min-resolution: 192dpi) and (max-width: 1023.4px)';
+$tui-media-retina-desktop: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 1359.4px), (min-resolution: 192dpi) and (max-width: 1359.4px)';
+
+$tui-mobile: 'screen and (max-width: 767.4px)';
+$tui-mobile-min: 'screen and (min-width: 360px)';
+$tui-mobile-interval: '(min-width: 360px) and (max-width: 767.4px)';
+
+$tui-tablet: 'screen and (max-width: 1023.4px)';
+$tui-tablet-min: 'screen and (min-width: 768px)';
+$tui-tablet-interval: '(min-width: 768px) and (max-width: 1023.4px)';
+
+$tui-desktop: 'screen and (max-width: 1279.4px)';
+$tui-desktop-min: 'screen and (min-width: 1024px)';
+$tui-desktop-interval: '(min-width: 1024px) and (max-width: 1279.4px)';
+
+$tui-desktop-lg-min: 'screen and (min-width: 1280px)';
+
+$tui-touch: '(hover: none) and (pointer: coarse)';
+$tui-stylus: '(hover: none) and (pointer: fine)';
+$tui-pointer: '(hover: hover) and (pointer: coarse)';
+$tui-mouse: '(hover: hover) and (pointer: fine)';

package/basic/keyframes.less

@@ -1,19 +0,0 @@
-@keyframes tuiReveal {
-    from {
-        transform: scale(0);
-    }
-
-    to {
-        transform: scale(1);
-    }
-}
-
-@keyframes tuiFadeIn {
-    from {
-        opacity: var(--tui-fade-start, 0);
-    }
-
-    to {
-        opacity: var(--tui-fade-end, 1);
-    }
-}

package/basic/main.less

@@ -1,80 +0,0 @@
-html {
-    block-size: 100%;
-    /* stylelint-disable-next-line */
-    font-size: 16px;
-}
-
-body {
-    block-size: 100%;
-    min-block-size: 100%;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-html,
-body {
-    -webkit-overflow-scrolling: touch;
-}
-
-ul,
-ol {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-input,
-button,
-select,
-textarea {
-    font-family: inherit;
-    color: inherit;
-}
-
-hr {
-    margin: 0;
-    block-size: 1px;
-    border: none;
-    background: var(--tui-border-normal);
-}
-
-iframe {
-    border: none;
-}
-
-// Resolve bug with use elements in IE11
-// https://stackoverflow.com/questions/30653533/ie-11-crashes-when-using-dynamic-svg-elements
-svg use {
-    pointer-events: none;
-}
-
-::selection {
-    background-color: var(--tui-service-selection-background);
-}
-
-::-ms-clear {
-    display: none;
-}
-
-::-ms-reveal {
-    display: none;
-}
-
-// @note: only safari 16+
-@supports (-webkit-hyphens: none) and (text-align-last: right) {
-    /**
-      * @descriptions:
-      * Safari 16 has bug when for some reason,
-      * the ::after blocks aren't removed
-      * after the destruction of the parent class
-     */
-    ::after {
-        content: none;
-    }
-}

package/markup/tui-container.less

@@ -1,64 +0,0 @@
-// width - conscious choice
-/* stylelint-disable order/order */
-.tui-container {
-    margin-inline-end: auto;
-    margin-inline-start: auto;
-
-    &.tui-container_adaptive {
-        @media @tui-desktop-lg-min {
-            inline-size: 69rem;
-        }
-
-        @media @tui-desktop {
-            inline-size: 51.5rem;
-        }
-
-        @media @tui-mobile {
-            inline-size: 100%;
-            padding: 0 1rem;
-            box-sizing: border-box;
-        }
-    }
-
-    @media @tui-desktop-lg-min {
-        inline-size: 69rem;
-    }
-
-    @media @tui-desktop {
-        inline-size: 51.5rem;
-        padding: 0 3rem;
-    }
-
-    &_menu {
-        @media @tui-desktop-lg-min {
-            inline-size: 69rem;
-        }
-
-        @media @tui-desktop-interval {
-            inline-size: 51.5rem;
-        }
-
-        @media @tui-mobile {
-            inline-size: auto;
-            padding: 0 1rem;
-            box-sizing: border-box;
-        }
-    }
-
-    &_fullwidth {
-        inline-size: auto;
-        padding: 0 1.5rem;
-
-        @media @tui-mobile {
-            padding: 0 1rem;
-            box-sizing: border-box;
-        }
-    }
-
-    &_fixed {
-        @media @tui-desktop {
-            inline-size: 69rem;
-        }
-    }
-}
-/* stylelint-enable order/order */

package/markup/tui-form.less

@@ -1,145 +0,0 @@
-@fields-space: 1.25rem;
-@fields-space-mobile: 1rem;
-@fields-space-large: 2rem;
-@fields-space-large-mobile: 1.5rem;
-
-.tui-form {
-    /* stylelint-disable */
-    &__header {
-        font: var(--tui-font-heading-5);
-        margin-block-start: @fields-space-large;
-        margin-block-end: @fields-space;
-
-        @media @tui-mobile {
-            font: var(--tui-font-text-l);
-            font-weight: bold;
-            margin-block-end: @fields-space-mobile;
-        }
-
-        &_margin-top_none, // TODO: drop in v5
-        &_margin-block-start_none {
-            margin-block-start: 0;
-        }
-
-        &_margin-bottom_none, // TODO: drop in v5
-        &_margin-block-end_none {
-            margin-block-end: 0;
-        }
-
-        &_margin-bottom_small, // TODO: drop in v5
-        &_margin-block-end_small {
-            margin-block-end: @fields-space - 0.25rem;
-
-            @media @tui-mobile {
-                margin-block-end: @fields-space-mobile - 0.25rem;
-            }
-        }
-    }
-    /* stylelint-enable */
-
-    &__row {
-        margin-block-start: @fields-space;
-
-        &:first-child {
-            margin-block-start: 0;
-        }
-
-        &_multi-fields {
-            display: flex;
-
-            @media @tui-mobile {
-                flex-wrap: wrap;
-            }
-        }
-
-        &_half-width {
-            inline-size: ~'calc(50% - (@{fields-space} / 2))';
-
-            @media @tui-mobile {
-                inline-size: 100%;
-            }
-        }
-
-        &_checkboxes {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        @media @tui-mobile {
-            margin-block-start: @fields-space-mobile;
-        }
-    }
-
-    &__multi-field {
-        flex: 1 1 0;
-        min-inline-size: 0;
-        margin-inline-start: @fields-space;
-
-        &:first-child {
-            margin-inline-start: 0;
-        }
-
-        @media @tui-mobile {
-            flex-basis: 100%;
-            margin-block-start: @fields-space-mobile;
-            margin-inline-start: 0;
-
-            &:first-child {
-                margin-block-start: 0;
-            }
-        }
-    }
-
-    &__field-note {
-        font: var(--tui-font-text-s);
-        margin-block-start: 0.25rem;
-        color: var(--tui-text-secondary);
-    }
-
-    &__field-checkbox {
-        margin-block-start: 0.5rem;
-    }
-
-    &__checkbox {
-        flex: ~'1 1 calc(50% - 0.625rem)';
-
-        &:nth-child(even) {
-            margin-inline-start: 1.25rem;
-        }
-
-        &:nth-child(n + 3) {
-            margin-block-start: 1rem;
-        }
-    }
-
-    &__buttons {
-        display: flex;
-        margin-block-start: @fields-space-large;
-
-        &_align_end {
-            justify-content: flex-end;
-        }
-
-        &_align_center {
-            justify-content: center;
-        }
-
-        @media @tui-mobile {
-            flex-direction: column;
-            margin-block-start: @fields-space-large-mobile;
-        }
-    }
-
-    &__button {
-        margin-inline-start: 0.75rem;
-
-        &:first-child {
-            margin-inline-start: 0;
-        }
-
-        @media @tui-mobile {
-            margin-block-start: 0.5rem;
-            margin-inline-start: 0;
-        }
-    }
-}