.ui-label {
  gap: var(--ui-label-offset);
  margin-right: 0;
  padding-block: var(--kt-ui-label-padding-block);
  padding-inline: var(--kt-ui-label-padding-inline);
  border: var(--kt-ui-label-border-width) solid var(--ui-label-border-color);
  border-radius: var(--ui-label-border-radius);
  color: var(--ui-label-color);
  background-color: var(--ui-label-background-color);
  transition-property: color, border-color, background-color;
  transition-duration: 160ms;
}

.ui-label + .ui-label {
  margin-left: var(--ui-label-side-offset);
}

.ui-label-clickable {
  cursor: pointer;
}

.ui-label-with-icon {
  padding-left: calc(var(--kt-ui-label-padding-inline) / 2);
}

/* Region size */
.ui-label-lg {
  --ui-label-height: var(--kt-ui-label-height-lg);
  --kt-ui-label-padding-inline: 12px;
}

.ui-label-md {
  --ui-label-height: var(--kt-ui-label-height-md);
}

.ui-label-sm {
  --ui-label-height: var(--kt-ui-label-height-sm);
}

/* Endregion */
/* Region text */
.ui-label-inner {
  font-size: var(--kt-ui-label-font-size);
  line-height: var(--kt-ui-label-line-height);
  font-weight: var(--ui-label-font-weight);
  letter-spacing: var(--kt-ui-label-letter-spacing);
  color: var(--ui-label-color);
}

/* Endregion */
/* Region bold text */
.ui-label-bold .ui-label-inner {
  --ui-label-font-weight: 600;
}

.ui-label-semibold .ui-label-inner {
  --ui-label-font-weight: 500;
}

/* Endregion */
/* Region uppercase text */
.ui-label-caps .ui-label-inner {
  text-transform: uppercase;
}

/* Endregion */
/* Region remove btn */
.ui-label-icon {
  border: none;
}

/* Endregion */
/* Region hover-state */
a.ui-label:hover,
.ui-label-link:hover,
.ui-label.ui-label-clickable:hover {
  border-color: var(--ui-label-border-color-hover) !important;
  background-color: var(--ui-label-background-color-hover);
}

a.ui-label:hover .ui-label-inner,
.ui-label-link:hover .ui-label-inner,
.ui-label.ui-label-clickable:hover .ui-label-inner {
  color: var(--ui-label-color-hover);
}

/* Endregion */
/* Region theme */
/* Primary */
.ui-label-default,
.ui-label-primary {
  --ui-label-color: var(--kt-ui-text-color-primary);
  --ui-label-color-hover: var(--kt-ui-text-color-primary);
  --ui-label-background-color: var(--ui-label-primary);
  --ui-label-background-color-hover: var(--ui-label-primary-hover);
  --ui-label-border-color: var(--ui-label-primary);
  --ui-label-border-color-hover: var(--ui-label-primary-hover);
}

/* Secondary */
.ui-label-secondary {
  --ui-label-color: var(--kt-ui-text-color-secondary);
  --ui-label-color-hover: var(--kt-ui-text-color-secondary);
  --ui-label-background-color: var(--ui-label-secondary);
  --ui-label-background-color-hover: var(--ui-label-secondary-hover);
  --ui-label-border-color: var(--ui-label-secondary);
  --ui-label-border-color-hover: var(--ui-label-secondary-hover);
}

/* Tertiary */
.ui-label-tertiary {
  --ui-label-color: var(--kt-ui-text-color-helper);
  --ui-label-color-hover: var(--kt-ui-text-color-helper);
  --ui-label-background-color: var(--ui-label-tertiary);
  --ui-label-background-color-hover: var(--ui-label-tertiary-hover);
  --ui-label-border-color: var(--ui-label-tertiary);
  --ui-label-border-color-hover: var(--ui-label-tertiary-hover);
}

/* Blue outline */
.ui-label-blue:not(.ui-label-fill) {
  --ui-label-color: var(--kt-ui-text-color-primary);
  --ui-label-color-hover: var(--kt-ui-text-color-primary);
  --ui-label-background-color: transparent;
  --ui-label-background-color-hover: var(--kt-ui-palette-grey-200);
  --ui-label-border-color: var(--ui-label-blue);
  --ui-label-border-color-hover: var(--ui-label-blue-hover);
  --ui-label-link-dashed-color: transparent;
}

/* Blue filled */
.ui-label-blue.ui-label-fill {
  --ui-label-color: var(--ui-label-white);
  --ui-label-color-hover: var(--ui-label-white);
  --ui-label-background-color: var(--ui-label-blue);
  --ui-label-background-color-hover: var(--ui-label-blue-hover);
  --ui-label-border-color: var(--ui-label-blue);
  --ui-label-border-color-hover: var(--ui-label-blue-hover);
}

/* Blue text-on-color */
.ui-label-blue.ui-label-color-text {
  --ui-label-color: var(--ui-label-blue);
  --ui-label-color-hover: var(--ui-label-blue-hover);
  --ui-label-background-color: var(--ui-label-white);
  --ui-label-background-color-hover: var(--ui-label-white);
  --ui-label-border-color: var(--ui-label-white);
  --ui-label-border-color-hover: var(--ui-label-white);
}

/* Purple outline */
.ui-label-purple:not(.ui-label-fill) {
  --ui-label-color: var(--kt-ui-text-color-primary);
  --ui-label-color-hover: var(--kt-ui-text-color-primary);
  --ui-label-background-color: transparent;
  --ui-label-background-color-hover: var(--kt-ui-palette-grey-200);
  --ui-label-border-color: var(--ui-label-purple);
  --ui-label-border-color-hover: var(--ui-label-purple-hover);
  --ui-label-link-dashed-color: transparent;
}

/* Purple filled */
.ui-label-purple.ui-label-fill {
  --ui-label-color: var(--ui-label-white);
  --ui-label-color-hover: var(--ui-label-white);
  --ui-label-background-color: var(--ui-label-purple);
  --ui-label-background-color-hover: var(--ui-label-purple-hover);
  --ui-label-border-color: var(--ui-label-purple);
  --ui-label-border-color-hover: var(--ui-label-purple-hover);
}

/* Purple text-on-color */
.ui-label-purple.ui-label-color-text {
  --ui-label-color: var(--ui-label-purple);
  --ui-label-color-hover: var(--ui-label-purple-hover);
  --ui-label-background-color: var(--ui-label-white);
  --ui-label-background-color-hover: var(--ui-label-white);
  --ui-label-border-color: var(--ui-label-white);
  --ui-label-border-color-hover: var(--ui-label-white);
}

/* Pink outline */
.ui-label-pink:not(.ui-label-fill) {
  --ui-label-color: var(--kt-ui-text-color-primary);
  --ui-label-color-hover: var(--kt-ui-text-color-primary);
  --ui-label-background-color: transparent;
  --ui-label-background-color-hover: var(--kt-ui-palette-grey-200);
  --ui-label-border-color: var(--ui-label-pink);
  --ui-label-border-color-hover: var(--ui-label-pink-hover);
  --ui-label-link-dashed-color: transparent;
}

/* Pink filled */
.ui-label-pink.ui-label-fill {
  --ui-label-color: var(--ui-label-white);
  --ui-label-color-hover: var(--ui-label-white);
  --ui-label-background-color: var(--ui-label-pink);
  --ui-label-background-color-hover: var(--ui-label-pink-hover);
  --ui-label-border-color: var(--ui-label-pink);
  --ui-label-border-color-hover: var(--ui-label-pink-hover);
}

/* Pink text-on-color */
.ui-label-pink.ui-label-color-text {
  --ui-label-color: var(--ui-label-pink);
  --ui-label-color-hover: var(--ui-label-pink-hover);
  --ui-label-background-color: var(--ui-label-white);
  --ui-label-background-color-hover: var(--ui-label-white);
  --ui-label-border-color: var(--ui-label-white);
  --ui-label-border-color-hover: var(--ui-label-white);
}

/* Red outline */
.ui-label-red:not(.ui-label-fill) {
  --ui-label-color: var(--kt-ui-text-color-primary);
  --ui-label-color-hover: var(--kt-ui-text-color-primary);
  --ui-label-background-color: transparent;
  --ui-label-background-color-hover: var(--kt-ui-palette-grey-200);
  --ui-label-border-color: var(--ui-label-red);
  --ui-label-border-color-hover: var(--ui-label-red-hover);
  --ui-label-link-dashed-color: transparent;
}

/* Pink filled */
.ui-label-red.ui-label-fill {
  --ui-label-color: var(--ui-label-white);
  --ui-label-color-hover: var(--ui-label-white);
  --ui-label-background-color: var(--ui-label-red);
  --ui-label-background-color-hover: var(--ui-label-red-hover);
  --ui-label-border-color: var(--ui-label-red);
  --ui-label-border-color-hover: var(--ui-label-red-hover);
}

/* Red text-on-color */
.ui-label-red.ui-label-color-text {
  --ui-label-color: var(--ui-label-red);
  --ui-label-color-hover: var(--ui-label-red-hover);
  --ui-label-background-color: var(--ui-label-white);
  --ui-label-background-color-hover: var(--ui-label-white);
  --ui-label-border-color: var(--ui-label-white);
  --ui-label-border-color-hover: var(--ui-label-white);
}

/* Yellow outlined */
.ui-label-yellow:not(.ui-label-fill) {
  --ui-label-color: var(--kt-ui-text-color-primary);
  --ui-label-color-hover: var(--kt-ui-text-color-primary);
  --ui-label-background-color: transparent;
  --ui-label-background-color-hover: var(--kt-ui-palette-grey-200);
  --ui-label-border-color: var(--ui-label-yellow);
  --ui-label-border-color-hover: var(--ui-label-yellow-hover);
  --ui-label-link-dashed-color: transparent;
}

/* Yellow filled */
.ui-label-yellow.ui-label-fill {
  --ui-label-color: var(--ui-label-white);
  --ui-label-color-hover: var(--ui-label-white);
  --ui-label-background-color: var(--ui-label-yellow);
  --ui-label-background-color-hover: var(--ui-label-yellow-hover);
  --ui-label-border-color: var(--ui-label-yellow);
  --ui-label-border-color-hover: var(--ui-label-yellow-hover);
}

/* Yellow text-on-color */
.ui-label-yellow.ui-label-color-text {
  --ui-label-color: var(--ui-label-yellow);
  --ui-label-color-hover: var(--ui-label-yellow-hover);
  --ui-label-background-color: var(--ui-label-white);
  --ui-label-background-color-hover: var(--ui-label-white);
  --ui-label-border-color: var(--ui-label-white);
  --ui-label-border-color-hover: var(--ui-label-white);
}

/* Green outline */
.ui-label-green:not(.ui-label-fill) {
  --ui-label-color: var(--kt-ui-text-color-primary);
  --ui-label-color-hover: var(--kt-ui-text-color-primary);
  --ui-label-background-color: transparent;
  --ui-label-background-color-hover: var(--kt-ui-palette-grey-200);
  --ui-label-border-color: var(--ui-label-green);
  --ui-label-border-color-hover: var(--ui-label-green-hover);
  --ui-label-link-dashed-color: transparent;
}

/* Green filled */
.ui-label-green.ui-label-fill {
  --ui-label-color: var(--ui-label-white);
  --ui-label-color-hover: var(--ui-label-white);
  --ui-label-background-color: var(--ui-label-green);
  --ui-label-background-color-hover: var(--ui-label-green-hover);
  --ui-label-border-color: var(--ui-label-green);
  --ui-label-border-color-hover: var(--ui-label-green-hover);
}

/* Green text-on-color */
.ui-label-green.ui-label-color-text {
  --ui-label-color: var(--ui-label-green);
  --ui-label-color-hover: var(--ui-label-green-hover);
  --ui-label-background-color: var(--ui-label-white);
  --ui-label-background-color-hover: var(--ui-label-white);
  --ui-label-border-color: var(--ui-label-white);
  --ui-label-border-color-hover: var(--ui-label-white);
}

/* Grey outline */
.ui-label-gray:not(.ui-label-fill) {
  --ui-label-color: var(--kt-ui-text-color-primary);
  --ui-label-color-hover: var(--kt-ui-text-color-primary);
  --ui-label-background-color: transparent;
  --ui-label-background-color-hover: var(--kt-ui-palette-grey-200);
  --ui-label-border-color: var(--ui-label-grey);
  --ui-label-border-color-hover: var(--ui-label-grey-hover);
  --ui-label-link-dashed-color: transparent;
}

/* Grey filled */
.ui-label-gray.ui-label-fill {
  --ui-label-color: var(--kt-ui-text-color-primary);
  --ui-label-color-hover: var(--kt-ui-text-color-primary);
  --ui-label-background-color: var(--ui-label-grey);
  --ui-label-background-color-hover: var(--ui-label-grey-hover);
  --ui-label-border-color: var(--ui-label-grey);
  --ui-label-border-color-hover: var(--ui-label-grey-hover);
}

/* Grey text-on-color */
.ui-label-gray.ui-label-color-text {
  --ui-label-color: var(--kt-ui-text-color-primary);
  --ui-label-color-hover: var(--kt-ui-color-primary);
  --ui-label-background-color: var(--ui-label-white);
  --ui-label-background-color-hover: var(--ui-label-white);
  --ui-label-border-color: var(--ui-label-white);
  --ui-label-border-color-hover: var(--ui-label-white);
}

/* Endregion */