/*------------------------------------*\
    TAG
\*------------------------------------*/

@use 'sass:color';
@use 'sass:list';
@use "../../base/helpers";
@use "../../base/settings";

// modifiable vars
$tag__base-colour: settings.$ds_colour__brand !default;

$tag_colours: (
    'grey'      settings.$ds_colour__grey,
    'green'     settings.$ds_colour__dark-green,
    'teal'      settings.$ds_colour__teal,
    'darkblue'  settings.$ds_colour__blue--darker,
    'blue'      settings.$ds_colour__blue,
    'purple'    settings.$ds_colour__purple,
    'pink'      settings.$ds_colour__pink,
    'red'       settings.$ds_colour__red,
    'orange'    settings.$ds_colour__orange,
    'yellow'    settings.$ds_colour__yellow
);

.ds_tag {
    $background: helpers.adjustLuminance($tag__base-colour, 0.83);
    $foreground: helpers.adjustForContrast(color.adjust($tag__base-colour, $lightness: -12.5%), $background, 4.5);

    background: $background;
    color: $foreground;
    display: inline-block;
    font-weight: settings.$normal;
    outline: 0.0625rem solid rgba(color.channel($tag__base-colour, "red", $space: rgb), color.channel($tag__base-colour, "green", $space: rgb), color.channel($tag__base-colour, "blue", $space: rgb), 0.8);
    outline-offset: -0.0625rem;
    white-space: nowrap;
    @include helpers.ds_root-size;
    @include helpers.ds_responsive-padding(1, left);
    @include helpers.ds_responsive-padding(1, right);

    @each $color in $tag_colours {
        $name: list.nth($color, 1);
        $hex: list.nth($color, 2);
        $background: helpers.adjustLuminance($hex, 0.83);
        $foreground: helpers.adjustForContrast(color.adjust($hex, $lightness: -12.5%), $background, 4.5) ;

        &--#{$name} {
            background-color: $background;
            color: $foreground;
            outline-color: rgba(color.channel($foreground, "red", $space: rgb), color.channel($foreground, "green", $space: rgb), color.channel($foreground, "blue", $space: rgb), 0.8);
        }
    }
}