SelfStyle Supercharged link (with Sass)

g.supercharged-links.scss

// Supported Config Parameters:
// - color
// - background-color
// - font-weight
// - icon or image
// - sub-icon or sub-image

$fallback-subicon-without-icon: '🗒️';

// IMPORTANT: Attribute key must be added to the "Target Attributes" setting in the Supercharged Links plugin.
$attribute-supercharge: (
    ('state', 'Paused'):    ('color': #44A751, 'sub-icon': '⏸️'),
    ('state', 'Finished'):  ('color': #44A751, 'sub-icon': '🗸'),
    ('state', 'Outdated'):  ('color': #D95809, 'icon': '✘'),
    ('state', 'Stopped'):   ('color': #C30000, 'sub-icon': '✘'),
    ('type', 'Map'):        ('color': #5095F7, 'icon': '🗺️'),
    ('type', 'Telescope'):  ('color': #5095F7, 'icon': '🔭'),
    ('type', 'Game'):       ('color': #5095F7, 'icon': '🎮'),
    ('type', 'Person'):     ('color': #5095F7, 'icon': '👤'),
    ('type', 'Artifact'):   ('color': #5095F7, 'icon': '📦'),
    ('type', 'Meeting'):    ('color': #5095F7, 'icon': '📝'),
    ('type', 'Ship'):       ('color': #5095F7, 'icon': '🚢'),
);

$tag-supercharge: (
    ('Island/Volcanic'):   ('color': #FF5722, 'icon': '🌋'),
    ('Island/Expedition'): ('color': #4CAF50, 'icon': '🧭'),
    ('Island/Uncharted'):  ('color': #9D9D9D, 'icon': '❔'),
    ('Island/Sunken'):     ('color': #2196F3, 'icon': '🌊'),
    ('Island/Treasure'):   ('color': #FFC107, 'icon': '✘'),
    ('excalidraw'):        ('color': #5095F7, 'icon': '📐', 'sub-image': url("https://angular.io/assets/images/logos/angular/shield-large.svg")),
    ('Angular'):           ('color': #5095F7, 'image': url("https://angular.io/assets/images/logos/angular/shield-large.svg")),
);

$path-supercharge: (
    ('Utils/Templates'):      ('color': #BFBFBF, 'icon': '📋'),
    ('Calendar/Daily Notes'): ('color': #26C09C, 'icon': '🗓️'),
    ('Rafts'):                ('color': #00BCD4, 'image': url('data:image/svg+xml,')),
);

@mixin supercharge($values) {
    $color: map-get($values, 'color');
    $background-color: map-get($values, 'background-color');
    $font-weight: map-get($values, 'font-weight');
    $icon: map-get($values, 'icon');
    $image: map-get($values, 'image');
    $sub-icon: map-get($values, 'sub-icon');
    $sub-image: map-get($values, 'sub-image');

    position: relative;
    @if $color            { color:            $color            !important; }
    @if $font-weight      { font-weight:      $font-weight      !important; }
    @if $background-color { 
        background-color: $background-color !important;
        border-radius: 5px;
        padding-left: 2px;
        padding-right: 2px;
    }
    @if $icon or $image {
        &::before { 
            display: inline-block;
            margin-inline-end: 0.6em;
            @if $icon {
                content: $icon !important;
            }
            @if $image {
                position: relative;
                top: 0.1em;
                width: 1.1em;
                height: 1.1em;
                content: '' !important;
                background-image: $image;
                background-size: cover;
            }
        }
    }
    @if $sub-icon or $sub-image {
        &::before { 
            content: $fallback-subicon-without-icon;
            display: inline-block;
            width: 1em;
            margin-inline-end: 0.6em;
        }
        &::after  { 
            position: absolute;
            @if $sub-icon {
                left: 0.5rem;
                top: 0.3rem;
                font-size: 0.85rem;
                content: $sub-icon;
                text-shadow: -1px -1px 2px var(--background-primary), -1px -1px 2px var(--background-primary);
                border-radius: 1rem;
                @if $color { color: $color !important; }
            }
            @if $sub-image {
                left: 0.4rem;
                top: 0.5rem;
                content: '' !important;
                background-image: $sub-image;
                background-size: cover;
                display: inline-block;
                width: 0.8em;
                height: 0.8em;
            }
        }
    }
}

@each $attributes, $values in $attribute-supercharge {
    $attr-key: nth($attributes, 1); 
    $attr-value: nth($attributes, 2);

    .data-link-text[data-link-#{$attr-key}="#{$attr-value}"][data-link-#{$attr-key}="#{$attr-value}"] {
        @include supercharge($values);
    }
}

@each $tag, $values in $tag-supercharge {
    .data-link-text[data-link-tags*="#{$tag}"][data-link-tags*="#{$tag}"] {
        @include supercharge($values);
    }
}

@each $path, $values in $path-supercharge {
    .data-link-text[data-link-path^="#{$path}"][data-link-path^="#{$path}"] {
        @include supercharge($values);
    }
}