@import "../../styles/color";
@import "../../styles/sizes";
@import "../../styles/flex";
@import "../../styles/typography";

.one-ui-tag{
    $root: &;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    color: color(dark);


    @include setMargin();
    @include setFlex();
    @include setAlign();

    &__text{
        padding-bottom: 1px;
        white-space: nowrap;
    }
    &__dot{
        height: 8px;
        width: 8px;
        border-radius: 8px;
        margin-right: 8px;
    }
    &__arrow{
        transform: translate3d(0,1px,0);
        margin-left: 8px;
        opacity: 0.3;
    }

    &--frame{
        @mixin tagColor($key,$background,$color){
            &-#{$key}{
                background-color: $background;
                #{$root}__dot{
                    background-color: $color;
                }
                &#{$root}--transparent{
                    background-color: transparent;
                    &:hover {
                        background-color: $background;
                    }
                }
            }
        }
        @include tagColor(key,color(key,1,.1), color(key));
        @include tagColor(grey,color(grey,2,.5), color(grey,6));
        @include tagColor(green,color(green,1,.15), color(green));
        @include tagColor(blue,color(blue,1,.2), color(blue));
        @include tagColor(violet,color(violet,1,.1), color(violet));
        @include tagColor(yellow,color(yellow,1,.2), color(yellow));
        @include tagColor(red,color(red,1,.1), color(red));
    }
    &--size {
        $sizeNames: xs sm md lg xl;
        $sizes: 24 32 40 48 56;
        $paddingsVertical: 2px, 2px, 6px, 10px, 10px, 14px;
        $paddingsHorizontal: 12px, 16px, 18px, 26px, 28px, 32px;
        //$paddings: 2px 8px, 2px 16px, 6px 18px, 10px 26px, 10px 28px, 14px 32px;

        @mixin tagSize($root, $size) {
            $i: index($sizes, $size);
            &-#{nth($sizeNames, $i)} {
                padding: #{nth($paddingsVertical, $i) + ' ' + nth($paddingsHorizontal, $i)};

                height: #{$size}px;
                min-height: #{$size}px;
                min-width: #{$size}px;
                #{$root}__arrow{
                    margin-left: #{nth($paddingsVertical, $i)};
                }

                &#{$root}--align-left{
                    padding-left: #{ ($size - 16 )/2}px;
                }
            }
        }
        @each $size in $sizes{
            @include tagSize($root, $size);
        }
    }
    &--transparent{
        background-color: transparent;
    }
    &--bold{
        font-weight: 700;
    }
    &--fullWidth{
        width: 100%;
    }
}