.tag {
    background-color: var(--secondary);
    border-radius: 100px;
    min-height: 23px;
    display: flex;
    align-items: center;

    & .tag__label {
        font: var(--regular-caption);
        color: var(--dark-text);
    }
}

.tag--small {
    width: fit-content;
    justify-content: center;
    padding: 0 12px;
}

.tag--medium {
    width: fit-content;
    justify-content: center;
    padding: 6px 12px;

    & .tag__label {
        font: var(--regular-caption);
        color: var(--dark-text);
    }
}

.notify__tag {
    display: flex;
    height: 24px;
    padding: 0 12px;
    align-items: center;
    text-transform: uppercase;
    border-radius: 100px;
    font: var(--regular-caption);
    color: var(--dark-text-secondary);
}

.notify__tag--general {
    background-color: var(--secondary);
}

.notify__tag--success {
    background-color: var(--light-green);
}

.notify__tag--green {
    background-color: var(--light-green);
}

.notify__tag--orange {
    background-color: #fff0d6;
    color: #8a4b00;
}

.notify__tag--red {
    background-color: var(--red);
    color: var(--background);
}

.notify__tag--important {
    background-color: #eadfff;
    color: #5f2bbd;
}

.notify__tag--reject {
    background-color: var(--red);
    color: var(--background);
}

@media (max-width: 768px) {

    .tag {
        min-height: 20px;
    }

    .tag--medium {
        padding: 4px 8px;

        & .tag__label {
            font: 400 10px/12.1px "Inter", serif;
        }
    }

    .tag--small {
        height: 20px;
        & .tag__label {
            font: 400 10px/12.1px "Inter", serif;
        }
    }

    .notify__tag {
        height: 18px;
        padding: 0 8px;
        font: var(--mobile-subtitle);
    }
}

.tag--withIcon {
    width: fit-content;
    padding: 0 12px;
    height: 28px;
    gap: 0 10px;
    justify-content: center;
    & svg {
        cursor: pointer;
    }
}

.tag--message {
    width: fit-content;
    height: 30px;
    display: flex;
    flex-wrap: wrap;

    & .tag__label {
        font: var(--regular-caption);
        color: var(--dark-text);
        padding: 0 12px;
    }

    & .tag__message--counter {
        width: 18px;
        height: 18px;
        border-radius: 100px;
        background: var(--primary);
        margin-right: 12px;
        display: none;
        justify-content: center;
        align-content: center;
        font: 8px/100% "Inter", serif;
        color: var(--background);
        flex-wrap: wrap;
    }

    & .tag__message--counter.active {
        display: flex;
    }

    & .tag__label--counter {
        padding: 0 6px 0 12px;
    }
}

.testBtn {
    border-radius: 100px;
    height: 23px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary);
}

@media (max-width: 768px) {
    .tag--withIcon {
        height: 26px;
        & .tag__label {
            font: var(--mobile-subtitle);
        }
        & svg {
            width: 14px;
            height: 14px;
        }
    }
}