diff --git a/src/scss/02-tools/_m-text-icon.scss b/src/scss/02-tools/_m-text-icon.scss index d1cc9f84..10b21752 100644 --- a/src/scss/02-tools/_m-text-icon.scss +++ b/src/scss/02-tools/_m-text-icon.scss @@ -13,10 +13,10 @@ * */ -@mixin text-icon($icon: "arrow", $position: after, $color: currentColor, $size: 12px) { +@mixin text-icon($icon: "arrow", $position: after, $color: currentColor, $size: 12px, $gap: 8px) { position: relative; display: inline-flex; - gap: 8px; + gap: $gap; align-items: center; &::#{$position} { @@ -31,3 +31,13 @@ transition: background-color .5s $ease-out-expo; } } + +@mixin text-external-icon($icon: "external", $position: after, $color: currentColor, $size: 12px, $gap: 8px) { + @include text-icon($icon, $position, $color, $size); + display: inline; + + &::#{$position} { + display: inline-block; + margin-inline-start: $gap; + } +} diff --git a/src/scss/03-base/_links.scss b/src/scss/03-base/_links.scss index 2e952751..f25b2fe5 100644 --- a/src/scss/03-base/_links.scss +++ b/src/scss/03-base/_links.scss @@ -4,7 +4,7 @@ a { cursor: pointer; &[target="_blank"] { - @include text-icon("external"); + @include text-external-icon; } @include hover { @@ -13,5 +13,5 @@ a { } .link-external { - @include text-icon("external"); + @include text-external-icon; }