.metadata-tag {
  --metadata-tag-bg: light-dark(var(--color-gray-100), var(--color-zinc-800));
  --metadata-tag-border: light-dark(
    var(--color-gray-300),
    var(--color-zinc-700)
  );
  --metadata-tag-point: 0.5rem;

  position: relative;
  display: inline-flex;
  align-items: center;
  height: 1.625rem;
  padding: 1px calc(var(--metadata-tag-point) + 0.375rem) 1px 1rem;
  font-size: var(--text-xs);
  font-weight: 500;
  color: light-dark(var(--color-gray-900), var(--color-zinc-100));
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.05em;
  background: var(--metadata-tag-border);
  border: 0;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  clip-path: polygon(
    0 0,
    calc(100% - var(--metadata-tag-point)) 0,
    100% 50%,
    calc(100% - var(--metadata-tag-point)) 100%,
    0 100%
  );
  isolation: isolate;

  & > * {
    position: relative;
    z-index: 1;
  }

  &::before {
    content: "";
    position: absolute;
    left: 0.375rem;
    top: 50%;
    width: 0.3125rem;
    height: 0.3125rem;
    transform: translateY(-50%);
    border-radius: 9999px;
    background: light-dark(var(--color-white), var(--color-zinc-900));
    border: 1px solid light-dark(rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.16));
    box-shadow: inset 0 1px 1px
      light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.45));
    z-index: 2;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--metadata-tag-bg);
    border-radius: calc(var(--border-radius) - 1px) 0 0
      calc(var(--border-radius) - 1px);
    clip-path: polygon(
      0 0,
      calc(100% - var(--metadata-tag-point)) 0,
      100% 50%,
      calc(100% - var(--metadata-tag-point)) 100%,
      0 100%
    );
    box-shadow: inset 0 1px 0
      light-dark(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.03));
    z-index: 0;
  }

  &.metadata-tag--lowercase {
    text-transform: lowercase;
  }

  .metadata-tag__title {
    opacity: 0.8;
    font-weight: 600;
  }

  .metadata-tag__divider {
    width: 1px;
    height: 1.25rem;
    margin: 0 0.75rem;
    background: light-dark(var(--color-gray-300), var(--color-zinc-700));
    box-shadow: 0 0 1px light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.5));
  }

  .metadata-tag__value {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
  }

  &.metadata-tag--handled-yes {
    --metadata-tag-bg: light-dark(#eef8ee, #172824);
    --metadata-tag-border: light-dark(#c0e0c0, #253d35);

    color: light-dark(var(--color-green-700), var(--color-green-300));
  }

  &.metadata-tag--handled-no {
    --metadata-tag-bg: light-dark(#f8eeee, #281717);
    --metadata-tag-border: light-dark(#e0c0c0, #3d2525);

    color: light-dark(var(--color-red-700), var(--color-red-300));
  }

  &.metadata-tag--severity {
    --metadata-tag-bg: light-dark(#eeeef8, #1e1e2a);
    --metadata-tag-border: light-dark(#c0c0e0, #353560);

    color: light-dark(#404080, #a0a0e0);
  }

  &.metadata-tag--environment {
    --metadata-tag-bg: light-dark(#f8f4ee, #242217);
    --metadata-tag-border: light-dark(#e0d8c0, #4d4530);

    color: light-dark(#706040, #d0b890);
  }

  &.metadata-tag--server {
    --metadata-tag-bg: light-dark(#eeeef8, #1e1e2f);
    --metadata-tag-border: light-dark(#c0c0e0, #3a3a70);

    color: light-dark(#404070, #b0b0e8);
  }

  &.metadata-tag--timestamp {
    --metadata-tag-bg: light-dark(#f0f0f0, #1a1a1f);
    --metadata-tag-border: light-dark(#c8c8c8, #35353a);

    color: light-dark(#505050, #b0b0b0);
  }

  &.metadata-tag--release {
    max-width: 8rem;
    overflow: visible;
    --metadata-tag-bg: light-dark(var(--color-white), var(--color-zinc-800));
    --metadata-tag-border: light-dark(#eaeaea, #5b5a5a);

    color: light-dark(var(--color-blue-600), var(--color-blue-400));
    cursor: pointer;
    transition:
      background-color 0.15s,
      box-shadow 0.1s;
    background-image: none;
    text-transform: none;

    &:hover {
      --metadata-tag-bg: light-dark(
        var(--color-gray-50),
        var(--color-zinc-700)
      );
    }

    &:active {
      --metadata-tag-bg: light-dark(
        var(--color-gray-100),
        var(--color-zinc-700)
      );
      box-shadow: inset 0 -1px #3d3d3d0a;
    }

    &:focus,
    &:focus-within {
      outline: none;
      box-shadow:
        inset 0 -2.4px #3d3d3d0a,
        0 0 0 2px light-dark(var(--color-blue-600), var(--color-blue-300)),
        0 0 0 4px light-dark(transparent, #000000);
      --metadata-tag-bg: light-dark(
        var(--color-gray-100),
        var(--color-zinc-700)
      );
    }

    svg {
      flex-shrink: 0;
    }

    & > .metadata-tag__value {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.25rem;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      text-decoration: none;
    }
  }

  .metadata-tag__version-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}