diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css index d215068e22..21c02a47c8 100644 --- a/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css @@ -166,9 +166,10 @@ min-inline-size: var(--sizing-12); } - &[data-icon-position="end"][data-size="small"] - [data-content]:has([data-icon]):has([data-text]) { - padding-inline-end: calc(var(--icon-size-1) + var(--inner-spacing-1)); + &[data-icon-position="start"][data-size="small"]:has([data-icon]):has( + [data-text] + ) { + padding-inline: var(--inner-spacing-1) var(--inner-spacing-2); } &[data-icon-position="start"][data-size="small"] @@ -176,6 +177,17 @@ padding-inline-start: calc(var(--icon-size-1) + var(--inner-spacing-1)); } + &[data-icon-position="end"][data-size="small"]:has([data-icon]):has( + [data-text] + ) { + padding-inline: var(--inner-spacing-2) var(--inner-spacing-1); + } + + &[data-icon-position="end"][data-size="small"] + [data-content]:has([data-icon]):has([data-text]) { + padding-inline-end: calc(var(--icon-size-1) + var(--inner-spacing-1)); + } + &[data-size="medium"] { min-inline-size: var(--sizing-9); padding-inline: var(--inner-spacing-3); @@ -186,13 +198,25 @@ min-inline-size: var(--sizing-22); } - &[data-icon-position="end"][data-size="medium"] - [data-content]:has([data-icon]):has([data-text]) { - padding-inline-end: calc(var(--icon-size-2) + var(--inner-spacing-1)); + &[data-icon-position="start"][data-size="medium"]:has([data-icon]):has( + [data-text] + ) { + padding-inline: var(--inner-spacing-2) var(--inner-spacing-3); } &[data-icon-position="start"][data-size="medium"] [data-content]:has([data-icon]):has([data-text]) { padding-inline-start: calc(var(--icon-size-2) + var(--inner-spacing-1)); } + + &[data-icon-position="end"][data-size="medium"]:has([data-icon]):has( + [data-text] + ) { + padding-inline: var(--inner-spacing-3) var(--inner-spacing-2); + } + + &[data-icon-position="end"][data-size="medium"] + [data-content]:has([data-icon]):has([data-text]) { + padding-inline-end: calc(var(--icon-size-2) + var(--inner-spacing-1)); + } }