import { css } from "lit";
const componentStyle = css`
          * {
            -webkit-tap-highlight-color: transparent;
          }

:host {
  display: inline-block;
}

.wrapper {
  --obc-tag-padding-block: 1px;
  --obc-tag-border-width: 1px;
  display: inline-flex;
  min-height: var(--ui-components-tag-visual-target, 24px);
  padding: var(
    --ui-components-tag-padding,
    var(--obc-tag-padding-block)
      var(--ui-components-tag-padding-horizontal, 6px)
  );
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--ui-components-tag-border-radius, 4px);
  border: 1px solid var(--indent-enabled-border-color);
  background: var(--indent-enabled-background-color);
}

.tag-label-container {
  display: flex;
  padding: 0 var(--ui-components-tag-label-spacing, 4px);
  justify-content: center;
  align-items: center;
}

.tag-label {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-regular);
  font-size: var(--global-typography-ui-label-font-size);
  line-height: var(--global-typography-ui-label-line-height);
  font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
  line-height: var(--ui-components-tag-label-line-height, 12px);
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.tag-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-components-tag-icon-size, 16px);
  height: var(--ui-components-tag-icon-size, 16px);
  max-width: calc(
    var(--ui-components-tag-visual-target, 24px) -
      (var(--obc-tag-padding-block) + var(--obc-tag-padding-block)) -
      (var(--obc-tag-border-width) + var(--obc-tag-border-width))
  );
  max-height: calc(
    var(--ui-components-tag-visual-target, 24px) -
      (var(--obc-tag-padding-block) + var(--obc-tag-padding-block)) -
      (var(--obc-tag-border-width) + var(--obc-tag-border-width))
  );
  flex-shrink: 0;
  line-height: 0;
}

.tag-icon-wrapper ::slotted(*) {
  display: block;
  width: 100%;
  height: 100%;
}

/* Color variants */

.color-gray {
  background: var(--indent-enabled-background-color);
  border-color: var(--indent-enabled-border-color);
  color: var(--on-indent-active-color);
}

.color-gray .tag-icon-wrapper {
    color: var(--on-indent-neutral-color);
  }

.color-blue {
  border-color: var(--base-blue-100);
  background-color: var(--base-blue-050);
  color: var(--base-blue-600);
}

.color-blue .tag-icon-wrapper {
    color: var(--base-blue-500);
  }

.color-cyan {
  border-color: var(--base-cyan-100);
  background-color: var(--base-cyan-050);
  color: var(--base-cyan-600);
}

.color-cyan .tag-icon-wrapper {
    color: var(--base-cyan-500);
  }

.color-teal {
  border-color: var(--base-teal-100);
  background-color: var(--base-teal-050);
  color: var(--base-teal-600);
}

.color-teal .tag-icon-wrapper {
    color: var(--base-teal-500);
  }

.color-green {
  border-color: var(--base-mint-100, #bfe5d5);
  background-color: var(--base-mint-050, #e2f3eb);
  color: var(--base-mint-600, #00452f);
}

.color-green .tag-icon-wrapper {
    color: var(--base-mint-500, #005f43);
  }

.color-yellow {
  border-color: var(--base-yellow-100);
  background-color: var(--base-yellow-050);
  color: var(--base-yellow-600);
}

.color-yellow .tag-icon-wrapper {
    color: var(--base-yellow-500);
  }

.color-orange {
  border-color: var(--base-orange-100);
  background-color: var(--base-orange-050);
  color: var(--base-orange-600);
}

.color-orange .tag-icon-wrapper {
    color: var(--base-orange-500);
  }

.color-red {
  border-color: var(--base-red-100);
  background-color: var(--base-red-050);
  color: var(--base-red-600);
}

.color-red .tag-icon-wrapper {
    color: var(--base-red-500);
  }

.color-purple {
  border-color: var(--base-purple-100);
  background-color: var(--base-purple-050);
  color: var(--base-purple-600);
}

.color-purple .tag-icon-wrapper {
    color: var(--base-purple-500);
  }

.color-indigo {
  border-color: var(--base-indigo-100);
  background-color: var(--base-indigo-050);
  color: var(--base-indigo-600);
}

.color-indigo .tag-icon-wrapper {
    color: var(--base-indigo-500);
  }
`;
export {
  componentStyle as default
};
//# sourceMappingURL=tag.css.js.map
