.chip {
    display: inline-block;
    background: transparent;
    border-radius: 12px;
    height: 24px;
    box-sizing: border-box;
    position: relative;
    font-size: 18px;
    color: var(--text-black);
}

.chip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    box-sizing: border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.chip_outlined::before {
    border: 1px solid transparent;
    border-radius: 12px;
}

.chip-gradient-borders::before {
    border: 1px solid transparent;
    background: var(--gradient-divider-ver);
    border-radius: 12px;
}

.chip__name {
    display: inline-flex;
    align-items: flex-start;
    border-radius: 11px;
    height: 19px;
    line-height: 17px;
    margin: 3px 11px;
    color: var(--text-black);
    ;
}

.chip__name:hover {
    color: var(--text-black);
    ;
}

.chip_white::before {
    border: 1px solid transparent;
    background: white;
    border-radius: 12px;
}

.chip__name span {
    font-size: 18px;
    line-height: 19px;
    letter-spacing: 0.05em;
    margin-bottom: 1px;
}

.chip_white .chip__name {
    background: transparent;
    color: white !important;
}

.chip_white .chip {
    background: transparent;
    border: 1px solid white !important;
}

.chip_gray .chip {
    background: var(--color-lightgray);
    border: var(--color-lightgray);
}

.chip_gray .chip::before {
    background: var(--color-lightgray);
}

.chip_gray .chip__name {
    background: var(--color-lightgray);
    border: var(--color-lightgray);
}

.chip_lightgray::before {
    border: 1px solid transparent;
    background: var(--color-lightgray-2);
    border-radius: 12px;
}

.chip_darkgray .chip {
    background: var(--color-darkgray);
    border: var(--color-darkgray);
}
.chip_darkgray .chip::before {
    background: var(--color-darkgray);
}
.chip_darkgray .chip__name {
    background: var(--color-darkgray);
    border: var(--color-darkgray);
}
.chip_outlined.chip_darkgray .chip__name {
    background: transparent;
}
.chip_semidarkgray .chip {
    background: var(--color-semidarkgray);
    border: var(--color-semidarkgray);
}

.chip_semidarkgray .chip::before {
    background: var(--color-semidarkgray);
}

.chip_semidarkgray .chip__name {
    background: var(--color-semidarkgray);
    border: var(--color-semidarkgray);
}

.chip-gradient-fill.chip {
    background: var(--gradient-divider-ver);
}

.chip-gradient-fill .chip__name {
    background: transparent;
}

.chip_red {
    background: var(--color-alert);
    color: #fff;
}

.chip_red .chip__name {
    color: #fff;
}

.chip_rectangle {
    position: relative;
    padding-top: 3px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    border-radius: 0;
    line-height: 16px;
    letter-spacing: 0.36px;
}

.chip_rectangle:before {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    left: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 24px 10px 0 0;
    border-color: var(--color-alert) transparent transparent transparent;
}

.chip_rectangle:after {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 24px 10px;
    border-color: transparent transparent var(--color-alert) transparent;
}

.chip_rectangle .chip__name {
    margin: 0;
    border-radius: 0;
}

.chip_bw .chip , .chip_bw.chip {
    background: transparent;
    border: #f1f3f5;
}
.chip_bw .chip::before, .chip_bw.chip::before {
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f1f3f5 !important;
}
.chip_bw .chip__name, .chip_bw .chip__name {
    background: transparent !important;
    color: #f1f3f5 !important;
}

.chip_bw-green {
    background: var(--color-bw-primary);
    border: var(--color-bw-primary);
}

.chip_bw-green .chip__name {
    color: white;
}