/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import "../variables";
@import "../variables/buttons_vars";
@import "../mixins";
@import "../variables/tags_vars";

.dlt-tags {
    @include component-vars(tags);
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-flex;
    flex-wrap: wrap;

    .dlt-tags__item {
        font-weight: 500;
        height: 24px;
        margin: $tags-item-margin;
        padding: $tags-item-padding;
        border: $tags-item-border-width $tags-item-border-style $tags-item-color-border;
        border-radius: $tags-item-border-radius;
        outline: $tags-item-border-width-hover $tags-item-border-style-hover transparent;
        outline-offset: $tags-item-outline-offset;
        background-color: $tags-item-background-color;
        color: $tags-item-color;
        font-size: $tags-item-font-size;
        line-height: $tags-item-line-height;
        text-decoration: none;
        cursor: default;
        display: inline-flex;
        align-items: center;
        @include transition($tags-item-transition);

        &.dlt-tags--blue{
            background: $tags-item-background-color-blue;
        }
        &.dlt-tags--teal{
            background: $tags-item-background-color-teal;
        }
        &.dlt-tags--red{
            background: $tags-item-background-color-red;
        }
        &.dlt-tags--purple{
            background: $tags-item-background-color-purple;
        }
        &.dlt-tags--violet{
            background: $tags-item-background-color-violet;
        }
        &.dlt-tags--yellow{
            background: $tags-item-background-color-yellow;
        }
        &.dlt-tags--green{
            background: $tags-item-background-color-green;
        }
        &.dlt-tags--warmgray{
            background: $tags-item-background-color-warmgray;
        }

        &+.sm-bfontutton {
            -sifontze: $tags-item-small-font-size;
        }

        span {
            max-width: 140px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-left: 3px; //Supposed to be 2px, bcos of text kerning in code is different had to increase to match the design
            line-height: $tags-item-span-line-height;
            font-weight: $tags-item-span-font-weight;
        }

        span.dlt-tooltip-text {
            max-width: 100%;
            overflow: visible;
        }

        .dlt-icon{
            font-size: 16px;
            margin-right: 2px;
        }

        .dlt-icon-close{
            margin-right: 0;
        }

        &-clear {
            margin: $tags-item-clear-margin;
            width: $tags-item-clear-size;
            height: $tags-item-clear-size;
            font-size: $tags-item-clear-size;
            line-height: 1;
            color: $tags-item-clear-color;
            cursor: pointer;
            outline: 0;
            border: 0;
            @include box-shadow(none);

            .dlt-icon {
                font-size: $tags-item-clear-size;
            }

            &:hover {
                color: $tags-color-primary-active;
            }
        }

        .dlt-button-icon:not(.btn-selected):not(:active):hover:enabled, .dlt-button-icon:hover{
            border: 0;
            @include box-shadow(none);
            outline: none;
        }

        .dlt-button-icon:active{
            border: $tags-item-clear-hover-border;
            @include box-shadow($tags-item-clear-hover-box-shadow);
        }
    }

    &.dlt-tags-status{

        .dlt-tags__item {
            background: transparent;

            .dlt-icon{
                margin-right: 4px;
            }
        }

        &.dlt-tags-status--secondary{
            .dlt-tags__item {
                padding: 4px 8px 4px 4px;
                border-radius: 20px;
                border: 1px solid $tags-item-color-border;

                &.dlt-tags-status--success{
                    border-color: var(--dlt-color-system-message-success);
                }
                &.dlt-tags-status--info{
                    border-color: var(--dlt-color-system-message-info);
                }
                &.dlt-tags-status--error{
                    border-color: var(--dlt-color-system-message-error);
                }
                &.dlt-tags-status--warn{
                    border-color: var(--dlt-color-system-message-warning);
                }
            }
        }

        &.dlt-tags__lg.dlt-tags-status--secondary{
            .dlt-tags__item {
                padding: 4px 12px 4px 4px;
            }
        }
    }

    &[data-allow-selection]{
        &.dlt-tags--accent{
            .dlt-tags__item{
                
                &--selected{
                    background: var(--dlt-color-background-interactive-accent-subtle);
                    border-color: var(--dlt-color-border-interactive-accent);
                    color: var(--dlt-color-text-interactive-accent);
                    
                    &:before{
                        color: var(--dlt-color-icon-interactive-accent);
                    }
                }
            }
        }
        .dlt-tags__item{
            cursor: pointer;
            border-radius: 20px;
            color: var(--dlt-color-text-interactive-primary-highlighted);
            border: 1px solid $tags-selectable-default-border;
            padding: 4px 8px;
            position: relative;

            &--selected{
                background: var(--dlt-color-background-interactive-secondary-active);
                border-color: var(--dlt-color-border-interactive-secondary);
                &:before{
                    content: "\e910";
                    font-family: "dlt-icons";
                    font-size: var(--dlt-sizing-xs, 1rem);
                    margin-left: -1px;
                    margin-right: 4px;
                    pointer-events: none;
                    line-height: var(--dlt-sizing-xs, 1rem);
                    color: var(--dlt-color-icon-interactive-primary-highlighted);
                }
            }
            &:focus:not(:disabled) {
                @include box-shadow(0 0 0 3px $component-color-primary-default);
                outline: 1px solid #fff;
                outline-offset: 0;
            }

            &:hover{
                background: var(--dlt-color-background-interactive-navigation-menu-item-secondary-selected)
            }
        }
    }

    &[data-allow-delete]{
        .dlt-tags__item{
            font-weight: $tags-item-allow-delete-font-weight;

            &:focus {
                border: $tags-item-border-width $tags-item-border-style $tags-item-focus-border-color;
                outline: $tags-item-border-width-hover $tags-item-border-style-hover $tags-item-focus-outline-color;
                outline-offset: $tags-item-outline-offset;
                text-decoration: none;
            }

        }
    }
}

.dlt-tags__sm{
    .dlt-tags__item {
        height: 20px;
        padding:2px;
    }
}

.dlt-tags__lg{

    &[data-allow-selection] {
        .dlt-tags__item {
            padding: 7px 12px;
            font-size: 14px;
            line-height: 16px;
            height: 32px;

            &::before{
                font-size: 24px;
                list-style: 24px;
            }
        }
    }
    &.dlt-tags-status {
        .dlt-tags__item {
            font-size: 14px;
            line-height: 16px;
            height: 32px;

            .dlt-icon{
                font-size: 24px;
            }
        }
    }
    .dlt-tags__item {
        margin:0 var(--dlt-spacing-1-x, 0.5rem) var(--dlt-spacing-1-x, 0.5rem) 0;
    }
}

.dlt-assistive-text {
    position: absolute !important;
    margin: -1px !important;
    border: 0 !important;
    padding: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    text-transform: none !important;
    white-space: nowrap !important;
}