//
// Labels
// --------------------------------------------------

.label {
  --layout-size-height-local: ~"clamp(max(var(--layout-size-height-min), var(--layout-size-height-sm)), var(--layout-size-height, var(--layout-size-height-md)), min(var(--layout-size-height-max), var(--layout-size-height-lg)))";
  --layout-size-height-sm: 18px;
  --layout-size-height-md: 24px;
  --layout-size-height-lg: 32px;
  display: inline-flex;
  position: relative;
  font-size: 11px;
  font-weight: 600;
  gap: 6px;
  line-height: 1;
  height: var(--layout-size-height-local);
  padding: 0 var(--spacing-03);
  border-radius: 100px;
  min-width: 30px;
  justify-content: center;
  align-items: center;
  transition: var(--transition-all-productive);
  max-width: 100%;
  .text-overflow();

  // Exception for category color labels
  &.label-category,
  &.label-icon {
    min-width: auto;
    aspect-ratio: 1/1;
  }

  // Add hover effects, but only for links
  a&, > a {
    color: inherit;
    .text-overflow();
  &:hover,
  &:focus {
    text-decoration: none;
    cursor: pointer;
    }
  }

  // Empty labels collapse automatically (not available in IE8)
  &:empty { display: none; }

  // Quick fix for labels in buttons
  .btn & {
    position: relative;
    top: -1px;
  }

  // Sizes
  &[size="sm"] { --layout-size-height: var(--layout-size-height-sm); padding: 0 var(--spacing-03); }
  &[size="md"] { --layout-size-height: var(--layout-size-height-md); padding: 0 var(--spacing-03); }
  &[size="lg"] { --layout-size-height: var(--layout-size-height-lg); padding: 0 var(--spacing-04); }

  // Icons
  i {
    font-size: calc(1em + 2px);
    font-weight: normal;
  }

  &:has(.label-close) { padding-right: var(--layout-size-height-local); }

  .label-close {
    display: flex;
    position: absolute;
    right: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    margin: 0 0 0 .125rem;
    background-color: rgba(0, 0, 0, 0);
    block-size: var(--layout-size-height-local);
    color: currentColor;
    cursor: pointer;
    inline-size: var(--layout-size-height-local);
    transition: var(--transition-all-productive);
  }
}

.label__divider {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  margin: 5px;
}

// Colors
/// Neutral variations

.label-gray {
  background-color: var(--label-background-gray);
  color: var(--label-color-gray);
}

.label-cool-gray {
  background-color: var(--label-background-cool-gray);
  color: var(--label-color-cool-gray);
}

.label-warm-gray {
  background-color: var(--label-background-warm-gray);
  color: var(--label-color-warm-gray);
}

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

.label-magenta {
  background-color: var(--label-background-magenta);
  color: var(--label-color-magenta);
}

.label-purple {
  background-color: var(--label-background-purple);
  color: var(--label-color-purple);
}

.label-blue {
  background-color: var(--label-background-blue);
  color: var(--label-color-blue);
}

.label-cyan {
  background-color: var(--label-background-cyan);
  color: var(--label-color-cyan);
}

.label-teal {
  background-color: var(--label-background-teal);
  color: var(--label-color-teal);
}

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

.label-primary {
  background-color: var(--label-background-primary);
  color: var(--label-color-primary);
}

.label-brand {
  background-color: var(--label-background-brand);
  color: var(--label-color-brand);
}

.label-outline,
.label-selectable {
  background-color: transparent;
  color: var(--text-primary);
  &, &:hover {border: 1px solid var(--background-inverse);}
}

.label-selectable.active {
  background-color: var(--layer-selected-inverse);
  color: var(--text-inverse);
  border-color: var(--layer-selected-inverse);
}

.label-high-contrast {
  background-color: var(--background-inverse);
  color: var(--text-inverse);
}


// Interactive

.label[href], .label:has(> a) {
  border: 1px solid #00000017;
  &.label-gray {
    border: 1px solid var(--label-border-gray);
    color: var(--label-color-gray);
    &:hover { background-color: var(--label-background-hover-gray); }
  }
  &.label-cool-gray {
    border: 1px solid var(--label-border-cool-gray);
    color: var(--label-color-cool-gray);
    &:hover { background-color: var(--label-background-hover-cool-gray); }
  }
  &.label-warm-gray {
    border: 1px solid var(--label-border-warm-gray);
    color: var(--label-color-warm-gray);
    &:hover { background-color: var(--label-background-hover-warm-gray); }
  }
  &.label-red {
    border: 1px solid var(--label-border-red);
    color: var(--label-color-red);
    &:hover { background-color: var(--label-background-hover-red); }
  }
  &.label-magenta {
    border: 1px solid var(--label-border-magenta);
    color: var(--label-color-magenta);
    &:hover { background-color: var(--label-background-hover-magenta); }
  }
  &.label-purple {
    border: 1px solid var(--label-border-purple);
    color: var(--label-color-purple);
    &:hover { background-color: var(--label-background-hover-purple); }
  }
  &.label-blue {
    border: 1px solid var(--label-border-blue);
    color: var(--label-color-blue);
    &:hover { background-color: var(--label-background-hover-blue); }
  }
  &.label-cyan {
    border: 1px solid var(--label-border-cyan);
    color: var(--label-color-cyan);
    &:hover { background-color: var(--label-background-hover-cyan); }
  }
  &.label-teal {
    border: 1px solid var(--label-border-teal);
    color: var(--label-color-teal);
    &:hover { background-color: var(--label-background-hover-teal); }
  }
  &.label-green {
    border: 1px solid var(--label-border-green);
    color: var(--label-color-green);
    &:hover { background-color: var(--label-background-hover-green); }
  }
  &.label-primary {
    border: 1px solid var(--label-border-primary);
    color: var(--label-color-primary);
    &:hover { background-color: var(--label-background-hover-primary); }
  }
  &.label-brand {
    border: 1px solid var(--label-border-brand);
    color: var(--label-color-brand);
    &:hover { background-color: var(--label-background-hover-brand); }
  }
}

// Contextual Bootstrap variations (linked labels get darker on :hover)
.label-default {
  .label-variant(@label-default-bg);
}

.label-success {
  background-color: var(--support-success);
  color: var(--text-inverse);
}

.label-info {
  background-color: var(--support-info);
  color: var(--text-inverse);
}

.label-warning {
  background-color: var(--support-warning);
  color: #161616;
}

.label-danger {
  background-color: var(--support-error);
  color: var(--text-inverse);
}