@use 'iro-sass/src/props';

@use 'core';

@mixin styles {
    .badge, a.badge {
        padding-inline: 8px;
        border-radius: 10em;
        vertical-align: baseline;

        &.badgeUpdate {
            --background-color: #{props.get(core.$vlpnLink)};
            --color: #{props.get(core.$vlpnLinkFg)};
        }
    
        &.yellow {
            --background-color: #{props.get(core.$theme, --yellow, --800)};
            --color: #{props.get(core.$theme, --yellow, --800-text)};
        }
    }
}

@mixin styles--dark {
    .badge, a.badge {
        --background-color: #{props.get(core.$theme, --base, --300)};
        --color: #{props.get(core.$theme, --base, --800)};

        &.badgeUpdate {
            --background-color: #{props.get(core.$theme, --red, --400)};
            --color: #{props.get(core.$theme, --red, --400-text)};
        }
    
        &.yellow {
            --background-color: #{props.get(core.$theme, --yellow, --800)};
            --color: #{props.get(core.$theme, --yellow, --800-text)};
        }
    }
}