From 702803c409586934eb0ec2463251b9574f36a9d9 Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Tue, 24 Sep 2024 16:54:19 +0400
Subject: [PATCH] chore: rollback `InputCardGroup` fix and implement a simpler
 one (#9141)

---
 .../input-card-group.component.ts             |  1 +
 .../input-card-group.style.less               | 37 ++-----------------
 projects/core/styles/components/icons.less    |  1 -
 projects/core/styles/components/link.less     |  1 +
 4 files changed, 5 insertions(+), 35 deletions(-)

diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.component.ts b/projects/addon-commerce/components/input-card-group/input-card-group.component.ts
index ca286f17e2f1..79745a45c654 100644
--- a/projects/addon-commerce/components/input-card-group/input-card-group.component.ts
+++ b/projects/addon-commerce/components/input-card-group/input-card-group.component.ts
@@ -106,6 +106,7 @@ export interface TuiCard {
     host: {
         'data-size': 'l',
         '(mousedown)': 'onMouseDown($event)',
+        '(scroll.silent)': '$event.target.scrollLeft = 0',
     },
 })
 export class TuiInputCardGroup
diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.style.less b/projects/addon-commerce/components/input-card-group/input-card-group.style.less
index eb3904c51beb..121e6b686976 100644
--- a/projects/addon-commerce/components/input-card-group/input-card-group.style.less
+++ b/projects/addon-commerce/components/input-card-group/input-card-group.style.less
@@ -14,7 +14,6 @@
     inline-size: @width-full;
     border-radius: var(--tui-radius-l);
     overflow: hidden;
-    isolation: isolate;
 
     :host-context(tui-root._mobile) {
         inline-size: @width-mobile;
@@ -39,9 +38,8 @@
     block-size: 100%;
 
     &_cvc {
-        inline-size: 50%;
         margin-left: @offset-full;
-        transform: translate3d(200%, 0, 0);
+        transform: translate3d(100%, 0, 0);
 
         :host-context(tui-root._mobile) & {
             margin-left: @offset-small;
@@ -49,18 +47,7 @@
     }
 
     &_expire {
-        inline-size: 50%;
-        transform: translate3d(@wrapper-offset-full, 0, 0);
-
-        :host-context(tui-root._mobile) & {
-            transform: translate3d(@wrapper-offset-small, 0, 0);
-        }
-
-        .t-label,
-        .t-input {
-            margin-inline-start: 0;
-            padding-inline-start: 100%;
-        }
+        transform: translate3d(100%, 0, 0);
     }
 
     &_active {
@@ -69,13 +56,6 @@
         :host-context(tui-root._mobile) & {
             transform: translate3d(@wrapper-offset-small, 0, 0);
         }
-
-        &.t-wrapper_expire {
-            .t-label,
-            .t-input {
-                padding-inline-start: var(--tui-padding-l);
-            }
-        }
     }
 }
 
@@ -125,7 +105,6 @@
 
 .t-input {
     .fullsize();
-    .transition(padding);
 
     border: 0;
     margin: 0;
@@ -143,9 +122,7 @@
     &:-webkit-autofill {
         -webkit-text-fill-color: var(--tui-text-primary) !important;
         caret-color: var(--tui-text-primary) !important;
-        transition:
-            background-color 600000s 0s,
-            padding var(--tui-duration) ease-in-out;
+        transition: background-color 600000s 0s;
     }
 
     &&&_card {
@@ -174,10 +151,6 @@
             background: transparent !important;
             pointer-events: none !important;
         }
-
-        &:focus {
-            z-index: 1;
-        }
     }
 
     &_inert {
@@ -235,7 +208,3 @@
 .t-ghost {
     visibility: hidden;
 }
-
-tui-icon {
-    z-index: 1;
-}
diff --git a/projects/core/styles/components/icons.less b/projects/core/styles/components/icons.less
index 6d7657e62d3d..5c4a73292954 100644
--- a/projects/core/styles/components/icons.less
+++ b/projects/core/styles/components/icons.less
@@ -29,7 +29,6 @@
         font-size: 1.5rem;
         flex-shrink: 0;
         background: currentColor;
-        box-sizing: border-box;
         mask: var(--t-icon-start) no-repeat center/contain;
     }
 
diff --git a/projects/core/styles/components/link.less b/projects/core/styles/components/link.less
index f4eda18486b3..9f2463be9b99 100644
--- a/projects/core/styles/components/link.less
+++ b/projects/core/styles/components/link.less
@@ -46,6 +46,7 @@
         vertical-align: super;
         font-size: 0;
         line-height: 0;
+        box-sizing: border-box;
     }
 
     .appearance-focus({