@rt-tools/ui-kit 0.4.0 → 0.5.1

package/src/lib/ui-kit/snack-bar/snack-bar.component.scss

@@ -1,5 +1,19 @@
 @use '../../../styles/base/mixin' as mixins;
 
+// Полоса срока: она стягивается слева направо и обрезается тем же путём, каким шла прежде.
+// Обрезка нужна вместе с шириной — у полосы прижаты обе кромки, и одна ширина её не двигает.
+@keyframes rt-snack-bar-progress {
+    from {
+        width: 100%;
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    }
+
+    to {
+        width: 0;
+        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+    }
+}
+
 $snack-bar: (
     content: (
         gap: 1rem,
@@ -92,9 +106,15 @@ $snack-bar: (
             left: 0;
             width: 100%;
             height: var(--rt-snack-bar-progress-height);
+            animation: rt-snack-bar-progress var(--rt-snack-bar-progress-duration) linear forwards;
             background-color: var(--mat-button-filled-container-color);
             border-bottom-left-radius: var(--mat-snack-bar-container-shape);
             border-bottom-right-radius: var(--mat-snack-bar-container-shape);
         }
     }
 }
+
+// Под указателем срок стоит: сообщение, которое читают, не уходит само.
+:host:hover .rt-snack-bar__progress {
+    animation-play-state: paused;
+}

package/src/lib/ui-kit/toolbar/stories/component/test-toolbar.component.scss

@@ -0,0 +1,22 @@
+:host {
+    display: block;
+    width: 100%;
+    margin: -1rem;
+
+    .title {
+        overflow: hidden;
+        padding: 0 1rem;
+        font-weight: 500;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .page {
+        padding: 0 1rem;
+
+        &__row {
+            padding: 0.75rem 0;
+            border-bottom: 1px solid var(--rt-border-neutral-default);
+        }
+    }
+}

package/src/styles/base/_tokens.scss

@@ -193,6 +193,11 @@ $semantic: (
             color-mix(in srgb, var(--rt-color-warning-80) 90%, #fff)
         ),
     bg-accent-warning-disabled: color-mix(in srgb, var(--rt-color-warning-80) 38%, transparent),
+    /* Подсветка найденного. Жёлтая в обеих темах — так подсвечивает найденное сам браузер,
+       и человек читает эту заливку без объяснений. Текст на ней тёмный всегда: жёлтый фон
+       светлый в любой теме, и светлая подпись на нём пропадает. */
+    bg-accent-highlight: t(#ffeb3b, #ffd54f),
+    text-accent-highlight: #181818,
     bg-accent-danger-subtle: t(var(--rt-color-danger-10), color-mix(in srgb, var(--rt-color-danger-100) 18%, #1c1b1e)),
     bg-accent-danger-solid: var(--rt-color-danger-100),
     bg-accent-danger-hover: t(

package/src/styles/color-scheme.spec.ts

@@ -230,7 +230,10 @@ describe('rt-tools color schemes', () => {
             const scheme: Record<string, string> = extractDeclarations(css, '--rt-color-primary-\\d+');
             // bg-accent-primary-solid === var(--rt-color-primary-100); under the teal scheme that is #008582
             expect(scheme['--rt-color-primary-100']).toBe('#008582');
-            expect(normalize(stripMat(css.match(/--rt-bg-accent-primary-solid:\s*([^;]+);/)![1]))).toBe('var(--rt-color-primary-100)');
+            const solid: RegExpMatchArray | null = css.match(/--rt-bg-accent-primary-solid:\s*([^;]+);/);
+
+            expect(solid).not.toBeNull();
+            expect(normalize(stripMat(solid?.[1] ?? ''))).toBe('var(--rt-color-primary-100)');
         });
     });
 });

package/src/styles/components/_rtui_button.scss

@@ -1,547 +1,13 @@
-@use '../base/mixin' as mixins;
-
-$rtui-button: (
-    base: (
-        width: auto,
-        bg: transparent,
-        border: 0,
-        color: var(--rt-text-base-soft),
-        display: inline-flex,
-        font-size: 0,
-        gap: 0,
-        padding: 0,
-        shadow: 0,
-        shadow-blur: 8px,
-    ),
-    accent: (
-        border: 1px solid var(--rt-color-blue-100),
-        color: var(--rt-text-static-light),
-        bg: var(--rt-color-blue-60),
-        hover-bg: var(--rt-color-blue-40),
-        active-shadow: var(--rt-color-blue-40),
-    ),
-    accent-outline: (
-        border: 1px solid var(--rt-color-blue-100),
-        bg: var(--rt-color-blue-20),
-        color: var(--rt-text-accent-info),
-        hover-border: 1px solid var(--rt-color-blue-80),
-        hover-bg: var(--rt-bg-base-base),
-        active-shadow: var(--rt-color-blue-40),
-    ),
-    accent-light: (
-        color: var(--rt-text-accent-info),
-        bg: var(--rt-color-blue-40),
-        hover-color: var(--rt-text-accent-info-soft),
-        hover-bg: var(--rt-color-blue-20),
-        active-shadow: var(--rt-color-blue-40),
-    ),
-    success: (
-        border: 1px solid var(--rt-color-green-100),
-        color: var(--rt-text-static-light),
-        bg: var(--rt-bg-accent-success-solid),
-        hover-bg: var(--rt-color-green-60),
-        active-shadow: var(--rt-color-green-40),
-    ),
-    success-outline: (
-        border: 1px solid var(--rt-color-green-100),
-        bg: var(--rt-color-green-20),
-        color: var(--rt-text-accent-success),
-        hover-border: 1px solid var(--rt-color-green-80),
-        hover-bg: var(--rt-bg-base-base),
-        active-shadow: var(--rt-color-green-40),
-    ),
-    success-light: (
-        color: var(--rt-text-accent-success),
-        bg: var(--rt-color-green-20),
-        hover-color: var(--rt-text-accent-success-soft),
-        hover-bg: var(--rt-bg-accent-success-subtle),
-        active-shadow: var(--rt-color-green-40),
-    ),
-    secondary: (
-        border: 1px solid var(--rt-border-neutral-emphasis),
-        color: var(--rt-text-static-light),
-        bg: var(--rt-bg-base-emphasis),
-        hover-bg: var(--rt-bg-base-emphasis-soft),
-        active-shadow: var(--rt-bg-base-emphasis-soft),
-    ),
-    secondary-outline: (
-        border: 1px solid var(--rt-border-neutral-emphasis),
-        bg: var(--rt-bg-base-strong),
-        color: var(--rt-text-base-secondary),
-        hover-bg: var(--rt-bg-base-base),
-        active-shadow: var(--rt-bg-base-emphasis-soft),
-    ),
-    secondary-light: (
-        color: var(--rt-text-base-soft),
-        bg: var(--rt-bg-base-emphasis-soft),
-        hover-color: var(--rt-text-base-secondary),
-        hover-bg: var(--rt-bg-base-strong),
-        active-shadow: var(--rt-bg-base-emphasis-soft),
-    ),
-    error: (
-        border: 1px solid var(--rt-border-accent-danger),
-        color: var(--rt-text-static-light),
-        bg: var(--rt-color-red-80),
-        hover-bg: var(--rt-color-red-60),
-        active-shadow: var(--rt-color-red-40),
-    ),
-    error-outline: (
-        border: 1px solid var(--rt-border-accent-danger),
-        bg: var(--rt-bg-accent-danger-subtle),
-        color: var(--rt-text-accent-danger),
-        hover-bg: var(--rt-bg-base-base),
-        active-shadow: var(--rt-color-red-40),
-    ),
-    error-light: (
-        color: var(--rt-text-accent-danger),
-        bg: var(--rt-color-red-40),
-        hover-bg: var(--rt-bg-accent-danger-subtle),
-        active-shadow: var(--rt-color-red-40),
-    ),
-    warning: (
-        border: 1px solid var(--rt-color-orange-100),
-        color: var(--rt-text-static-light),
-        bg: var(--rt-bg-accent-warning-solid),
-        hover-bg: var(--rt-color-orange-60),
-        active-shadow: var(--rt-color-orange-40),
-    ),
-    warning-outline: (
-        border: 1px solid var(--rt-color-orange-100),
-        bg: var(--rt-color-orange-10),
-        color: var(--rt-text-accent-warning),
-        hover-bg: var(--rt-bg-base-base),
-        active-shadow: var(--rt-color-orange-40),
-    ),
-    warning-light: (
-        color: var(--rt-text-accent-warning),
-        bg: var(--rt-color-orange-10),
-        hover-bg: var(--rt-color-orange-5),
-        active-shadow: var(--rt-color-orange-40),
-    ),
-    accent-text: (
-        border: 0,
-        bg: transparent,
-        color: var(--rt-text-accent-info),
-        hover-bg: var(--rt-bg-base-hover),
-    ),
-    success-text: (
-        border: 0,
-        bg: transparent,
-        color: var(--rt-text-accent-success),
-        hover-bg: var(--rt-bg-base-hover),
-    ),
-    secondary-text: (
-        border: 0,
-        bg: transparent,
-        color: var(--rt-text-base-secondary),
-        hover-bg: var(--rt-bg-base-hover),
-    ),
-    error-text: (
-        border: 0,
-        bg: transparent,
-        color: var(--rt-text-accent-danger),
-        hover-bg: var(--rt-bg-base-hover),
-    ),
-    warning-text: (
-        border: 0,
-        bg: transparent,
-        color: var(--rt-text-accent-warning),
-        hover-bg: var(--rt-bg-base-hover),
-    ),
-    size-sm: (
-        gap: 4px,
-        padding: 4px 8px,
-        font-size: 12px,
-        width: auto,
-        display: inline-flex,
-    ),
-
-    size-md: (
-        gap: 8px,
-        padding: 8px 16px,
-        font-size: 14px,
-        width: auto,
-        display: inline-flex,
-    ),
-
-    size-lg: (
-        gap: 12px,
-        padding: 12px 24px,
-        font-size: 18px,
-        width: auto,
-        display: inline-flex,
-    ),
-
-    size-full: (
-        width: 100%,
-        display: flex,
-        gap: 8px,
-        padding: 8px 16px,
-        font-size: 14px,
-    ),
-);
-
-:root {
-    @each $element, $elements in $rtui-button {
-        @each $style-token, $value in $elements {
-            #{mixins.generateCssVar('rtui-btn', #{$element}, #{$style-token})}: #{$value};
-        }
-    }
-}
-
-.rtui-btn {
-    --width: var(--rt-rtui-btn-base-width);
-    --bg: var(--rt-rtui-btn-base-bg);
-    --border: var(--rt-rtui-btn-base-border);
-    --color: var(--rt-rtui-btn-base-color);
-    --display: var(--rt-rtui-btn-base-display);
-    --font-size: var(--rt-rtui-btn-base-font-size);
-    --gap: var(--rt-rtui-btn-base-gap);
-    --padding: var(--rt-rtui-btn-base-padding);
-    --shadow: var(--rt-rtui-btn-base-shadow);
-    --shadow-blur: var(--rt-rtui-btn-base-shadow-blur);
-
-    display: var(--display);
-    width: var(--width);
-    align-items: center;
-    justify-content: center;
-    padding: var(--padding);
-    border: var(--border);
-    border-radius: 6px;
-    background-color: var(--bg);
-    box-shadow: var(--shadow);
-    color: var(--color);
-    cursor: pointer;
-    font-size: var(--font-size);
-    font-weight: 600;
-    gap: var(--gap);
-    line-height: 1;
-    text-decoration: none;
-    transition:
-        background-color 0.15s linear,
-        color 0.15s linear,
-        box-shadow 0.15s linear,
-        border-color 0.15s linear;
-
-    &:focus {
-        outline: none;
-    }
-
-    &:focus-visible {
-        outline: 2px dashed var(--rt-border-focus);
-        outline-offset: 2px;
-    }
-
-    &:disabled {
-        cursor: default;
-        opacity: 0.75;
-        pointer-events: none;
-    }
-}
-
-/* accent */
-.rtui-btn-accent {
-    --border: var(--rt-rtui-btn-accent-border);
-    --color: var(--rt-rtui-btn-accent-color);
-    --bg: var(--rt-rtui-btn-accent-bg);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-accent-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-accent-active-shadow);
-    }
-}
-
-.rtui-btn-accent-outline {
-    --border: var(--rt-rtui-btn-accent-outline-border);
-    --bg: var(--rt-rtui-btn-accent-outline-bg);
-    --color: var(--rt-rtui-btn-accent-outline-color);
-
-    &:hover {
-        --border: var(--rt-rtui-btn-accent-outline-hover-border);
-        --bg: var(--rt-rtui-btn-accent-outline-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-accent-outline-active-shadow);
-    }
-}
-
-.rtui-btn-accent-light {
-    --color: var(--rt-rtui-btn-accent-light-color);
-    --bg: var(--rt-rtui-btn-accent-light-bg);
-
-    &:hover {
-        --color: var(--rt-rtui-btn-accent-light-hover-color);
-        --bg: var(--rt-rtui-btn-accent-light-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-accent-light-active-shadow);
-    }
-}
-
-/* success */
-.rtui-btn-success {
-    --border: var(--rt-rtui-btn-success-border);
-    --color: var(--rt-rtui-btn-success-color);
-    --bg: var(--rt-rtui-btn-success-bg);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-success-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-success-active-shadow);
-    }
-}
-
-.rtui-btn-success-outline {
-    --border: var(--rt-rtui-btn-success-outline-border);
-    --bg: var(--rt-rtui-btn-success-outline-bg);
-    --color: var(--rt-rtui-btn-success-outline-color);
-
-    &:hover {
-        --border: var(--rt-rtui-btn-success-outline-hover-border);
-        --bg: var(--rt-rtui-btn-success-outline-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-success-outline-active-shadow);
-    }
-}
-
-.rtui-btn-success-light {
-    --color: var(--rt-rtui-btn-success-light-color);
-    --bg: var(--rt-rtui-btn-success-light-bg);
-
-    &:hover {
-        --color: var(--rt-rtui-btn-success-light-hover-color);
-        --bg: var(--rt-rtui-btn-success-light-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-success-light-active-shadow);
-    }
-}
-
-/* secondary */
-.rtui-btn-secondary {
-    --border: var(--rt-rtui-btn-secondary-border);
-    --color: var(--rt-rtui-btn-secondary-color);
-    --bg: var(--rt-rtui-btn-secondary-bg);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-secondary-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-secondary-active-shadow);
-    }
-}
-
-.rtui-btn-secondary-outline {
-    --border: var(--rt-rtui-btn-secondary-outline-border);
-    --bg: var(--rt-rtui-btn-secondary-outline-bg);
-    --color: var(--rt-rtui-btn-secondary-outline-color);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-secondary-outline-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-secondary-outline-active-shadow);
-    }
-}
-
-.rtui-btn-secondary-light {
-    --color: var(--rt-rtui-btn-secondary-light-color);
-    --bg: var(--rt-rtui-btn-secondary-light-bg);
-
-    &:hover {
-        --color: var(--rt-rtui-btn-secondary-light-hover-color);
-        --bg: var(--rt-rtui-btn-secondary-light-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-secondary-light-active-shadow);
-    }
-}
-
-/* error */
-.rtui-btn-error {
-    --border: var(--rt-rtui-btn-error-border);
-    --color: var(--rt-rtui-btn-error-color);
-    --bg: var(--rt-rtui-btn-error-bg);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-error-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-error-active-shadow);
-    }
-}
-
-.rtui-btn-error-outline {
-    --border: var(--rt-rtui-btn-error-outline-border);
-    --bg: var(--rt-rtui-btn-error-outline-bg);
-    --color: var(--rt-rtui-btn-error-outline-color);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-error-outline-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-error-outline-active-shadow);
-    }
-}
-
-.rtui-btn-error-light {
-    --color: var(--rt-rtui-btn-error-light-color);
-    --bg: var(--rt-rtui-btn-error-light-bg);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-error-light-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-error-light-active-shadow);
-    }
-}
-
-/* warning */
-.rtui-btn-warning {
-    --border: var(--rt-rtui-btn-warning-border);
-    --color: var(--rt-rtui-btn-warning-color);
-    --bg: var(--rt-rtui-btn-warning-bg);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-warning-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-warning-active-shadow);
-    }
-}
-
-.rtui-btn-warning-outline {
-    --border: var(--rt-rtui-btn-warning-outline-border);
-    --bg: var(--rt-rtui-btn-warning-outline-bg);
-    --color: var(--rt-rtui-btn-warning-outline-color);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-warning-outline-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-warning-outline-active-shadow);
-    }
-}
-
-.rtui-btn-warning-light {
-    --color: var(--rt-rtui-btn-warning-light-color);
-    --bg: var(--rt-rtui-btn-warning-light-bg);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-warning-light-hover-bg);
-    }
-
-    &:active {
-        --shadow: var(--rt-rtui-btn-warning-light-active-shadow);
-    }
-}
-
-/* text — transparent, borderless label with a subtle hover wash.
-   Shared box matches the legacy text-button (inline-text look). Compound
-   `.rtui-btn[...-text]` (0,2,0) outranks the size tokens (0,1,0) regardless of order. */
-.rtui-btn[class*='-text'] {
-    --font-size: 16px;
-    --gap: 8px;
-    --padding: 0 10px;
-
-    min-height: 30px;
-    border-radius: 5px;
-    font-weight: 400;
-}
-
-.rtui-btn-accent-text {
-    --border: var(--rt-rtui-btn-accent-text-border);
-    --bg: var(--rt-rtui-btn-accent-text-bg);
-    --color: var(--rt-rtui-btn-accent-text-color);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-accent-text-hover-bg);
-    }
-}
-
-.rtui-btn-success-text {
-    --border: var(--rt-rtui-btn-success-text-border);
-    --bg: var(--rt-rtui-btn-success-text-bg);
-    --color: var(--rt-rtui-btn-success-text-color);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-success-text-hover-bg);
-    }
-}
-
-/* secondary-text resolves its colour ON the element so the `--rt-text-base-secondary`
-   semantic (`--mat-sys-on-surface-variant` hybrid) lands where Material is in scope. */
-.rtui-btn-secondary-text {
-    --border: var(--rt-rtui-btn-secondary-text-border);
-    --bg: var(--rt-rtui-btn-secondary-text-bg);
-    --color: var(--mat-sys-on-surface-variant, var(--rt-rtui-btn-secondary-text-color));
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-secondary-text-hover-bg);
-    }
-}
-
-.rtui-btn-error-text {
-    --border: var(--rt-rtui-btn-error-text-border);
-    --bg: var(--rt-rtui-btn-error-text-bg);
-    --color: var(--rt-rtui-btn-error-text-color);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-error-text-hover-bg);
-    }
-}
-
-.rtui-btn-warning-text {
-    --border: var(--rt-rtui-btn-warning-text-border);
-    --bg: var(--rt-rtui-btn-warning-text-bg);
-    --color: var(--rt-rtui-btn-warning-text-color);
-
-    &:hover {
-        --bg: var(--rt-rtui-btn-warning-text-hover-bg);
-    }
-}
-
-/* size */
-.rtui-btn-sm {
-    --gap: var(--rt-rtui-btn-size-sm-gap);
-    --padding: var(--rt-rtui-btn-size-sm-padding);
-    --font-size: var(--rt-rtui-btn-size-sm-font-size);
-}
-
-.rtui-btn-md {
-    --gap: var(--rt-rtui-btn-size-md-gap);
-    --padding: var(--rt-rtui-btn-size-md-padding);
-    --font-size: var(--rt-rtui-btn-size-md-font-size);
-}
-
-.rtui-btn-lg {
-    --gap: var(--rt-rtui-btn-size-lg-gap);
-    --padding: var(--rt-rtui-btn-size-lg-padding);
-    --font-size: var(--rt-rtui-btn-size-lg-font-size);
-}
-
-.rtui-btn-full {
-    --width: var(--rt-rtui-btn-size-full-width);
-    --display: var(--rt-rtui-btn-size-full-display);
-    --gap: var(--rt-rtui-btn-size-full-gap);
-    --padding: var(--rt-rtui-btn-size-full-padding);
-    --font-size: var(--rt-rtui-btn-size-full-font-size);
-}
+// Кнопка кита: вид, размер и состояние. Файл остался входом, а сами правила лежат частями
+// рядом, по предмету: таблица видов — `button/_map.scss`, основа блока — `button/_base.scss`,
+// пятнадцать палитр — `button/_palettes.scss`, виды без фона — `button/_text.scss`, размеры —
+// `button/_sizes.scss`.
+// Порядок подключения — это порядок каскада: правила одного блока равны по силе, и текстовые
+// виды перебивают палитры только потому, что стоят после них.
+
+@forward 'button/map';
+
+@use 'button/base';
+@use 'button/palettes';
+@use 'button/text';
+@use 'button/sizes';

package/src/styles/components/button/_base.scss

@@ -0,0 +1,64 @@
+// Основа кнопки: объявление свойств вида на корне страницы и сам блок `.rtui-btn` — раскладка,
+// рамка, тень, состояния наведения, фокуса и отключённости.
+// Часть стилей кнопки — входом остаётся `_rtui_button.scss`.
+
+@use '../../base/mixin' as mixins;
+@use 'map' as button;
+
+:root {
+    @each $element, $elements in button.$rtui-button {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('rtui-btn', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+}
+
+.rtui-btn {
+    --width: var(--rt-rtui-btn-base-width);
+    --bg: var(--rt-rtui-btn-base-bg);
+    --border: var(--rt-rtui-btn-base-border);
+    --color: var(--rt-rtui-btn-base-color);
+    --display: var(--rt-rtui-btn-base-display);
+    --font-size: var(--rt-rtui-btn-base-font-size);
+    --gap: var(--rt-rtui-btn-base-gap);
+    --padding: var(--rt-rtui-btn-base-padding);
+    --shadow: var(--rt-rtui-btn-base-shadow);
+    --shadow-blur: var(--rt-rtui-btn-base-shadow-blur);
+
+    display: var(--display);
+    width: var(--width);
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding);
+    border: var(--border);
+    border-radius: 6px;
+    background-color: var(--bg);
+    box-shadow: var(--shadow);
+    color: var(--color);
+    cursor: pointer;
+    font-size: var(--font-size);
+    font-weight: 600;
+    gap: var(--gap);
+    line-height: 1;
+    text-decoration: none;
+    transition:
+        background-color 0.15s linear,
+        color 0.15s linear,
+        box-shadow 0.15s linear,
+        border-color 0.15s linear;
+
+    &:focus {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: 2px dashed var(--rt-border-focus);
+        outline-offset: 2px;
+    }
+
+    &:disabled {
+        cursor: default;
+        opacity: 0.75;
+        pointer-events: none;
+    }
+}