%tag-base {
    padding: 0.3rem 1rem;
    border-radius: 5rem;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    font-size: 0.8rem;
}

.tags {
    @include no-list;

    & > li {
        display: none;
        position: relative;
        @extend %tag-base;

        .tooltip {
            opacity: 0;
            visibility: hidden;
            position: absolute;
            top: -0.6rem;
            left: 10rem;
            padding: 1rem;
            color: $color-white;
            z-index: 20;
            width: 20rem;
            @include transition(opacity 0.3s ease-in-out, visibility 0.3s ease-in-out);

            &:before {
                content: "";
                display: block;

                position: absolute;
                left: -0.4rem;
                top: 1rem;
            }
        }

        &:hover {
            .tooltip {
                opacity: 1;
                visibility: visible;
            }
        }
    }
}

@each $variation, $color-group in $colors {
    @if $variation == 'accents' {

        @for $i from 1 through length($color-group) {
            $color-key: nth(nth($color-group, $i), 1);
            $hex-value: nth(nth($color-group, $i), 2);

            .tag-#{$color-key} {
                background-color: $hex-value;
                color: lighten($hex-value, 30%);

                &:hover {
                    background-color: shade($hex-value, 15%);
                }

                .tooltip {
                    background-color: $hex-value;

                    &:before {
                        @include triangle(0.8rem, $hex-value, left);
                    }
                }
            }
        }

    }
}
