.tags {
    display: flex;
    flex-direction: row;
    gap: var(--gaps-xxs, 4px);
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-self: stretch;
    flex: 1;
    position: relative;
    max-height: 44px;
    overflow: auto;
}

.tag {
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    padding: 0;
    background-color: var(--states-tags-bg-default);
    border-radius: 4px;
    color: var(--states-tags-text-default, #808080);
    max-width: 70px;
}

    .tag:hover {
        background-color: var(--states-tags-bg-hover);
        color: var(--states-tags-text-hover);
    }

    .tag.active {
        background-color: var(--states-actags-bg-default);
        color: var(--states-actags-text-default);
    }

        .tag.active:hover {
            background-color: var(--states-actags-bg-hover);
            color: var(--states-actags-text-hover);
        }

        .tag.active:active {
            background-color: var(--states-actags-bg-active);
            color: var(--states-actags-text-active);
            transition: background-color 1s ease;
        }

.tag-default {
    border-radius: 4px;
    padding: var(--numbers-gaps-xxs, 4px) var(--numbers-gaps-xs, 8px) var(--numbers-gaps-xxs, 4px) var(--numbers-gaps-xs, 8px);
    display: flex;
    flex-direction: row;
    gap: var(--numbers-gaps-s);
    align-items: center;
    justify-content: flex-start;
    height: 20px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.tag-title {
    text-align: left;
    font-family: var(--p-comments-font-family, 'Muller-Regular', sans-serif);
    font-size: var(--p-comments-font-size, 9px);
    line-height: var(--p-comments-line-height, 130%);
    font-weight: var(--p-comments-font-weight, 400);
    position: relative;
    margin-top: 2px;
    text-wrap: nowrap;
}

.card-model:hover .tag {
    color: var(--states-tags-text-default-hover);
    background-color: var(--states-tags-bg-default-hover);
}

    .card-model:hover .tag.active {
        background-color: var(--states-actags-bg-default);
        color: var(--states-actags-text-default);
    }

        .card-model:hover .tag.active:hover {
            background-color: var(--states-actags-bg-hover);
            color: var(--states-actags-text-hover);
        }

    .card-model:hover .tag:hover {
        background-color: var(--states-tags-bg-hover);
        color: var(--states-tags-text-hover);
    }

.card-model:active .tag {
    color: var(--states-actags-text-default);
    background-color: var(--states-actags-bg-default);
}
    .card-model:active .tag:active {
        color: var(--states-tags-text-active-active);
        background-color: var(--states-tags-bg-active-active);
    }

    .card-model:active .tag.active {
        color: var(--states-actags-text-default);
        background-color: var(--states-actags-bg-default-active);
    }

        .card-model:active .tag.active:active {
            color: var(--states-actags-text-default);
            background-color: var(--states-actags-bg-active-active);
            transition: background-color 1s ease;
        }